Arquivo da tag: Browser

JavaScript e TypeScript – Breve histórico, definição e primeiros passos

Para muitos desenvolvedores que estão começando agora ou para aqueles que estão tendo o primeiro contato com JavaScript, a forma como a linguagem foi projetada pode gerar bastante confusão e resultar em códigos bem ruins.

Ocasionalmente, encontramos soluções onde os desenvolvedores acabaram criando um código “de qualquer jeito”, simplesmente por ser JavaScript. O mais triste é que esses mesmos desenvolvedores, não escreveriam esse mesmo código tão desestruturado em outras linguagens server-side.

Antes de mais nada, vamos começar estabelecendo alguns conceitos:

Para uma solução Web funcionar, basicamente você uma aplicação dividida em 2 partes: Cliente e Servidor. A parte que fica no servidor geralmente é responsável por cuidar da autenticação do usuário, fazer o acesso a banco de dados, lógicas de negócios e disponibilizar informações/dados para a parte do cliente. São exemplos de linguagem de servidor: C#, Java, PHP, entre outras.

Já a parte do cliente é geralmente dividida em 3 partes: HTML, CSS e JavaScript. Essas 3 linguagens (tríade), rodam diretamente no browser (navegador) da pessoa que está acessando o site/aplicação.

Breve histórico: o desenvolvimento do JavaScript teve início em meados de 1995, na Netscape Communications, empresa que criou o browser Netscape (Alguém se lembra dele? :D). Na época, a Netscape Communications percebeu que precisava de uma linguagem para melhorar a experiência do usuário, o que resultaria em uma maior adoção. Como Java era uma linguagem que estava em evidência naquela época, decidiram que a sintaxe na nova linguagem seria parecida com ela. O resultado foi uma linguagem com recursos semelhates à Scheme, com sintaxe parecida com Java e orientação à objetos parecida com SmallTalk.

Não vou me aprofundar muito sobre JavaScript nesse artigo, mas com certeza vocês encontrarão várias referências na internet sobre a linguagem e até mesmo exemplos de códigos que você pode rodar diretamente no console do browser, sem nem mesmo criar uma página Web.

Com o passar do tempo, as aplicações evoluíram. Cada vez mais, é comum criarmos aplicações complexas utilizando basicamente o JavaScript. Quanto mais complexa é uma solução, mais precisamos pensar na arquitetura que vamos adotar.

É imprescindível criarmos uma base de código que seja de fácil manutenção, que nos permita fazer com que a ferramenta que criamos evolua. Com esse intuito, vieram vários frameworks para nos ajudar. Talvez um dos primeiros frameworks nesse sentido seja o jQuery.

Todo desenvolvedor front-end, ou que tenha se aventurado em fazer código client-side, em algum momento escreveu algumas linhas de código utilizando o jQuery ou deu manutenção em alguma solução que foi construída utilizando essa biblioteca.

Em uma época que as APIs dos browsers estavam engatinhando, era muito mais simples manipular elementos da página utilizando os métodos, propriedades e eventos que o jQuery nos proporciona. Ainda mais para os desenvolvedores que tinham conhecimento em desenvolvimento server-side mas estavam se aventurando pelo admirável mundo novo do desenvolvimento client-side.

Aproveitando que comentei da manipulação dos objetos de uma página da web, preciso comentar sobre outro tópico, o DOM.

Document Object Model (DOM)

Quando o browser interpreta um código HTML, ele monta o DOM da página. O DOM é uma árvore de objetos composta por todos os elementos que estão na página. Ou seja, todos os controles de formulário (Input, textarea, etc), referências à scripts, CSS, estão lá.

É através do DOM que você acessa um elemento que está na página e interage com ele, programaticamente falando. Por exemplo, quando você precisa alterar um texto dentro de um input, você está manipulando o DOM.

Seja com Vanilla JavaScript (Vanilla = uma outra maneira de falar JavaScript puro, sem bibliotecas e frameworks) ou através de algum framework ou biblioteca, o que você estará fazendo é manipulando essa árvore de objetos e o browser se encarregará de mostrar as alterações para o usuário.

 

Voltando para o JavaScript, conforme a necessidade de organização, planejamento e estruturação foram aparecendo (ou crescendo), em conjunto com a evolução das aplicações, os desenvolvedores (E empresas!) notaram que alguns recursos que ajudam no ciclo de vida de desenvolvimento de uma aplicação faltavam ao JavaScript. Entre eles:

  • Verificação de erros em tempo de compilação – Nos códigos que são compilados, o compilador (utilitário que transforma o código escrito por humanos em código que o computador seja capaz de entender) analisa todo o código escrito e, caso ele não siga algumas regras, erros são apresentados para o desenvolvedor. Com isso, o desenvolvedor consegue resolver alguns erros básicos durante a etapa de desenvolvimento, sem precisar rodar a aplicação para ver o erro.
  • Checagem dos tipos de objetos e intellisense – Outro recurso que ajuda bastante é saber o tipo das variáveis durante o tempo de desenvolvimento. Embora muitos IDEs e editores de código façam um ótimo trabalho nesse sentido, um suporte melhor ajudaria na produtividade.

Pensando nessas dificuldades, a Microsoft criou o TypeScript.

TypeScript é um superset da linguagem JavaScript e, com ele, você ganha o recurso de tipagem estática dos objetos, ou seja, se você tentar atribuir um texto a uma variável numérica você será informado do erro. 🙂

Como os browsers só entendem JavaScript, você precisará de um Transpiler. Para quem não está familiarizado com o termo, Transpiler é um tipo de compilador source-to-source, ou seja, que pega o código-fonte gerado em uma linguagem e gera código-fonte em outra linguagem. Nesse caso específico, pega o código em TypeScript e gera um código em JavaScript.

Não vou me aprofundar nesse tema agora, mas deixo um link da Wikipedia para quem quiser saber mais sobre o assunto: https://en.wikipedia.org/wiki/Source-to-source_compiler

A título de curiosidade, o Anders Hejlsberg Lead-Architect do C# e criador do Turbo-Pascal e Delphi trabalhou no desenvolvimento do TypeScript.

Como se pode imaginar, a sintaxe do TypeScript é bem parecida com o C#, o que ajuda na adaptação de desenvolvedores server-side acostumados com C# a fazer uma transição mais tranquila para o client-side.

Vejam:

Entenda como objetivo principal da Microsoft ao criar o TypeScript a tentativa de facilitar o desenvolvimento de códigos complexos e de larga escala.

No próximo artigo vou abordar como extrair o máximo do Visual Studio Code (se você ainda não conhece, recomendo muito! Sempre que posso utilizo o Visual Studio Code como ferramenta de trabalho. Além de tudo, é gratuito!) no desenvolvimento de código TypeScript. Fiquem ligados!

Recapitulando

Nesse artigo abordei o básico de como o código de uma aplicação web é dividido e os tipos de tecnologias envolvidas. Comentei sobre o JavaScript, como sua interação com elementos de uma página funcionam e como o TypeScript auxilia no desenvolvimento de aplicações robustas e de larga escala.

Abraços!