{"id":2698,"date":"2020-06-23T15:10:00","date_gmt":"2020-06-23T18:10:00","guid":{"rendered":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/?p=2698"},"modified":"2025-09-02T14:01:20","modified_gmt":"2025-09-02T17:01:20","slug":"ecossistema-javascript-2020","status":"publish","type":"post","link":"https:\/\/www.ufsm.br\/pet\/sistemas-de-informacao\/2020\/06\/23\/ecossistema-javascript-2020","title":{"rendered":"Ecossistema JavaScript 2020"},"content":{"rendered":"\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Essa semana teremos mais uma reda\u00e7\u00e3o sobre o nosso querido JavaScript! A linguagem tem recebido bastante aten\u00e7\u00e3o e carinho da comunidade nos \u00faltimos anos, por conta disso, o seu ecossistema tem se expandido cada vez mais. Antigamente utiliz\u00e1vamos o JavaScript para manipular elementos na nossa p\u00e1gina, hoje em dia temos\u00a0frameworks<\/em>\u00a0consolidados, tanto no\u00a0back-end<\/em>, quanto no\u00a0front-end<\/em>, escritos nessa linguagem. No PET-Reda\u00e7\u00e3o dessa semana, vamos viajar no mundo do JavaScript e conhecer algumas das ferramentas mais utilizadas no desenvolvimento web.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\nDesde os tempos mais prim\u00f3rdios…<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n

Antes de mais nada, vamos lembrar o que \u00e9 o JavaScript, de onde veio, qual foi o seu prop\u00f3sito, etc.<\/p>\n

O JavaScript foi criado em 1995 por Brendan Eich com o prop\u00f3sito de embutir pequenos programas, ou\u00a0scripts<\/em>, nas p\u00e1ginas\u00a0web<\/em>, aumentando o seu dinamismo. Eich tinha o desafio de projetar uma linguagem que fosse flex\u00edvel, f\u00e1cil de aprender, ter um apelo popular e que fosse f\u00e1cil de implementar. Com esses requisitos em mente, n\u00e3o levou mais de 10 dias para que Brendan finalizasse o primeiro produto da linguagem, e na \u00e9poca a batizou de Mocha, nome que mais tarde seria trocado por JavaScript por quest\u00f5es de\u00a0“marketing”<\/em>, pois na \u00e9poca o Java estava em alta.<\/p>\n

N\u00e3o, JavaScript n\u00e3o tem nada a ver com Java. A n\u00e3o ser o seu nome, que foi fortemente influenciado na sua publica\u00e7\u00e3o.<\/p>\n

O mercado est\u00e1 aquecido quando pensamos em JavaScript, por conta disso, o seu ecossistema tem crescido muito nos \u00faltimos anos. A popularidade da linguagem teve um salto depois da cria\u00e7\u00e3o e populariza\u00e7\u00e3o do Node.js, o\u00a0runtime<\/em>\u00a0da linguagem que nos d\u00e1 possibilidade de executarmos c\u00f3digos JavaScript na nossa m\u00e1quina, via terminal, coisa que n\u00e3o era poss\u00edvel at\u00e9 ent\u00e3o.<\/p>\n

O Node.js \u00e9 um dos grandes marcos do JavaScript at\u00e9 hoje, pois foi a partir dele que come\u00e7amos a desenvolver solu\u00e7\u00f5es e\u00a0frameworks<\/em>\u00a0apenas em JavaScript, construindo um ecossistema da linguagem.<\/p>\n

A defini\u00e7\u00e3o de um ecossistema, literalmente, \u00e9 um conjunto de comunidades que interagem entre si, constituindo um sistema est\u00e1vel, equilibrado e autossuficiente. Essa defini\u00e7\u00e3o comp\u00f5e exatamente o que tem sido a comunidade JavaScript nos \u00faltimos anos. Surgiram in\u00fameros\u00a0frameworks<\/em>, bibliotecas, facilitadores e implementa\u00e7\u00f5es que fizeram com que a linguagem virasse independente na\u00a0web<\/em>. Hoje em dia, podemos implementar uma solu\u00e7\u00e3o inteira, desde o\u00a0back-end<\/em>, banco de dados at\u00e9 o\u00a0front-end<\/em>\u00a0e realizar testes autom\u00e1ticos, apenas com JavaScript.<\/p>\n

\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n–\u00a0Bizarro, n\u00e9?!<\/span><\/div>\n

Esse ecossistema \u00e9 composto de\u00a0frameworks<\/em>\u00a0back-end, front-end,\u00a0<\/em>bancos de dados, gerenciadores de pacotes (package managers<\/em>), ferramentas de testes (testing tools<\/em>), ferramentas de composi\u00e7\u00e3o (build automation tools<\/em>), podemos chamar tamb\u00e9m de gerenciadores de tarefas (task managers\/task runners<\/em>), etc.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\u00a0<\/div>\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\nSeu Ecossistema<\/strong><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\u00a0<\/div>\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\nFront-End<\/span><\/strong><\/div>\n
\u00a0<\/div>\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\nComo os “Players” de 2020, o React e o Vue tomam a lideran\u00e7a, pois ambos t\u00eam recebido um carinho extra da comunidade nos \u00faltimos anos.<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\u00a0<\/div>\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\nReact<\/strong><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n

O\u00a0framework<\/em>\u00a0foi criado por Jordan Walke em 2013, e hoje \u00e9 mantido pelo Facebook, o que j\u00e1 o atribui uma grande credibilidade.<\/p>\n

O React foi o pioneiro na utiliza\u00e7\u00e3o da Virtual DOM, o que faz a linguagem se destacar no cen\u00e1rio. A sua forma de renderiza\u00e7\u00e3o dos componentes \u00e9 definida por mudan\u00e7as nessa \u00e1rvore virtual, seja essa mudan\u00e7a apenas de algum valor na tela ou de propriedades como mostrar ou esconder esse componente, isso \u00e9 o que chamamos de estado.<\/p>\n

A curva de aprendizado do React \u00e9 bem inclinada, fazendo com que o framework<\/em> n\u00e3o seja t\u00e3o f\u00e1cil para iniciantes em programa\u00e7\u00e3o web<\/em>.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\u00a0<\/div>\n
\u00a0<\/div>\n
\u00a0<\/div>\n
Vue<\/strong><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n

Muito parecido com o React, o Vue ganha destaque na sua simplicidade. O seu n\u00edvel de complexidade \u00e9 menor comparado ao\u00a0framework<\/em>\u00a0anterior, o que faz com que sua curva de aprendizado seja mais suave.<\/p>\n

O Vue tamb\u00e9m se destaque quando falamos em migra\u00e7\u00e3o de sistemas, pois, segundo sua documenta\u00e7\u00e3o, o\u00a0framework<\/em>\u00a0\u00e9 progressivo, ou seja, podemos ter apenas uma parte do nosso sistema rodando em Vue, enquanto outra parte est\u00e1 em c\u00f3digo legado, por exemplo.<\/p>\n

Outro aspecto positivo do Vue \u00e9 a disponibiliza\u00e7\u00e3o de bibliotecas nativas para implementa\u00e7\u00e3o de regras de neg\u00f3cio como o Vue-Router, utilizado para manipular todo o roteamento das p\u00e1ginas da aplica\u00e7\u00e3o, como o Vuex, o gerenciador de estados do Vue.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\u00a0<\/div>\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\nBack-End<\/strong><\/div>\n
\u00a0<\/div>\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\nO Express \u00e9 o queridinho quando falamos em\u00a0<\/span>Back-End<\/em><\/span>, sua popularidade vem da facilidade em construirmos uma aplica\u00e7\u00e3o e a liberdade que temos para implementar a nossa aplica\u00e7\u00e3o. N\u00e3o menos importante, mas menos popular, temos o Adonis, um framework MVC que nos d\u00e1 possibilidade a possibilidade de utilizarmos apenas a estrutura de Models-Controllers para implementarmos o nosso\u00a0<\/span>Back-End<\/em><\/span>.<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\" Express<\/strong><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n

Express foi desenvolvido com o objetivo de facilitar a constru\u00e7\u00e3o de APIs e aplica\u00e7\u00f5es\u00a0web.<\/em>\u00a0Por conta da sua popularidade, hoje em dia \u00e9 conhecido como o\u00a0framework<\/em>\u00a0padr\u00e3o quando queremos criar um servidor HTTP em Node.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

O facilitador do Express se d\u00e1 pela “tradu\u00e7\u00e3o” dos m\u00e9todos de cria\u00e7\u00e3o de um servidor HTTP em Node para uma sintaxe mais compreensiva e amig\u00e1vel ao desenvolvedor, por exemplo, ao inv\u00e9s de utilizarmos:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Simplesmente utilizamos o express, dessa forma:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Roteamento declarativo tamb\u00e9m \u00e9 um dos pontos positivos do Express, fazendo com que seja expl\u00edcito que tipo de servi\u00e7o temos na nossa rota e como podemos acessar, com qual verbo HTTP ela ser\u00e1 requisitada.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\u00a0<\/div>\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\nAdonis<\/strong><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"\n

Por outro lado, temos o Adonis, um\u00a0framework<\/em>\u00a0mais robusto, com uma estrutura baseada no Laravel,\u00a0framework<\/em>\u00a0MVC em PHP. Sua sintaxe \u00e9 bem semelhante, com pequenas diferen\u00e7as do Laravel.<\/p>\n

O Adonis disp\u00f5e de uma CLI,\u00a0Command Line Interface<\/em>, muito \u00fatil quando estamos no desenvolvimento da nossa aplica\u00e7\u00e3o nos fornecendo funcionalidades pr\u00e9-implementadas como um Model, com seus respectivos Controllers e suas respectivas Migrations.<\/p>\n

Para quem nunca utilizou um\u00a0framework<\/em>\u00a0MVC antes, pode ser um pouco mais complicado entender todo o funcionamento do Adonis. A sua documenta\u00e7\u00e3o \u00e9 bem completa, com in\u00fameros tipos de exemplos, facilitando assim o seu aprendizado.<\/p>\n

Um aspecto negativo do Adonis \u00e9 a sua comunidade n\u00e3o ser t\u00e3o expressiva como a do Express, pois \u00e9 um\u00a0framework<\/em> novo que vem ganhando o carinho do pessoal.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\u00a0<\/div>\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\nBanco de Dados<\/strong><\/div>\n
\u00a0<\/div>\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\nO JavaScript tamb\u00e9m est\u00e1 presente, como coadjuvante, em implementa\u00e7\u00f5es de ferramentas que auxiliam na administra\u00e7\u00e3o de bancos de dados como o phpMyAdmin, mas tamb\u00e9m \u00e9 o ator principal em solu\u00e7\u00f5es como o MongoDB.<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\u00a0<\/div>\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\nMongoDB<\/strong><\/div>\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n

O NoSQL ganhou relev\u00e2ncia no mundo por conta do seu desempenho quando falamos em escalabilidade. A representa\u00e7\u00e3o do NoSQL em JavaScript vem com o MongoDB. O crescimento da sua popularidade vem do seu f\u00e1cil aprendizado, desempenho, sintaxe expressiva das queries, onde se torna muito f\u00e1cil identificar o que est\u00e1 vindo em uma consulta, escalabilidade e consist\u00eancia, pois a redund\u00e2ncia em bandos NoSQL \u00e9 aceit\u00e1vel.<\/p>\n

Por outro lado, temos pontos negativos como a aus\u00eancia de triggers, um recurso muito \u00fatil em bancos de dados relacionais. Al\u00e9m dele, tamb\u00e9m h\u00e1 o armazenamento, por conta da redund\u00e2ncia o MongoDB guarda muita informa\u00e7\u00e3o duplicada, gerando mais dados a serem armazenados e complexidade na elabora\u00e7\u00e3o de consultas, o que acaba sendo quase que um impeditivo na maioria das aplica\u00e7\u00f5es.<\/p>\n

Al\u00e9m de tudo, o MongoDB \u00e9 um \u00f3timo banco de dados quando utilizado nos seus melhores cen\u00e1rios, muito das limita\u00e7\u00f5es v\u00eam do conceito de NoSQL, e n\u00e3o da ferramenta.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\u00a0<\/div>\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\nGerenciadores de Pacotes<\/strong><\/div>\n
\u00a0<\/div>\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\nJuntamente de frameworks e bibliotecas, gerenciadores de pacotes fazem um papel crucial no desenvolvimento. Eles fazem com que horas e horas de desenvolvimento sejam substitu\u00eddas por apenas algumas palavras combinadas, como por exemplo:<\/div>\n
\u00a0<\/div>\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\nnpm install express<\/code><\/div>\n
\u00a0<\/div>\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\nUtilizando o exemplo do express com o npm, se queremos utilizar o framework na nossa aplica\u00e7\u00e3o, basta digitarmos isso na nossa linha de comando e o npm ir\u00e1 fazer todo o trabalho de buscar esse pacote na sua biblioteca de pacotes.<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\u00a0<\/div>\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\nnpm<\/strong><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n

\"\"<\/p>\n

O\u00a0npm<\/strong>\u00a0\u00e9 o gerenciador de pacotes nativo do Node e \u00e9 utilizado pela sua CLI a fim de gerenciar os pacotes presentes na nossa aplica\u00e7\u00e3o. Por conta de ser nativo, instalando o Node, todos nosso projetos em Node ser\u00e3o gerenciados pelo npm.<\/p>\n

Temos uma reda\u00e7\u00e3o explicando mais detalhadamente o que \u00e9 o npm. Basta clicar\u00a0aqui<\/a><\/span>.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\u00a0<\/div>\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\nYarn<\/strong><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n

Idealizado pelo Facebook, o Yarn \u00e9 mais inteligente e r\u00e1pido, e, sendo compat\u00edvel com projetos que j\u00e1 utilizam o npm, na maioria das vezes podemos utiliz\u00e1-lo sem problema. Existem alguns raros bugs que podem incomodar quando usamos o Yarn, mas como falei, s\u00e3o raros, bem raros.<\/p>\n

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

A sua simplicidade nos comandos \u00e9 o que mais chama a aten\u00e7\u00e3o dos desenvolvedores. Fazendo um paralelo com o npm, o comando para instalarmos um pacote fica mais ou menos assim:<\/p>\n

yarn add express<\/code><\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\nModule Bundlers<\/strong><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\u00a0<\/div>\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\nWebpack<\/strong><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n

\"\"<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
\n

Quando falamos em Module Bundlers em 2020 temos o Webpack, ele \u00e9 respons\u00e1vel de transformar o nosso c\u00f3digo JavaScript em uma constru\u00e7\u00e3o da nossa aplica\u00e7\u00e3o com todas as depend\u00eancias sem que precisemos referenci\u00e1-las no nosso HTML, por exemplo.<\/p>\n

O funcionamento do Webpack passa por um objeto de configura\u00e7\u00e3o onde s\u00e3o definidos os par\u00e2metros para fazer a constru\u00e7\u00e3o da aplica\u00e7\u00e3o verificando as depend\u00eancias desses arquivos. Essa constru\u00e7\u00e3o \u00e9 exportada em um local tamb\u00e9m definido neste objeto de configura\u00e7\u00e3o. O arquivo de configura\u00e7\u00e3o \u00e9 bem parecido com o demonstrado abaixo:<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

Podemos ver que temos uma entrada (entry) e uma sa\u00edda (output), nesse endere\u00e7o de sa\u00edda que vai estar o nosso arquivo que ser\u00e1 servido da nossa aplica\u00e7\u00e3o.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\u00a0<\/div>\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\nFerramentas para Testes<\/strong><\/div>\n
\u00a0<\/div>\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\nMuito se fala em automatiza\u00e7\u00e3o de testes, ou o sujeito desenvolvedor “tester” (test developer), com o intuito de testarmos a nossa aplica\u00e7\u00e3o de forma automatizada e exaustiva para garantir que n\u00e3o lancemos um erro na produ\u00e7\u00e3o, comprometendo a nossa aplica\u00e7\u00e3o. Para isso existem ferramentas como o Jest para realizar testes automatizados em JavaScript.<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\u00a0<\/div>\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\nJest<\/strong><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
O Jest \u00e9 um framework para realizar testes em aplica\u00e7\u00f5es JavaScript com foco na simplicidade, suportando projetos Node, React, Angular e Vue, ou seja, o cara \u00e9 pau pra toda obra! hehe<\/span><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\n

O framework \u00e9 feito de forma a montar uma sintaxe intelig\u00edvel at\u00e9 para quem n\u00e3o \u00e9 do meio da programa\u00e7\u00e3o, pois seus m\u00e9todos s\u00e3o nomeados de forma que formem uma frase, por exemplo:<\/p>\n

\"\"<\/p>\n

\u00a0<\/p>\n

\u00a0<\/p>\n

\u00a0<\/p>\n

\u00a0<\/p>\n

O m\u00e9todo it<\/strong>, tamb\u00e9m pode ser importado como test<\/strong>, executa um teste, nesse caso o teste \u00e9 que a soma precise resultar 4. Apesar de ser um exemplo l\u00fadico, podemos ver a sua caracter\u00edstica de que at\u00e9 uma pessoa que n\u00e3o sabe nada de programa\u00e7\u00e3o consegue entender o que estamos testando.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\u00a0<\/div>\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\nLinguagens que compilam JavaScript<\/strong><\/div>\n
\u00a0<\/div>\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\nPor mais que o JavaScript seja uma linguagem f\u00e1cil de se aprender, ela sempre teve um grande problema, a sua tipagem din\u00e2mica fraca. \u00c9 f\u00e1cil termos um problema de tipos no JavaScript, por exemplo, onde est\u00e1vamos esperando que fosse um array e vamos tentar percorr\u00ea-lo, ao inv\u00e9s disso, o programa lan\u00e7a um erro e para de funcionar.<\/div>\n
\u00a0<\/div>\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\nPor conta disso, surgem linguagens que compilam o seu c\u00f3digo para JavaScript, implementando a tipagem e a seguran\u00e7a das vari\u00e1veis entre si.<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n
\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\u00a0<\/div>\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\nTypeScript<\/strong><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n

\"\"<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n

\n
\n
\n

Desenvolvido pela Microsoft, o TypeScript ganhou bastante popularidade por ter a sua sintaxe muito semelhante ao da sua linguagem m\u00e3e. \u00c9 f\u00e1cil de aprend\u00ea-la e, se o desenvolvedor j\u00e1 est\u00e1 acostumado com JavaScript, a migra\u00e7\u00e3o acontece naturalmente.<\/p>\n

Utilizando o TypeScript temos certeza de que o nosso m\u00e9todo recebe par\u00e2metros de tipos A, e apenas A. N\u00e3o temos mais o problema de tentar acessar um elemento de um poss\u00edvel array que na verdade \u00e9 um boolean. O seguinte exemplo nos mostra exatamente esse comportamento do TypeScript:<\/p>\n

\u00a0<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\"\"<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n
\n
\n
\n
\n

Podemos ver que o meu linter j\u00e1 est\u00e1 acusando o erro na chamada da fun\u00e7\u00e3o. Isso acontece porque se tentarmos executar esse c\u00f3digo, n\u00e3o vamos ter \u00eaxito por conta da tipagem e prote\u00e7\u00e3o que o TypeScript implementa. Estamos passando um array onde est\u00e1 expl\u00edcito que o argumento da fun\u00e7\u00e3o greeter() \u00e9 do tipo string.<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/section>\n

\n
\u00a0<\/div>\n
\n
\n
\n
\n
\n
\n
\n
\n
\n
\u00a0<\/div>\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\nMen\u00e7\u00f5es Honrosas<\/strong><\/div>\n
\u00a0<\/div>\n
\n
\n
\n
\u00a0<\/div>\n<\/div>\n<\/div>\nVou listar abaixo frameworks e bibliotecas n\u00e3o citados na reda\u00e7\u00e3o por conta da queda na sua popularidade e uso em aplica\u00e7\u00f5es ultimamente ou por ainda n\u00e3o estarem prontas para uso, ou ainda, por n\u00e3o se encaixarem em um dos contextos listados.<\/div>\n