O documento discute a convivência entre AngularJs e React, abordando: 1) Razões para migrar de AngularJs para React como foco em performance e facilidade de desenvolvimento; 2) Estratégias de migração como refatoração completa ou sob demanda; 3) Integração entre frameworks passando dados entre componentes React renderizados no AngularJs.

1. Convivendo em paz com AngularJs e React

2. Eu ajudo empresas a construírem soluções de
sucesso para que surpreendam seus clientes!
● Residente em Blumenau/SC
● Formando em Sistemas de Informação pela
FURB
● Desenvolvedor desde 2006
● Front-end na Seekr
● Back-end quando necessário
Sobre o
Palestrante

4. Monitorar
Escala para identificar assuntos relevantes
Atender
Reduz custo e otimiza tempo de resposta
Relacionar
para obter mais clientes felizes!
Motores
de Busca
Social
Media
Imprensa
On-line
Chat Robot
Engajamento PublicaçãoCRM
WorkFlow
E-mail
Ticke
t
Social
Tomada de decição
todo o resultado
da Jornada
Social
Relatórios por canal de
atendimento e monitoramento
Relatórios de
SAC 2.0
Central de
Comandos
Análise de
Personas
Relatórios com
níveis de tags

5. Compreenda como você está nesse exato momento
Acompanhe em conjunto com gerentes, diretores e parceiros as
métricas mais relevantes durante todos os processos.
Dezenas de indicadores
para compor ilimitados
painéis da sua estratégia
Acompanhe em tempo
real o termômetro do
sentimento do seu
público

6. ● Alguns conceitos
● AngularJs
● Razões para sairmos da zona de conforto
● Empecilhos no AngularJs
● Dificuldades em debugar
● Performance
● AngularJs e React trabalhando juntos
● Passando dados entre AngularJs e React
Agenda

7. Framework
vs
Biblioteca

8. Framework
vs
Biblioteca

9. Estatísticas
em AngularJs

10. ● Performance
● Dificuldade em debugar
● Herança de escopo
Existe uma regra fundamental no desenvolvimento:
“Explícito é sempre melhor que implícito”
Porque
estamos
mudando

11. Eventos implícitos?
two
way
data
binding

12. Princípio
de
Eventos
Usuário
Evento
Ação

13. Two
Way
Data
Binding

16. Caso…
● user for undefined ?
● breakpoint em { { phone } } ?
Todo erro é capturado pelo AngularJs
Debugging
<div ng-repeat=”phone in user.phones”> {{ phone }} </div>

17. Debugging

18. Herança
de
Escopo

19. Herança
de
Escopo

21. Porque
React?
Fácil de desenvolver: é próximo do vanilla
Javascript
Excelente para componentes atômicos (ao contrário
do AngularJs)
Fácil de entender: React é uma biblioteca e tem
uma API enxuta.
Foi pensada com foco em performance: conceito de
virtual DOM.
Mercado (bom para o currículo e fácil de achar mão
de obra)

22. Porque
React?

23. Estratégias de Migração

24. Estratégias
de
Migração
● Refatoração completa
● Migração suave, sob demanda.

25. Como
estamos
organizando
componentes

26. Como
levamos
para
aplicação
principal

27. Como
levamos
para
aplicação
principal

28. Como
levamos
para
aplicação
principal

29. Como
renderizamos no
AngularJs

30. Como
renderizamos no
AngularJs

31. Obrigado!
facebook.com/bcechet
linkedin.com/in/brunocechet
github.com/brunocechet
bruno@seekr.com.br
www.seekr.com.br