Contente
- 01. Angular
- 02. Reaja
- 03. Vue
- Como a sintaxe das estruturas se compara?
- Popularidade e mercado
- Desenvolvimento de aplicativo móvel
- Outras estruturas a serem observadas em 2020
- Conclusão
Em 2020, seremos abençoados com uma série de estruturas e bibliotecas para nos ajudar com o desenvolvimento da web. Mas nem sempre houve tanta variedade. Em 2005, uma nova linguagem de script chamada Mocha foi criada por um cara chamado Brendan Eich. Meses depois de ser renomeado para LiveScript, o nome foi alterado novamente para JavaScript. Desde então, o JavaScript percorreu um longo caminho.
Em 2010, vimos a introdução do Backbone e do Angular como os primeiros frameworks JavaScript e, em 2016, 92 por cento de todos os sites usavam JavaScript. Neste artigo, daremos uma olhada em três dos principais frameworks JavaScript (Angular, React e Vue) e seu status na próxima década. Quer fazer seu próprio site? Experimente esta lista de construtores de sites.
Para obter alguns recursos brilhantes, verifique nossa lista das principais ferramentas de design da web, nosso resumo de serviços de hospedagem na web e também esta lista de excelentes softwares de teste de usuário.
01. Angular
O AngularJS foi lançado em 2010, mas em 2016 foi totalmente reescrito e lançado como Angular 2. Angular é uma estrutura da web totalmente desenvolvida pelo Google, que é usada pelo Wix, Upwork, The Guardian, HBO e muito mais.
Prós:
- Suporte excepcional para TypeScript
- O MVVM permite que os desenvolvedores separem o trabalho na mesma seção do aplicativo usando o mesmo conjunto de dados
- Excelente documentação
Contras:
- Tem um pouco de curva de aprendizado
- Migrar de uma versão antiga pode ser difícil.
- As atualizações são introduzidas com bastante regularidade, o que significa que os desenvolvedores precisam se adaptar a elas
Qual é o próximo?
No Angular 9, Ivy é o compilador padrão. Ele foi implementado para resolver muitos dos problemas relacionados ao desempenho e ao tamanho do arquivo. Deve tornar os aplicativos menores, mais rápidos e mais simples.
Quando você compara as versões anteriores do Angular ao React e Vue, o
os tamanhos finais dos pacotes eram muito maiores com o uso do Angular. O Ivy também possibilita a hidratação progressiva, algo que a equipe Angular mostrou no I / O 2019. A hidratação progressiva usa o Ivy para carregar progressivamente no servidor e no cliente. Por exemplo, quando um usuário começa a interagir com uma página, o código dos componentes junto com qualquer tempo de execução é buscado peça por peça.
Ivy parece ser o grande foco para o Angular e a esperança é torná-lo disponível para todos os aplicativos. Haverá uma opção de cancelamento na versão 9, até o Angular 10.
02. Reaja
React foi inicialmente lançado em 2013 pelo Facebook e é usado para construir interfaces web interativas. Ele é usado pela Netflix, Dropbox, PayPal e Uber, para citar alguns.
Prós:
- O React usa o DOM virtual, que tem um impacto positivo no desempenho
- JSX é fácil de escrever
- As atualizações não comprometem a estabilidade
Contras:
- Um dos principais contratempos é a necessidade de bibliotecas de terceiros para criar aplicativos mais complexos
- Os desenvolvedores ficam no escuro sobre a melhor maneira de desenvolver
Qual é o próximo?
Na React Conf 2019, a equipe React abordou uma série de coisas em que estava trabalhando. O primeiro é a hidratação seletiva, que é onde o React pausa tudo o que está trabalhando para priorizar os componentes com os quais o usuário está interagindo. Conforme o usuário vai interagir com uma seção específica, essa área será hidratada. A equipe também está trabalhando no Suspense, que é o sistema do React para orquestrar o carregamento de código, dados e imagens. Isso permite que os componentes esperem por algo antes de serem renderizados.
Tanto a hidratação seletiva quanto o suspense são possíveis pelo modo simultâneo, que permite que os aplicativos sejam mais responsivos ao dar ao React a capacidade de inserir grandes blocos de trabalho de prioridade mais baixa para se concentrar em algo de maior prioridade, como responder à entrada do usuário. A equipe também mencionou a acessibilidade como outra área que eles têm olhado, ao se concentrar em dois tópicos específicos - gerenciamento de foco e interfaces de entrada.
03. Vue
O Vue foi desenvolvido em 2014 por Evan You, um ex-funcionário do Google. Ele é usado pela Xiaomi, Alibaba e GitLab. O Vue conseguiu ganhar popularidade e suporte de desenvolvedores em um curto espaço de tempo e sem o apoio de uma marca importante.
Prós:
- Muito leve em tamanho
- Amigável para iniciantes - fácil de aprender
- Ótima comunidade
Contras:
- Não é apoiado por uma grande empresa, como React with Facebook e Angular with Google
- Sem estrutura real
Qual é o próximo?
O Vue estabeleceu como meta ser mais rápido, menor, mais fácil de manter e tornar mais fácil para os desenvolvedores direcionar o nativo (se você estiver tendo problemas para manter, considere um serviço de hospedagem na web). O próximo lançamento (3.0) será no primeiro trimestre de 2020, que inclui uma reescrita de DOM virtual para melhor desempenho junto com suporte TypeScript aprimorado. Há também a adição da API de composição, que fornece aos desenvolvedores uma nova maneira de criar componentes e organizá-los por recurso em vez de operação.
Aqueles que desenvolvem o Vue também estão ocupados trabalhando no Suspense, que suspende a renderização do componente e renderiza um componente substituto até que uma condição seja atendida.
Uma das melhores coisas com as atualizações do Vue é que elas mantêm compatibilidade com versões anteriores. Eles não querem que você quebre seus projetos antigos do Vue. Vimos isso na migração de 1.0 para 2.0, onde 90 por cento da API era a mesma.
Como a sintaxe das estruturas se compara?
Todos os três frameworks passaram por mudanças desde seus lançamentos, mas uma coisa que é fundamental entender é a sintaxe e como ela difere. Vamos dar uma olhada em como a sintaxe se compara quando se trata de associação de evento simples:
Vue: O v-on é usada para anexar ouvintes de eventos que invocam métodos em instâncias do Vue. As diretivas são prefixadas com v- para indicar que eles são atributos especiais fornecidos pelo Vue e aplicam um comportamento reativo especial ao DOM renderizado. Os manipuladores de eventos podem ser fornecidos em linha ou como o nome do método.
template> botão v-on: click = ”clickHandler”> Click me / button> / template> script> padrão de exportação {nome: “HelloWorld”, métodos: {clickHandler: function () {console.log (“Fui clicado! ”); }}}; / script>
Reagir: React coloca marcação e lógica em JS e JSX, uma extensão de sintaxe para JavaScript. Com JSX, a função é passada como manipulador de eventos. O tratamento de eventos com elementos React é muito semelhante ao tratamento de eventos em elementos DOM. Mas existem algumas diferenças sintáticas; por exemplo, os eventos React são nomeados usando camelCase em vez de minúsculas.
function Button () {function clickHandler (e) {console.log (“Fui clicado”); } botão de retorno onClick = {clickHandler}> Clique aqui! / botão>; }
Angular: A sintaxe de associação de eventos consiste em um nome de evento de destino entre parênteses à esquerda de um sinal de igual e uma instrução de modelo entre aspas à direita. Alternativamente, você pode usar o sobre- prefixo, conhecido como forma canônica.
@Component ({seletor: “app-click-me”, template: `button (click) =” onClickMe () ”> Click me! / Button>`}) export class ClickMeComponent {onClickMe () {console.log (“ Você clicou em mim! ”); }}
Popularidade e mercado
Vamos começar observando uma visão geral das três estruturas em relação ao resto da web, examinando as estatísticas da W3Techs. O Angular é usado atualmente por 0,4 por cento de todos os sites, com uma participação de mercado da biblioteca JavaScript de 0,5 por cento. O React é usado por 0,3 por cento de todos os sites e uma participação de mercado de 0,4 por cento da biblioteca JavaScript e o Vue tem 0,3 por cento para ambos. Isso parece bastante uniforme e você esperaria ver os números aumentarem.
Tendências do Google: Nos últimos 12 meses, React é o mais popular em termos de pesquisa, seguido de perto por Angular. Vue.js está bem atrás; no entanto, uma coisa a lembrar é que Vue ainda é jovem em comparação com os outros dois.
Procura de emprego: No momento em que este artigo foi escrito, React e Angular eram muito parecidos em termos de listas de empregos no Fact with Vue, muito atrás. No LinkedIn, no entanto, parece haver mais demanda por desenvolvedores do Vue.
Stack Overflow: Se você olhar os resultados da pesquisa Stack Overflow Developer Survey de 2019, verá que React e Vue.js são os frameworks da web mais queridos e desejados. Angular senta-se na nona posição como mais amado, mas na terceira posição mais desejada.
GitHub: Vue tem o maior número de estrelas com 153k, mas tem o menor número de colaboradores (283). Por outro lado, React tem 140 mil estrelas e 1.341 colaboradores. Angular tem apenas 59,6 mil estrelas, mas tem o maior número de colaboradores entre os três, com 1.579.
Tendências NPM: A imagem acima mostra as estatísticas dos últimos 12 meses, onde você pode ver que o React tem um número maior de downloads por mês em comparação com o Angular e o Vue.
Desenvolvimento de aplicativo móvel
Um dos principais focos dos três grandes é a implantação móvel. O React possui o React Native, que se tornou uma escolha popular para criar aplicativos iOS e Android não apenas para usuários do React, mas também para a comunidade de desenvolvimento de aplicativos em geral. Os desenvolvedores angulares podem usar NativeScript para aplicativos nativos ou Ionic para aplicativos móveis híbridos, enquanto os desenvolvedores Vue podem escolher entre NativeScript ou Vue Native. Devido à popularidade dos aplicativos móveis, essa continua sendo uma área importante de investimento.
Outras estruturas a serem observadas em 2020
Se você quiser tentar algo novo em 2020, verifique esses frameworks JavaScript.
Brasa: Uma estrutura de código aberto para construir aplicativos da web que funciona com base no padrão MVVM. Ele é usado por várias grandes empresas como Microsoft, Netflix e LinkedIn.
Meteoro: Uma plataforma JavaScript full-stack para o desenvolvimento de aplicativos móveis e da web modernos. É fácil de aprender e tem uma comunidade de muito apoio.
Conclusão
Todas as três estruturas estão melhorando continuamente, o que é um sinal encorajador. Cada um tem sua própria perspectiva e solução preferida sobre qual usar, mas isso realmente depende do tamanho do projeto e o que faz você se sentir mais confortável.
O aspecto mais importante é o apoio contínuo de suas comunidades, portanto, se você está planejando iniciar um novo projeto e nunca usou nenhum dos três antes, acredito que está em boas mãos com todos eles. Se você ainda não teve a chance de aprender qualquer uma das três estruturas, então sugiro que comece a aprender como sua resolução de Ano Novo. O futuro girará em torno desses três.
Este conteúdo apareceu originalmente na revista net.
