Em 2018, na empresa onde trabalho, decidimos migrar do angularJS para uma framework JavaScript mais moderno. Aqui vou descrever a tarefa que geramos para essa tomada de decisão e também a discussão que foi gerada na época. Acredito que talvez isso possa ser útil para alguém.
Desde junho de 2017 estamos analisando a possibilidade de migrar do Angular 1.x para outro framework/lib.A motivação para essa troca inclui motivos como:
Google anunciou a última versão do angular 1.x para Junho desse ano; https://blog.angular.io/stable-angularjs-and-long-term-support-7e077635ee9c
Desde 2016 a adesão a concorrentes do angular 1.x tem caído enquanto a adesão a frameworks mais modernos sobe https://risingstars2016.js.org/#framework
Frameworks mais modernos se encaixam melhor em stacks mais modernas e stacks mais modernas oferecem recursos úteis como fácil suporte a ES6 e sistemas de build mais inteligentes;
O recurso de SSR (server side rendering) é facilmente utilizado em VueJS, React e Angular (2+). SSR pode (pode não quer dizer deve rs) resolver dois problemas: SEO para SPA e AMP no front.
Desempenho dos frameworks mais modernos para painting e scripting supera o desempenho do angular 1.x (carece de fontes)
Logo, o propósito dessa issue é:
Definir quais os critérios para escolhermos um novo framework de javascript.Os concorrentes são VueJs, React e Angular.
Exemplo de critérios: Tamanho da comunidade no stackoverflow, quantidade de estrelas no github, facilidade de suporte a SSR, curva de aprendizado, etc.
Cada critério pode ter um peso maior ou menor que os outros.
Critério de pronto dessa issue:
-
Uma planilha onde as linhas são: Angular 1.x, VueJs, React, Angular.E as colunas são os critérios de escolha bem definidos.As células da tabela devem estar preenchidas, ou seja, devemos saber como cada framework responde a cada critério.
-
E a resposta para pergunta: "Por onde podemos começar a migrar para cada framework?"
Único fator limitante para a substituição de framework: a substituição deve ser feita de forma incremental e diluída entre as entregas do time de front.
PS: podemos eventualmente decidir não fazer a migração dependendo do resultado dessa tarefa.
REFERÊNCIAS
Angular 5 vs. React vs. Vue Segundo teste feito no artigo abaixo, Angular 5 levou 931 ms, Vue 1191 ms, e React 1819 ms. A curva de aprendizado citado no mesmo, é da seguinte ordem: Vue, React e Angular 5. Angular vs. React vs. Vue: A 2018 Comparison Vue ganhou por pouco nos testes deste artigo, com Angular 5 logo atrás.
Relato de um amigo que trabalha exclusivamente com React a um ano (começa o relato na linha seguinte e vai até o fim desse comentário):
Prós:
Usando bem, os componentes ficam MUITO bem isolados. Pra construir bibliotecas de componentes de interface ele é fabuloso.
O ferramental em volta do ecossistema do react é muito bom (ferramentas de desenvolvimento, ferramentas de documentação..)
O código escrito em react é mais JavaScript do que "código framework"
A comunidade é bem ativa e tem gente muito boa (recomendo entrar no slack deles: https://react-brasil-slack.herokuapp.com)
Performa muito bem, tem alguns benchmarks sobre isso
A ferramenta de teste oficial do facebook se chama o Jest, e é muito foda!
Contras:
O React é uma biblioteca de manipulação de view. Ou seja, muita coisa que um framework como o angular tem, ele não tem (tipo um recurso pra fazer ajax. aqui a gente tá usando uma outra lib chamada axios). Isso obriga que você acople outras pequenas libs/frameworks no projeto.
Existem muitos termos/paradigmas novos no ecossistema, e isso dá uma desnorteada no começo. Por exemplo, tem gente que implementa o css junto com o javascript (chamam de CSS in JS), seguem a ideia de um componente ser totalmente auto contido.
Compartilhar um mesmo estado (entenda estado como "um dado", uma informação) entre vários componentes não é tão bem resolvido no react (usamos o redux pra isso).
Eu tenho sido bem produtivo com o React. Muita gente critica o fato de escrever html no mesmo arquivo do js, mas isso ai é bem tranquilo de acostumar. Porém, tem algumas coisas que me incomodam no React, principalmente isso de ter que acoplar outras libs/frameworks para completar o que ele não tem. Porque isso te força a ter que aprender muita coisa e acho que pode ser uma barreira de entrada pra entrar no projeto.
Refiz um projeto pessoal que usava angularjs para usar VueJS http://jotateles.com.br/squizze/#/
Meu parecer resumido:
Para esse projeto a versão em VueJS ficou bem mais simples que a versão em angularJS,
Evitou arquivos de módulos angular (1 arquivo de 3 linhas);
Considero as configurações de webpack mais simples que as que havia feito no gulp;
Os módulos do es6 (que não dependem do VueJs) ajudam muito a organizar o código;
Não precisa declarar "use strict"
Dá para usar o VueJS apenas nas lógicas de apresentação e usar es6 puro em outros módulos sem gambiarras;
Os testes eu não fiz ainda (vergonha) mas fiz em outro projeto e eram simplificados;
Fazer um singleton não é nativo como no angularjs, tive que adicionar um plugin pro Vue chamado Vuex;
Para trabalhar com rotas não é nativo (nem no angularjs era) tive que adicionar um plugin chamado VueRouter;
Single File Components são de grande ajuda pois mantém no mesmo arquivo código que deve viver e mudar junto;
Achei fácil de entender a árvore de componentes da aplicação a partir do componente raiz, no caso esse https://github.com/teles/squizze/blob/master/src/main.js
Dá para declarar as rotas de forma fácil e em arquivo separado no entanto temo que esse arquivo fique muito extenso
A separação entre lógica, comportamento e estilo é boa e como estamos acostumados no angularjs
Não precisei aprender muito sobre várias coisas do vuejs (como props e slots que só sei que existem) para fazer esse app;
Dá para criar um single file component só com ou só com <script>