Provavelmente, os desenvolvedores de front-end estão familiarizados com algo semelhante: você insere no mecanismo de pesquisa “as melhores estruturas JavaScript” e obtém uma montanha inteira de resultados em resposta, dos quais é muito difícil escolher exatamente o que você precisa.
O que é melhor para o desenvolvimento de partes do cliente de projetos da web? A autora do material, a primeira parte da tradução que publicamos hoje, diz que ela, como pessoa que trabalha em programação em tempo integral, sabe que os provedores de front-end estão procurando por algo que lhes permita acelerar o trabalho e facilitar a criação de interfaces.
A compilação dessa classificação de estruturas e bibliotecas foi baseada em uma pesquisa com mais de 450 desenvolvedores da
ValueCoders . Cinco das ferramentas mais interessantes chegaram aqui.
Os desenvolvedores da ValueCoders escolhem reagir
Quando descobri que meus colegas estavam votando no React, não fiquei surpreso. A maioria dos participantes da pesquisa considerou o React uma das melhores bibliotecas JavaScript. Nossos desenvolvedores usaram o React em muitos projetos. Isso tornou possível ver claramente os pontos fortes desta ferramenta. Quem usa o React obtém uma combinação dos seguintes recursos:
- Componentes reutilizáveis.
- Sincronização do estado e da interface do aplicativo.
- Sistemas de roteamento e padronização.
Nossos desenvolvedores dependem muito dos recursos do React na criação de lógica de projeto de front-end. A ferramenta é muito poderosa, mas, ao mesmo tempo, o que me surpreendeu, é surpreendentemente fácil de usar.
Visão geral da nossa aplicação
Nossa aplicação é organizada de maneira bastante simples. Este é um programa para professores de música que os ajuda a gerenciar atividades escolares on-line. Este projeto ajuda os professores a fazer seus negócios básicos, facilitando a solução de problemas organizacionais.
A principal dificuldade na criação deste projeto foi o desenvolvimento de um painel de controle projetado para professores. Permite que eles gerenciem as atividades dos alunos e acompanhem suas realizações. Resolvemos esse problema usando o ecossistema da biblioteca
Redux como base do aplicativo. Nomeadamente, criamos uma seção do aplicativo destinada aos professores, usando a qual eles poderiam receber informações sobre as realizações dos alunos, demonstrar novas lições de música para eles, comunicar-se com eles, comparar seu jogo com qualquer coisa, deixar feedback.
Informações sobre o aluno e suas atividadesNa verdade, ganhei experiência com o React durante a criação deste aplicativo. Isso significa que o React é um líder reconhecido em ferramentas front-end? Não, não é. Muitos, por exemplo, podem notar especialmente o Vue, chamando essa estrutura de uma das melhores e lembrando o rico conjunto de ferramentas auxiliares padrão disponíveis nela.
Em geral, são os desenvolvedores de front-end que decidem qual estrutura é adequada para resolver um problema específico. Ao tomar essas decisões, eles são confrontados com a necessidade de responder a muitas perguntas difíceis. Ao mesmo tempo, dado que os desenvolvedores geralmente não têm quase tempo para escolher uma ferramenta, geralmente param no que sabem. Ao mesmo tempo, eles perdem as vantagens potenciais das tecnologias concorrentes. Por exemplo - podemos falar sobre o fato de que a estrutura familiar para o desenvolvedor, se você a comparar com outra coisa, pode não ser a mais rápida.
E para desenvolvedores iniciantes, é difícil até fazer uma escolha, limitando as opções às três estruturas principais - Angular, React e Vue. Para facilitar essa escolha, selecionamos as 5 estruturas e bibliotecas front-end mais interessantes que devem ser prestadas atenção àqueles que farão o desenvolvimento da web em 2020.
Grandes cinco ferramentas de front-end
Com base na popularidade e prevalência das ferramentas de desenvolvimento front-end, aqui estão as cinco estruturas e bibliotecas JavaScript mais notáveis:
- Reagir
- Vue
- Angular
- Ember
- Backbone.js
Cada uma dessas ferramentas desenvolveu uma comunidade significativa de desenvolvedores. E se você estiver procurando a base para o seu próximo projeto da Web, não perderá apostando em uma dessas ferramentas. Aqui estão informações sobre eles nos últimos seis meses, coletados pelo
npmtrends.com .
Faça o download de volumes para pacotes angulares, de fonte de brasa, reagir, vue e backboneComparação de pacotes angulares, de fonte de brasa, reagir, vue e backboneAgora vamos falar sobre cada um desses projetos. Vamos começar com o React.
1. Reagir
No mundo do JavaScript, o React é definitivamente um líder. Esta biblioteca usa as idéias da
programação reativa , apresenta o desenvolvimento front-end e muitos de seus próprios conceitos.
Para usar o React de maneira flexível no desenvolvimento de projetos da web, você precisa aprender muitas ferramentas adicionais. Aqui, por exemplo, não há uma lista exaustiva dessas ferramentas fornecidas pelas bibliotecas que podem ser usadas em conjunto com o React. Estes são Redux, MobX, Fluxy, Fluxible, RefluxJS. No desenvolvimento do React, você também pode usar o jQuery AJAX, Superagent, Axios e a API de busca.
Mode modo competitivo
Aqui está um tweet de 24 de outubro deste ano, que relata a introdução da capacidade experimental do React de suportar o modo competitivo (Modo simultâneo). Os desenvolvedores de reagentes estão melhorando constantemente esse modo.
Aqui você pode encontrar links para apresentações do React Conf 2019 no modo competitivo e outras inovações do React, como renderizar componentes preguiçosos (criados com o
React.lazy ) dentro
React.Suspense componentes do
React.Suspense . Ambas as tecnologias tornam os aplicativos React mais responsivos renderizando sem bloquear o encadeamento principal. Isso permitirá que o React não atrase o processamento de tarefas de alta prioridade, como modelar a resposta do aplicativo às interações do usuário.
UsSuspense e outras tecnologias
React.Suspense tecnologia
React.Suspense aprimora o processamento do carregamento de dados assíncrono nos aplicativos React. Se descrevermos essa tecnologia em poucas palavras, podemos dizer que ela permite que você organize o componente esperando que certas condições sejam atendidas e, ao mesmo tempo, não atrapalhe a operação de todo o aplicativo.
Outra inovação introduzida no React 16.8 são os ganchos. Os ganchos do React permitem que os desenvolvedores aproveitem os recursos essenciais do React sem precisar usar componentes baseados em classe. Entre esses recursos estão o gerenciamento do estado do componente e o trabalho com métodos de seu ciclo de vida. O React contém vários ganchos internos, mas permite que o programador crie seus próprios ganchos.
Os aplicativos React consistem em componentes que contêm a lógica do aplicativo e a marcação HTML para formar a interface. Para melhorar a interação entre os componentes, o desenvolvedor pode usar o Flux ou uma biblioteca JavaScript semelhante.
A programação de reação usa conceitos como estado e propriedades de um componente. Eles são representados por objetos relevantes. Seu uso permite organizar o armazenamento de dados em um componente e a troca de dados entre componentes. Por exemplo, a transferência de dados da lógica do programa implementada por um componente para a interface do aplicativo ou a transferência de dados dos componentes pai para os componentes filhos.
▍ Reagir elementos do ecossistema
Ao redor da biblioteca React, um ecossistema inteiro surgiu, representado por várias ferramentas e bibliotecas de suporte. Aqui estão alguns dos componentes deste ecossistema:
- A biblioteca React e o próprio roteador React são uma ferramenta para gerenciar rotas no aplicativo.
- O pacote react-dom projetado para funcionar com o DOM.
- Reagir as Ferramentas do desenvolvedor para Firefox e Chrome.
- JSX é uma linguagem de marcação que permite descrever elementos HTML no código JavaScript.
- A ferramenta de linha de comando create-react-app , projetada para criar projetos React de modelo.
- Várias bibliotecas de suporte. Entre eles, por exemplo, podemos mencionar a biblioteca Redux usada para controlar o estado dos aplicativos e a biblioteca Axios usada para trocar dados com as APIs do servidor.
Concluindo a palestra sobre React, podemos dizer que essa biblioteca pode ser a melhor opção para quem planeja criar um projeto web avançado.
2. Angular
Na conferência AngularConnect 2019, a equipe de desenvolvimento Angular fez declarações que permitem que o Angular 9 seja considerado um ponto de virada no desenvolvimento dessa estrutura. Em particular, está planejado tornar o compilador
Angular Ivy uma ferramenta padrão disponível para todas as aplicações. As principais vantagens dessa tecnologia são que sua aplicação permite acelerar o processo de desenvolvimento, reduzir o tamanho das aplicações, aumentar seu desempenho e confiabilidade.
O Modern Angular é uma estrutura modular avançada para desenvolvimento front-end. Anteriormente, para conectar o Angular a uma página, bastava adicionar a tag apropriada ao seu código HTML, agora o desenvolvedor pode importar os módulos Angular de que precisa em seu projeto.
Angular é conhecido por sua flexibilidade. É por isso que as versões do Angular 1.x ainda são relevantes. No entanto, muitos desenvolvedores hoje usam o Angular 2+ devido à arquitetura da estrutura MVC, que mudou significativamente para a arquitetura baseada em componentes.
Quem quiser usar o Angular terá que enfrentar algumas dificuldades ao dominar essa estrutura. Portanto, para criar aplicativos Angular, é quase obrigatório usar o TypeScript. Embora isso complique o trabalho com a Angular, esta situação tem suas vantagens. Em particular, aumenta a confiabilidade dos aplicativos devido ao controle avançado de tipo, o que fornece ao programador ferramentas de desenvolvimento adicionais.
Elementos ecossistêmicos
Aqui estão algumas partes do ecossistema Angular:
- Ferramentas de linha de comando para simplificar a criação de predefinições de aplicativos.
- Um conjunto de módulos que podem ser usados no desenvolvimento de projetos Angular:
@angular/common , @angular/compiler , @angular/core , @angular/forms , @angular/http , @angular/platform-browser , @angular/platform-browser-dynamic , @angular/router e @angular/upgrade . - A biblioteca Zone.js, que permite controlar o contexto de execução do código.
- Linguagens TypeScript e CoffeeScript.
- A troca de dados em aplicativos Angular pode ser organizada usando objetos RxJS e Observable.
- Augury Angular é uma ferramenta para depurar aplicativos Angular.
- Tecnologia Angular Universal para organizar a renderização no servidor de aplicativos Angular.
Angular é uma estrutura JS completa que fornece ao programador da web moderno tudo o necessário para o trabalho produtivo. A Angular deve prestar atenção àqueles que gostariam de ter à sua disposição um extenso conjunto de ferramentas padrão e minimizar o uso de bibliotecas de terceiros.
Continuação,
parte 2Caros leitores! Se lhe oferecessem o nome da melhor estrutura para o desenvolvimento front-end - o que você escolheria?
