Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )
1 gostou219 visualizações
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.
Anúncio
Mais conteúdo relacionado
Mais procurados (20)
Semelhante a Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 ) (20)
![[JS EXPERIENCE 2018] Do jQuery aos microfrontends: os desafios de manter uma ...](https://cdn.slidesharecdn.com/ss_thumbnails/15h50-16h20-luizfernandorodrigues-180706155219-thumbnail.jpg?width=560&fit=bounds)
Anúncio
Último (10)
Anúncio
Angular5, vue js ou react redux (Trilha de Javascript - TDC 2018 )
- 2. Angular, VueJs ou React? Uma migração estratégica. Getúlio Strapazzon Front-end Developer getú[email protected]
- 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