34ª Edição a Linguagem Javascript E Seu Ecossistema Jean Carlos
Total Page:16
File Type:pdf, Size:1020Kb
Workshop Para Empreendedores - 34ª Edição A Linguagem JavaScript e seu Ecossistema Jean Carlos Borba Guimarães da Costa, Maria Aparecida Reis Franca dos Santos Universidade de Uberaba [email protected], [email protected] Resumo 1 Introdução O presente artigo visa facilitar o Em 4 de Dezembro de 1995, Brendan entendimento da linguagem JavaScript, Eich lançava a primeira versão do com foco nas bibliotecas e frameworks1 JavaScript, na época chamada de utilizados em desenvolvimento Mocha. Inicialmente concebida como Front-End. parte integrante dos navegadores web, a Durante o seu desenvolvimento, foram linguagem foi projetada para executar abordados assuntos como a concepção scripts no client-side, ou seja, interagir da linguagem, bem como a motivação de diretamente com o usuário, sem passar sua criação. A evolução do JavaScript foi por um servidor. Após mudar de nome explorada, e também a padronização da novamente, desta vez para LiveScript, foi linguagem ao ser submetida ao ECMA, submetida ao European Computer passando ainda pelas principais Manufacturers Association, ou aplicações no desenvolvimento web simplesmente ECMA. Por razões de moderno. Ainda, foram listadas algumas patente, optou-se por nomear das bibliotecas e frameworks JavaScript oficialmente a linguagem como que são - ou foram - amplamente ECMAScript. Apesar disso, o nome utilizados, porém mantendo o foco a dois antigo já havia se popularizado. Dessa principais atuais - Vue.js e Angular. forma, é completamente normal No decorrer deste artigo são encontrar ambos os nomes ao procurar apresentados conceitos aplicados à informações sobre essa tecnologia. essas tecnologias, e paralelos foram Atualmente na versão 9 (ou 2018), o traçados entre as mesmas, visando ECMAScript passou a ter releases2 apresentar o ponto de vista do anuais de uma nova versão. Todavia, desenvolvedor ao utilizar tais grande parte dos navegadores suportam ferramentas. completamente a linguagem apenas até Por fim, foram desenvolvidas duas a versão 5, com exceção dos browsers aplicações idênticas, utilizando-se das modernos. Neste caso, existem diversas ferramentas citadas, como forma de opções para se contornar a situação de exemplificar o conteúdo exposto no falta de compatibilidade, como por artigo. exemplo os polyfills, ou utilizar-se do Babel durante o desenvolvimento. Essas Palavras-chave: 1. Desenvolvimento técnicas e ferramentas transpilam3 o Web. 2. JavaScript. 3. Front-End. 4. frameworks e bibliotecas. 2 Lançamento de uma nova versão, seja versão de desenvolvedor, beta e/ou estável. 3 Em JavaScript, “transpilar” um código significa 1 Conjuntos de ferramentas criadas para facilitar ou reescrevê-lo na sintaxe das versões anteriores da acelerar o desenvolvimento em determinada linguagem linguagem, entendida por navegadores antigos. Workshop Para Empreendedores - 34ª Edição código das versões mais atuais para e fazer uso de conceitos considerados soluções equivalentes às suportadas em cruciais durante o desenvolvimento de navegadores antigos. uma Single-Page Application5. Ao mesmo Apesar de ter sido concebida tempo, surge o Vue.js, com a premissa inicialmente como uma forma de lidar de ser muito flexível, podendo ser com a interação do usuário com o utilizado como biblioteca ou framework, e navegador, o JavaScript foi, solucionar problemas existentes nas provavelmente, a linguagem mais outras ferramentas. Essa propaganda, explorada e modificada para atender a rapidamente, conquistou a comunidade situações específicas. Por exemplo, de desenvolvedores de tal forma que temos o Node.js, um fork4 do motor de uma campanha de crowdfunding foi renderização V8, criado pelo Google e criada e alcançada com sucesso para utilizado até os dias de hoje no que o seu criador, Evan You, se navegador web Google Chrome. Outro dedicasse, exclusivamente, ao exemplo são ferramentas como aprimoramento do framework. CoffeeScript e TypeScript, sendo que a Em paralelo à escrita deste artigo, última se anuncia como “JavaScript que foram elaboradas duas aplicações escala” (TYPESCRIPTLANG, 2019), uma idênticas, uma delas desenvolvida em referência à dificuldade que se tem ao Angular, a outra em Vue.js, para que, ao utilizar JavaScript puro para desenvolver final, fosse feito um estudo de caso, aplicações de grande porte. Além disso, analisando os principais pontos que são a linguagem evoluiu tornando-se objetos de discussão da comunidade de extremamente versátil, sendo possível desenvolvedores, como facilidade de utilizar os três principais paradigmas de escrita de código, manutenibilidade e programação: procedural, orientado a escalabilidade. Tais análises foram feitas objetos e funcional. do ponto de vista do desenvolvedor, Essa evolução possibilitou a criação utilizando-se, primariamente, de diversas de bibliotecas como jQuery, Prototype.js, comparações de código, visando mostrar underscore.js e React, que prometem os pontos positivos e negativos de cada tornar o desenvolvimento de uma tecnologia. aplicação muito mais produtivo e Ao mesmo tempo, uma API6 única, solucionar diversos problemas de desenvolvida em Node.js e Express.js, compatibilidade entre navegadores e comunicando-se com um banco de versões. Ao mesmo tempo, grandes dados não-relacional, neste caso, empresas, como Google e Facebook, MongoDB, cuidará do tratamento e lançaram-se no mercado com os persistência de dados, comunicando-se frameworks Angular e React, com as duas aplicações, de forma respectivamente. Com o respaldo de individual ou simultaneamente. gigantes da tecnologia por trás de seu desenvolvimento, essas ferramentas se 5 As SPAs são aplicações web que não renderizam toda tornaram extremamente populares e a página novamente, mas apenas os módulos amplamente utilizadas, por seguirem os necessários, apresentando comportamento parecido ao padrões de desenvolvimento mais atuais de um aplicativo para smartphones. 6 As Application Programming Interfaces são 4 Réplica de um código existente em um servidor Git definições de conjuntos de rotinas, protocolos e sobre a qual se desenvolve uma nova versão do projeto ferramentas preparadas para atender à criação de uma atual, sem comprometer o projeto original. aplicação. Workshop Para Empreendedores - 34ª Edição 2 Materiais e Métodos anteriormente. O React, apesar de ser As metodologias utilizadas para a bastante famoso no mercado de elaboração deste artigo podem ser desenvolvimento web, será tratado divididas em teóricas, quanto aos apenas teoricamente, por ter uma métodos de pesquisa, fichamento de abordagem bastante diferente dos dois artigos e amplo material disponível em frameworks escolhidos. livros e na Internet, e práticas, quanto ao A persistência de dados foi feita desenvolvimento das aplicações, utilizando o banco de dados não utilizando-se das tecnologias escolhidas. relacional MongoDB, por sua capacidade Para a primeira etapa, propôs-se de guardar as informações em formato aprofundar em conceitos e boas práticas JSON (JavaScript Object Notation, ou das bibliotecas e frameworks JavaScript, Notação de Objeto JavaScript, em trazendo à tona as definições de tradução livre). Esta formatação de modularização, de componentização, de dados retira a necessidade de um injeção de dependência, entre outros, middleware8 para converter a informação presentes tanto no Back-End como no requisitada no banco de dados para um Front-End. Tais conceitos se fazem formato aceito pelo Node.js e, necessários para o desenvolvimento consequentemente, pelo Front-End. proposto no início do artigo. Na segunda etapa, a abordagem 3 Resultados escolhida foi a criação de uma aplicação APIs criadas utilizando Node.js voltada à organização pessoal, com o utilizam-se, primariamente, da vantagem intuito de exemplificar os conceitos de as requisições serem processadas apresentados. pelo Event Loop. A principal diferença Para o Back-End, foi utilizado o deste método para outras linguagens Node.js, uma engine7 JavaScript como Java, C# e PHP, é que, nas baseada no V8, criada pelo Google, e linguagens tradicionais, a cada nova atualmente utilizada no Google Chrome, requisição, uma thread9 é criada. Cada seu navegador. Para auxiliar a criação da nova thread exige recursos API, foi escolhida a biblioteca Express.js, computacionais, como processamento e pela facilidade de sua utilização, além do memória RAM, o que pode se tornar um amplo material disponível. A escolha visa problema, já que este recurso é finito. O facilitar o desenvolvimento e otimizar o Event Loop, por sua vez, trata cada tempo de escrita de código do Back-End, requisição como um evento, que será disponibilizando mais tempo para a processado em fila (“First In, First Out”, criação das aplicações de Front-End, ou “O Primeiro a Entrar é o Primeiro a foco deste artigo. Sair”, em tradução livre). Apesar disso, o Na etapa de Front-end optou-se por modelo de execução do Node.js trata utilizar as tecnologias Vue.js e Angular, requisições concorrentes através de criando duas aplicações, idênticas, entradas e saídas não-bloqueantes, ou possibilitando traçar paralelos sobre a manutenibilidade, escalabilidade e aplicar 8 Trecho de código normalmente utilizado para fazer a na prática os conceitos citados comunicação entre duas pontas muito distintas de um software, como, por exemplo, converter para JSON as 7 Também chamada de Motor de Renderização. Esta é informações de banco de dados