Principais estruturas e bibliotecas para facilitar o desenvolvimento de aplicativos da Web

Com JavaScript simples, podemos fazer muitas coisas. No entanto, não há uma estrutura definida ou se escrevermos código JavaScript simples, os desenvolvedores precisam de muita disciplina para estruturar seu código corretamente. Isso requer muito esforço e, portanto, desperdiça muito tempo do desenvolvedor impondo a estrutura de cada parte do código.

Manipular o DOM também é muito frágil porque, nos aplicativos da web de hoje, há muitas coisas acontecendo que podem alterar o DOM. Isso significa que os elementos aparecem e desaparecem em quantidade indeterminada de vezes. Isso cria problemas, pois podemos tentar manipular elementos DOM que ainda não existem. Ou vários pedaços de código podem tentar modificar o mesmo elemento ao mesmo tempo.

É muito difícil solucionar esses problemas e fazer seu código funcionar corretamente. Isso significa que você gasta muito tempo com esses pequenos problemas, o que tira o tempo do desenvolvedor que pode ser usado para desenvolver recursos. É aqui que as estruturas entram para salvar o dia.

Frameworks fornecem estrutura que permite que equipes de desenvolvedores desenvolvam aplicativos da web complexos de uma forma estruturada. A maioria dos frameworks impõe suas próprias convenções, de forma que as estruturas podem ser aplicadas se vários desenvolvedores desenvolverem o mesmo aplicativo. A manipulação do DOM é abstraída em estruturas para que os desenvolvedores não precisem se preocupar com isso, a menos que desenvolvam recursos que precisam de manipulação direta do DOM, como animações.

Bibliotecas são pequenos trechos de código que podemos incluir no código de nosso aplicativo para estender a funcionalidade de nossos aplicativos. As bibliotecas facilitam a adição de funcionalidades e algumas também fornecem atalhos que fazem o equivalente ao que está disponível em JavaScript simples, mas melhor. Existem também bibliotecas feitas para estruturas específicas para aprimorar sua funcionalidade.

Vue.js

Vue.js é uma estrutura JavaScript de front end baseada em componentes que permite aos desenvolvedores criar aplicativos da web de alta qualidade que podem ser mantidos de uma maneira fácil. A estrutura permite que os desenvolvedores dividam seu aplicativo em componentes Vue.js, que são partes independentes que, quando colocadas juntas, obtemos um aplicativo da web completo. Os componentes são feitos para serem aninhados uns nos outros. Cada componente possui um modelo para renderizar os dados, uma seção de script para a lógica e uma seção de estilos para os estilos CSS. O componente suporta a vinculação de dados entre as seções do modelo e do script, o que significa que as alterações na seção do modelo são refletidas automaticamente na seção do script e vice-versa. Cada componente tem seu próprio ciclo de vida e tem a função de lidar com esses eventos do ciclo de vida. Os componentes pais podem passar dados para os componentes filhos e os componentes filhos podem emitir eventos para passar componentes para os pais.

Com o Vue.js, a manipulação do DOM é feita em segundo plano, obtendo a diferença entre o DOM do navegador e a árvore virtual do DOM que ele cria e faz as alterações do DOM virtual para o DOM real.

Além disso, há um roteador de URL integrado chamado Vue Router que permite aos desenvolvedores mapear URLs específicos nas páginas de seus aplicativos. Para centralizar o gerenciamento de estado, ele usa a biblioteca de fluxo Vuex, que nos permite usar a arquitetura de fluxo para armazenar o estado do aplicativo de forma centralizada. A arquitetura de fluxo basicamente significa que os dados são configurados em um armazenamento de dados central e, em seguida, os componentes que precisam dos dados sempre obtêm os dados mais recentes do armazenamento, observando os valores do armazenamento.

Novos aplicativos geralmente usam a Vue CLI para criar o projeto e selecionar o que incluir.

Outro recurso com suporte imediato inclui testes, pré-processadores CSS como SCSS e SASS para tornar mais fácil a escrita de CSS complexo e construção de componentes da web ou aplicativos da web progressivos e outros recursos avançados. Ele também pode ser adicionado de forma incremental a aplicativos da web legados usando tags de script. A estrutura Vue.js e as bibliotecas feitas para Vue.js suportam isso. Portanto, é uma ótima opção para atualizar a funcionalidade de aplicativos da web legados.

Há um grande ecossistema de bibliotecas que podemos usar com aplicativos Vue.js, incluindo bibliotecas de componentes, módulos auxiliares de geolocalização e módulos webRTC e muitos outros.

Angular

Assim como o Vue.js, o Angular é um framework baseado em componentes. É feito pelo Google. A maioria das coisas que fazem parte do conjunto de recursos Vue.js também estão em Angular, exceto a parte de gerenciamento de estado. Por padrão, os aplicativos Angular são escritos em TypeScript. A estrutura permite que os desenvolvedores dividam seus aplicativos em componentes Angular, que são partes independentes que, quando reunidas, obtemos um aplicativo Web completo. Os componentes são feitos para serem aninhados uns nos outros. Cada componente tem um arquivo de modelo para renderizar os dados, um arquivo TypeScript para a lógica e um arquivo de estilos para estilização, que pode ser CSS, SASS ou SCSS. Além disso, há um arquivo de teste para adicionar seus testes de unidade para cada componente. O componente oferece suporte à vinculação de dados entre as seções de modelo e script, o que significa que as alterações na seção de modelo são refletidas automaticamente no arquivo TypeScript e vice-versa. Cada componente tem seu próprio ciclo de vida e tem a função de lidar com esses eventos do ciclo de vida. Os componentes pais podem passar dados para os componentes filhos e os componentes filhos podem emitir eventos para passar componentes para os pais.

Muitas partes da biblioteca usam programação reativa, o que significa que partes do aplicativo observam mudanças nos dados e fazem algo quando eles mudam. Isso é feito principalmente com observáveis.

Um recurso exclusivo do Angular é que ele inclui injeção de dependências para que não tenhamos que nos preocupar em resolver as dependências das bibliotecas Angular por conta própria, o que evita muitas dores de cabeça, pois a maioria dos aplicativos da web provavelmente muitas dependências.

Os aplicativos angulares são divididos em módulos, que podemos combinar em um para fazer um aplicativo completo. Cada módulo inclui as bibliotecas que devem ser usadas por esse módulo.

Com o Angular, a manipulação do DOM é feita em segundo plano, obtendo a diferença entre o DOM do navegador e a árvore virtual do DOM que ele cria e faz as alterações do DOM virtual para o DOM real.

Além disso, há um roteador de URL integrado, chamado Angular Router, que permite que os desenvolvedores mapeiem URLs específicos nas páginas de seus aplicativos.

Outro recurso com suporte imediato inclui a construção de componentes da web ou aplicativos da web progressivos e outros recursos avançados. Há um grande ecossistema de bibliotecas que podemos usar com os aplicativos React, incluindo bibliotecas de componentes, módulos auxiliares como armazenamento NgRx para gerenciamento de estado, muitos outros.

Reaja

React é uma biblioteca baseada em componentes que podemos usar para criar aplicativos da web dinâmicos. Ele usa a sintaxe JSX para escrever JavaScript que se parece com HTML, exceto que você pode misturá-lo com JavaScript diretamente. Cada componente tem seu próprio ciclo de vida e tem a função de lidar com esses eventos do ciclo de vida. Ele também fornece aninhamento para componentes e também permite componentes de ordem superior, que são componentes que retornam componentes. Existem 2 tipos de componentes no React. Um são os componentes baseados em classe, que são escritos como uma classe, com um método render no final para renderizar o HTML. O outro são os componentes de função que retornam o JSX diretamente e renderizados em HTML. Originalmente, os componentes da função não podem ter lógica dinâmica, mas agora que o React tem ganchos, os componentes da função também podem ter código lógico.

Com o React, a manipulação do DOM é feita em segundo plano, obtendo a diferença entre o DOM do navegador e a árvore virtual do DOM que ele cria e faz as alterações do DOM virtual para o DOM real.

Ele não inclui nada além de uma biblioteca de visualização para renderizar JavaScript em HTML, então, se quisermos construir um aplicativo de página única, precisamos adicionar outras bibliotecas como React Router e um gerenciamento de estado como Redux. Há um grande ecossistema de bibliotecas que podemos usar com os aplicativos React, incluindo bibliotecas de componentes, módulos auxiliares como React Router e Redux e muitos outros.

Lodash

Lodash é uma biblioteca que contém muitos métodos úteis para manipulação de dados. Os exemplos incluem métodos de array como flatten para compactar um array aninhado em um array comum. Também existe um flattenDeep para nivelar todos os níveis de uma matriz aninhada em uma matriz plana. Outras funções incluem:

Existem muitas outras funções que ainda não estão disponíveis em JavaScript simples, embora algumas como find e findIndex tenham entrado na biblioteca padrão do JavaScript, então Lodash é ainda útil.

Moment.js

Manipular hora e data em JavaScript é doloroso. Mesmo com as funções disponíveis com objetos Date , há muitas chances de bugs e erros. Além disso, não há funções para formatar horas e datas, o que é um grande problema. Para resolver isso, usamos moment.js. Esta é a melhor biblioteca disponível para lidar com o tempo.

Ocorreram problemas com fusos horários com datas AAAA-MM-DD analisadas no horário UTC em oposição ao horário local. O que cria bugs para desenvolvedores que não estão cientes desse problema. Consulte https://stackoverflow.com/questions/29174810/javascript-date-timezone-issue

Também existem diferenças no suporte para partes de datas em diferentes navegadores. (Consulte https://stackoverflow.com/questions/11253351/javascript-date-object-issue-in-safari-and-ie)

Também é difícil adicionar e subtrair carimbos de data / hora com funções de data integradas. Não há como fazer isso sem escrever muito código e fazer muitas verificações. Além disso, não há como comparar 2 vezes.

A formatação de datas também não está disponível sem escrever seu próprio código para usar bibliotecas de terceiros.

O Moment.js resolve todos esses problemas, fornecendo funções integradas para fazer todas essas operações comuns. Ele fornece funções para analisar e formatar datas.

O construtor momento é onde você pode passar uma string de data e um objeto momento será criado. Por exemplo, você pode passar:

e você receberá de volta um momento que pode comparar com outros objetos momento e adicionar ou subtrair por diferentes intervalos de tempo.

Se você não passar nada para o construtor moment , você obterá a data e a hora atuais.

Também requer um segundo argumento. Se quiser ter certeza de que uma data é analisada como uma data AAAA-MM-DD, escreva moment ('2019–08–04', & # x27; AAAA-MM-DD & # x27;) . Se você não sabe o formato da sua data ou hora, pode passar uma série de formatos possíveis e o Moment escolherá o certo:

Depois de criar um objeto Moment, você pode fazer muitas coisas, como formatar datas:

A partir dos exemplos acima, vemos que podemos formatar datas praticamente da maneira que quisermos.

Também podemos saber o período de tempo de uma data em relação a outra escrevendo:

Também podemos adicionar ou subtrair datas de momentos:

É fácil comparar 2 datas

Você também pode verificar se uma data está com o horário de verão em vigor ou não:

E você pode converter de volta para a data JavaScript a qualquer momento, chamando a função toDate () em um objeto Moment.

Como podemos ver. Há muitas coisas que o Moment.js pode fazer e que não podem ser feitas em JavaScript simples, então precisamos muito dessa biblioteca.

De modo geral, desenvolver aplicativos da web em JavaScript front-end parece quase mágico com todas essas bibliotecas e estruturas. Isso torna o desenvolvimento muito mais fácil se você estiver trabalhando sozinho e em equipes. Não há como viver sem todas essas bibliotecas e estruturas modernas. Muitas dessas coisas que os frameworks e bibliotecas fazem não são possíveis com JavaScript simples.