Ecossistema JavaScript 2020

Essa semana teremos mais uma redação sobre o nosso querido JavaScript! A linguagem tem recebido bastante atenção e carinho da comunidade nos últimos anos, por conta disso, o seu ecossistema tem se expandido cada vez mais. Antigamente utilizávamos o JavaScript para manipular elementos na nossa página, hoje em dia temos frameworks consolidados, tanto no back-end, quanto no front-end, escritos nessa linguagem. No PET-Redação dessa semana, vamos viajar no mundo do JavaScript e conhecer algumas das ferramentas mais utilizadas no desenvolvimento web.

Desde os tempos mais primórdios...

Antes de mais nada, vamos lembrar o que é o JavaScript, de onde veio, qual foi o seu propósito, etc.

O JavaScript foi criado em 1995 por Brendan Eich com o propósito de embutir pequenos programas, ou scripts, nas páginas web, aumentando o seu dinamismo. Eich tinha o desafio de projetar uma linguagem que fosse flexível, fácil de aprender, ter um apelo popular e que fosse fácil de implementar. Com esses requisitos em mente, não levou mais de 10 dias para que Brendan finalizasse o primeiro produto da linguagem, e na época a batizou de Mocha, nome que mais tarde seria trocado por JavaScript por questões de "marketing", pois na época o Java estava em alta.

Não, JavaScript não tem nada a ver com Java. A não ser o seu nome, que foi fortemente influenciado na sua publicação.

O mercado está aquecido quando pensamos em JavaScript, por conta disso, o seu ecossistema tem crescido muito nos últimos anos. A popularidade da linguagem teve um salto depois da criação e popularização do Node.js, o runtime da linguagem que nos dá possibilidade de executarmos códigos JavaScript na nossa máquina, via terminal, coisa que não era possível até então.

O Node.js é um dos grandes marcos do JavaScript até hoje, pois foi a partir dele que começamos a desenvolver soluções e frameworks apenas em JavaScript, construindo um ecossistema da linguagem.

A definição de um ecossistema, literalmente, é um conjunto de comunidades que interagem entre si, constituindo um sistema estável, equilibrado e autossuficiente. Essa definição compõe exatamente o que tem sido a comunidade JavaScript nos últimos anos. Surgiram inúmeros frameworks, bibliotecas, facilitadores e implementações que fizeram com que a linguagem virasse independente na web. Hoje em dia, podemos implementar uma solução inteira, desde o back-end, banco de dados até o front-end e realizar testes automáticos, apenas com JavaScript.

- Bizarro, né?!

Esse ecossistema é composto de frameworks back-end, front-end, bancos de dados, gerenciadores de pacotes (package managers), ferramentas de testes (testing tools), ferramentas de composição (build automation tools), podemos chamar também de gerenciadores de tarefas (task managers/task runners), etc.

Seu Ecossistema

Front-End

Como os "Players" de 2020, o React e o Vue tomam a liderança, pois ambos têm recebido um carinho extra da comunidade nos últimos anos.

React

O framework foi criado por Jordan Walke em 2013, e hoje é mantido pelo Facebook, o que já o atribui uma grande credibilidade.

O React foi o pioneiro na utilização da Virtual DOM, o que faz a linguagem se destacar no cenário. A sua forma de renderização dos componentes é definida por mudanças nessa árvore virtual, seja essa mudança apenas de algum valor na tela ou de propriedades como mostrar ou esconder esse componente, isso é o que chamamos de estado.

A curva de aprendizado do React é bem inclinada, fazendo com que o framework não seja tão fácil para iniciantes em programação web.

Vue

Muito parecido com o React, o Vue ganha destaque na sua simplicidade. O seu nível de complexidade é menor comparado ao framework anterior, o que faz com que sua curva de aprendizado seja mais suave.

O Vue também se destaque quando falamos em migração de sistemas, pois, segundo sua documentação, o framework é progressivo, ou seja, podemos ter apenas uma parte do nosso sistema rodando em Vue, enquanto outra parte está em código legado, por exemplo.

Outro aspecto positivo do Vue é a disponibilização de bibliotecas nativas para implementação de regras de negócio como o Vue-Router, utilizado para manipular todo o roteamento das páginas da aplicação, como o Vuex, o gerenciador de estados do Vue.

Back-End

O Express é o queridinho quando falamos em Back-End, sua popularidade vem da facilidade em construirmos uma aplicação e a liberdade que temos para implementar a nossa aplicação. Não menos importante, mas menos popular, temos o Adonis, um framework MVC que nos dá possibilidade a possibilidade de utilizarmos apenas a estrutura de Models-Controllers para implementarmos o nosso Back-End.

Express

Express foi desenvolvido com o objetivo de facilitar a construção de APIs e aplicações web. Por conta da sua popularidade, hoje em dia é conhecido como o framework padrão quando queremos criar um servidor HTTP em Node.

O facilitador do Express se dá pela "tradução" dos métodos de criação de um servidor HTTP em Node para uma sintaxe mais compreensiva e amigável ao desenvolvedor, por exemplo, ao invés de utilizarmos:

Simplesmente utilizamos o express, dessa forma:

Roteamento declarativo também é um dos pontos positivos do Express, fazendo com que seja explícito que tipo de serviço temos na nossa rota e como podemos acessar, com qual verbo HTTP ela será requisitada.

Adonis

Por outro lado, temos o Adonis, um framework mais robusto, com uma estrutura baseada no Laravel, framework MVC em PHP. Sua sintaxe é bem semelhante, com pequenas diferenças do Laravel.

O Adonis dispõe de uma CLI, Command Line Interface, muito útil quando estamos no desenvolvimento da nossa aplicação nos fornecendo funcionalidades pré-implementadas como um Model, com seus respectivos Controllers e suas respectivas Migrations.

Para quem nunca utilizou um framework MVC antes, pode ser um pouco mais complicado entender todo o funcionamento do Adonis. A sua documentação é bem completa, com inúmeros tipos de exemplos, facilitando assim o seu aprendizado.

Um aspecto negativo do Adonis é a sua comunidade não ser tão expressiva como a do Express, pois é um framework novo que vem ganhando o carinho do pessoal.

Banco de Dados

O JavaScript também está presente, como coadjuvante, em implementações de ferramentas que auxiliam na administração de bancos de dados como o phpMyAdmin, mas também é o ator principal em soluções como o MongoDB.

MongoDB

O NoSQL ganhou relevância no mundo por conta do seu desempenho quando falamos em escalabilidade. A representação do NoSQL em JavaScript vem com o MongoDB. O crescimento da sua popularidade vem do seu fácil aprendizado, desempenho, sintaxe expressiva das queries, onde se torna muito fácil identificar o que está vindo em uma consulta, escalabilidade e consistência, pois a redundância em bandos NoSQL é aceitável.

Por outro lado, temos pontos negativos como a ausência de triggers, um recurso muito útil em bancos de dados relacionais. Além dele, também há o armazenamento, por conta da redundância o MongoDB guarda muita informação duplicada, gerando mais dados a serem armazenados e complexidade na elaboração de consultas, o que acaba sendo quase que um impeditivo na maioria das aplicações.

Além de tudo, o MongoDB é um ótimo banco de dados quando utilizado nos seus melhores cenários, muito das limitações vêm do conceito de NoSQL, e não da ferramenta.

Gerenciadores de Pacotes

Juntamente de frameworks e bibliotecas, gerenciadores de pacotes fazem um papel crucial no desenvolvimento. Eles fazem com que horas e horas de desenvolvimento sejam substituídas por apenas algumas palavras combinadas, como por exemplo:

npm install express

Utilizando o exemplo do express com o npm, se queremos utilizar o framework na nossa aplicação, basta digitarmos isso na nossa linha de comando e o npm irá fazer todo o trabalho de buscar esse pacote na sua biblioteca de pacotes.

npm

O npm é o gerenciador de pacotes nativo do Node e é utilizado pela sua CLI a fim de gerenciar os pacotes presentes na nossa aplicação. Por conta de ser nativo, instalando o Node, todos nosso projetos em Node serão gerenciados pelo npm.

Temos uma redação explicando mais detalhadamente o que é o npm. Basta clicar aqui.

Yarn

Idealizado pelo Facebook, o Yarn é mais inteligente e rápido, e, sendo compatível com projetos que já utilizam o npm, na maioria das vezes podemos utilizá-lo sem problema. Existem alguns raros bugs que podem incomodar quando usamos o Yarn, mas como falei, são raros, bem raros.

O Yarn utiliza do mesmo registro de pacotes npm para lidar com as dependências, ou seja, ainda vamos utilizar o npm em segundo plano, e caso algum dos raros bugs acontecerem, podemos recorrer a ele sem problemas.

A sua simplicidade nos comandos é o que mais chama a atenção dos desenvolvedores. Fazendo um paralelo com o npm, o comando para instalarmos um pacote fica mais ou menos assim:

yarn add express

Module Bundlers

Webpack

Quando falamos em Module Bundlers em 2020 temos o Webpack, ele é responsável de transformar o nosso código JavaScript em uma construção da nossa aplicação com todas as dependências sem que precisemos referenciá-las no nosso HTML, por exemplo.

O funcionamento do Webpack passa por um objeto de configuração onde são definidos os parâmetros para fazer a construção da aplicação verificando as dependências desses arquivos. Essa construção é exportada em um local também definido neste objeto de configuração. O arquivo de configuração é bem parecido com o demonstrado abaixo:

Podemos ver que temos uma entrada (entry) e uma saída (output), nesse endereço de saída que vai estar o nosso arquivo que será servido da nossa aplicação.

Ferramentas para Testes

Muito se fala em automatização de testes, ou o sujeito desenvolvedor "tester" (test developer), com o intuito de testarmos a nossa aplicação de forma automatizada e exaustiva para garantir que não lancemos um erro na produção, comprometendo a nossa aplicação. Para isso existem ferramentas como o Jest para realizar testes automatizados em JavaScript.

Jest

O Jest é um framework para realizar testes em aplicações JavaScript com foco na simplicidade, suportando projetos Node, React, Angular e Vue, ou seja, o cara é pau pra toda obra! hehe

O framework é feito de forma a montar uma sintaxe inteligível até para quem não é do meio da programação, pois seus métodos são nomeados de forma que formem uma frase, por exemplo:

O método it, também pode ser importado como test, executa um teste, nesse caso o teste é que a soma precise resultar 4. Apesar de ser um exemplo lúdico, podemos ver a sua característica de que até uma pessoa que não sabe nada de programação consegue entender o que estamos testando.

Linguagens que compilam JavaScript

Por mais que o JavaScript seja uma linguagem fácil de se aprender, ela sempre teve um grande problema, a sua tipagem dinâmica fraca. É fácil termos um problema de tipos no JavaScript, por exemplo, onde estávamos esperando que fosse um array e vamos tentar percorrê-lo, ao invés disso, o programa lança um erro e para de funcionar.

Por conta disso, surgem linguagens que compilam o seu código para JavaScript, implementando a tipagem e a segurança das variáveis entre si.

TypeScript

Desenvolvido pela Microsoft, o TypeScript ganhou bastante popularidade por ter a sua sintaxe muito semelhante ao da sua linguagem mãe. É fácil de aprendê-la e, se o desenvolvedor já está acostumado com JavaScript, a migração acontece naturalmente.

Utilizando o TypeScript temos certeza de que o nosso método recebe parâmetros de tipos A, e apenas A. Não temos mais o problema de tentar acessar um elemento de um possível array que na verdade é um boolean. O seguinte exemplo nos mostra exatamente esse comportamento do TypeScript:

Podemos ver que o meu linter já está acusando o erro na chamada da função. Isso acontece porque se tentarmos executar esse código, não vamos ter êxito por conta da tipagem e proteção que o TypeScript implementa. Estamos passando um array onde está explícito que o argumento da função greeter() é do tipo string.

Menções Honrosas

Vou listar abaixo frameworks e bibliotecas não citados na redação por conta da queda na sua popularidade e uso em aplicações ultimamente ou por ainda não estarem prontas para uso, ou ainda, por não se encaixarem em um dos contextos listados.

Angular - Apesar de ainda ser bastante utilizado sua popularidade tem caído e o seu uso em aplicações reais tem sido cada vez menor.
Bower - Foi descontinuado por sua equipe de maintainers e hoje se encontra depreciado para utilizar em conjunto com tecnologias mais atuais.
Deno - Ainda é cedo falar de Deno em um cenário de aplicações reais, mas o seu futuro é empolgante. Também temos uma redação falando do Deno, clica aqui pra conferir.
Lodash - Uma biblioteca com inúmeras funções que vêm a ser úteis no desenvolvimento como manipulação de arrays e objetos, comparações, validações de variáveis, etc.

Então, como podemos ver, são inúmeros frameworks, bibliotecas e ferramentas escritas em JavaScript que nos auxiliam hoje no desenvolvimento de aplicações web. E se tu, leitor, gostou dessa redação, temos inúmeras outras nessa mesma página, e cada semana publicamos uma nova sobre tecnologias variadas desse nosso mundão dentro da computação.

Referências

Report abuse