TDC 2018 - Trilha de Javascript. Qual a melhor alternativa? Creio que essa é uma indagação que ronda a cabeça de todo desenvolvedor Front-End quando se depara com uma migração de AngularJS. Performance? Produtividade? Custos? Como devemos ver essa escolha de um ponto de vista muito mais amplo e objetivo. Com base no case de migração que temos na SocialBase vou apresentar os pontos que mais pesam nessa decisão, e porque optamos por uma dessas tecnologias para migração de um projeto em AngularJS.

2. Angular, VueJs ou React?
Uma migração estratégica.
Getúlio Strapazzon
Front-end Developer
getúlio.strapazzon@socialbase.com.br

4. OBJETIVO

5. Um pouco de história
2009
AngularJS
Criado por Misko Hevery e
Adam Abrons

6. 2014
VueJS
Criado por Evan You
2011
React
Criado por Jordam Walke

7. 2016
Angular 2
Lançada em 14 de setembro
2018
Angular 6
Dia 21 março de 2018
6

8. TypeScript
O TypeScript é um "superset" do javascript, criado
pela Microsoft!

9. Porque TypeScript?
https://octoverse.github.com/
Tipos de dados mais definidos
Tornando o javascript uma
linguagem tipada.
IDE - VSCode
O VSCode é o projeto
OpenSource no github com
mais colaboradores. Dúvida?
Fortemente orientados à
Objetos
É fortemente influenciado pelo
C# e F#.
JS "Tradicional" com
TypeScript
Nada o impede de usar o JS
tradicional com o TS.

10. JSX / HTML
Por décadas, os desenvolvedores estavam tentando separar os modelos
de interface do usuário e a lógica JavaScript inline.
Com o JSX, eles são mesclados novamente.

11. HTML

12. JSX

13. Team Skills
Qual a curva de aprendizado para a equipe
atual ?
Testes de integração e unitários ?
Conhecimento em Typescript ?
Novas contratações ?

14. Benchmark
Qual é a referência?
● Esse benchmark mede a duração de operações simples em
uma tabela com 1.000 ou 10.000 linhas, dependendo da
operação.
● A medição é extraída da linha do tempo do chrome por
meio da automação do navegador e inclui o tempo de
processamento.

15. BENCHMARK
Este é um benchmark simples para
vários frameworks javascript.
Criam uma tabela grande com
entradas aleatórias e medem o tempo
da renderização.
https://github.com/krausest/js-framework-benchmark/

16. VíDEO BENCHMARK

17. BENCHMARK

18. Framework vs Library
Angular 5
Angular é uma Framework, por que vem com uma forte opinião
de como a aplicação deve ser estruturada também tem mais
recursos para lhe proporcionar um começo tranquilo.
Por outro lado, vem com um confuso conjunto de ferramentas de
construção que são muito úteis.
Muitos arquivos que são gerados pelo CLI o desenvolvedor leva
tempo para entendê los.

19. Framework vs Library
React & Vue
Por outro lado, são extremamente flexíveis e suas bibliotecas
podem ser combinadas com várias outras facilmente.
Com grande flexibilidade vem grandes responsabilidades, não há
regras limitações ou orientações.
Todo projeto requer decisões sobre arquitetura, bibliotecas
externas ..., e as coisas podem dar errado mais facilmente.

20. Comparativo
Qual é a referência?
Implementação de projeto básico em cada framework e
analisamos o tempo e dificuldades encontrados.
Projeto
● Ambiente de dev
● Documentação baseado em código
● Testes automatizados

21. Angular5 VueJS REact+Redux
Curva de Aprendizado Médio > Alto Bom (Baixa) Médio
Preparação do ambiente (DEV) Bom Médio > Alto Médio
Comunicação Client/Serve (Rest Full) Bom Médio Médio
Simplicidade de codificação Médio Bom Médio
Construção de Templates Bom Bom Médio (JSX)
Gerador de Formulários Bom Bom
Ruim
(Redux-Forms)
Carregamento Alto (500KB) Bom (20k) Médio (200k)
Documentação Bom Bom Bom

22. Angular 5
01 02 03
Start
Possui um CLI que facilita muito o
start do projeto e na padronização
de módulos e componentes.
Forms
Gerador de formulários muito
completo.
Ambiente Dev
Ambiente de desenvolvimento
baseado no WebPack,
configuração automatizada
(CLI).
04 05 06
Testes
Ferramentas de testes: jasmine,
ATU, Karma e Protractor.
Documentação
Ferramenta terceira, Compodoc
gera uma documentação super
completa.
Documentação Oficial
Documentação oficial super
completa.

27. VueJS
01 02 03
Start
O start é extremamente
simplesmente adicionando a
biblioteca javascript ao código fonte
Forms
Não tem um recurso específico
para isso, é extremamente
simples criar formulários com
HTML e Vue.
Ambiente Dev
Extremamente simples e
flexível, ficando a cargo do dev
quais ferramentas usar.
04 05 06
Testes
Ferramentas de testes: Karma
com Jasmine.
Documentação
Pode ser usado o JSDoc.
Documentação Oficial
Documentação oficial super
completa.

28. React
01 02 03
Start
O start é extremamente
simplesmente adicionando a
biblioteca javascript ao código fonte
Forms
Não tem um recurso específico
para isso, é extremamente
simples criar formulários com
HTML e Vue.
Ambiente Dev
Extremamente simples e
flexível, ficando a cargo do dev
quais ferramentas usar.
04 05 06
Testes
Ferramentas de testes: Jest,
NIGHTMARE
Documentação
Pode ser usado o JSDoc.
Documentação Oficial
Documentação oficial super
completa.

29. Consideração final
Optamos pelo Angular 6
1. Tempo / Performance
2. Não depender de bibliotecas externas
3. Ferramentas de testes
4. Documentação baseada em código
5. Padronização do código
6. Fornecer uma estrutura de projeto sólida
7. Conhecimento da equipe em Angular
8. Start extremamente rápido para novos
projetos

30. Getúlio Strapazzon
frontend engineer
https://www.facebook.com/gstrapazzon
https://www.linkedin.com/in/strapazzon/
https://github.com/Strapazzon