Mateus Paegle (Front-end na Ema Software) 2º Meetup Criciúma Dev

1. Escalando aplicações no front-end com
ReactJS

2. Mateus Martinelli Paegle
mateus.paegle@hotmail.com
11 anos em desenvolvimento de software
6 anos em desenvolvimento web
3 anos no desenvolvimento front-end
1
O que é o
ReactJS?
2
O que é
escalabilidade?
3
Arquitetura
4
Desempenho
front-end Ema Software

3. 1
O que é o ReactJS?

4. 1 O que é o ReactJS?
● Não é um framework, o React só resolve 1 problema, que é
renderizar componentes
● É uma biblioteca desenvolvida pelo Facebook/Instagram
● Funciona como o V do MV*/MVC/MVVC
● VirtualDOM
● CDD - Component Driven Development

5. 1 O que é o ReactJS?

6. 2
O que é escalabilidade?

7. 2 O que é escalabilidade?
"Escalabilidade é uma característica desejável em todo o sistema,
em uma rede ou em um processo, que indica sua capacidade de
manipular uma porção crescente de trabalho de forma uniforme, ou
estar preparado para crescer." - Wikipédia

8. 2 O que é escalabilidade?
O que escalabilidade no front-end?
Escalabilidade no front-end é a habilidade da sua aplicação ter ‘mais’
mais usuários
mais funcionalidade
mais desenvolvedores

9. 3
Arquitetura

10. 3 Arquitetura
Gerenciamento de estados
É a condição de um componente, em um dado momento no tempo.

11. 3 Arquitetura - Gerenciamento de estado

12. 3 Arquitetura - Gerenciamento de estado

13. 3 Arquitetura - Gerenciamento de estado

14. 3 Arquitetura - Gerenciamento de estado
Fluxo unidirecional de dados
(Unidirectional data flow)

15. 3 Arquitetura - Gerenciamento de estado
Store

16. 3 Arquitetura - Gerenciamento de estado
Store

17. 3 Arquitetura - Gerenciamento de estado
Flux Redux/

18. 3 Arquitetura
Containers e Componentes
O container é
responsável pelas ações
O componente é responsável pela
renderização

19. 3 Arquitetura - Containers e Componentes
ComentarioList.js

20. 3 Arquitetura - Containers e Componentes
ComentarioListContainer.js
ComentarioList2ComentarioList2.js

21. 3 Arquitetura
Estrutura
- App1
--- css
----- comentario.css
--- js
----- actions
------- ComentarioActions.js
----- containers
------- ComentarioListContainer.js
----- components
------- ComentarioList.js
----- constants
------- ComentarioConstants.js
----- stores
------- ComentarioStore.js
Tradicionalmente
agrupamos por
funções
- App2
--- css
----- comentario.css
--- js
----- actions
------- ComentarioActions.js
----- containers
------- ComentarioListContainer.js
----- components
------- ComentarioList.js
----- constants
------- ComentarioConstants.js
----- stores
------- ComentarioStore.js

22. 3 Arquitetura
- App1
--- src
----- containers
------- comentario
--------- style.css
--------- actions.js
--------- store.js
--------- constants.js
--------- ComentarioContainer.js
----- components
------- ComentarioList.js
------- ComentarioListStyle.css
Agrupar por
features
- App2
--- src
----- containers
------- comentario
--------- style.css
--------- actions.js
--------- store.js
--------- constants.js
--------- ComentarioContainer.js
----- components
------- ComentarioList.js
------- ComentarioListStyle.css
Estrutura

23. 3 Arquitetura
Estrutura
NPM NPM LOCAL
APP1
APP2
- react
- react-dom
- lodash
- moment
- jquery
- TextInput
- NumberInput
- Checkbox
- RadioGroup
- Select
- Search
- ComentarioList

24. 3 Arquitetura
Estrutura
● Fácil de renomear arquivos e estruturas
● Fácil de mover estruturas de lugar
● Você vai trabalhar em uma única pasta
● Fácil reutilização de componentes
● Criação de componentes isolados

25. 4
Desempenho

26. 4 Desempenho

27. 4 Desempenho

28. 4 Desempenho

29. 4 Desempenho

30. 4 Desempenho

31. shouldComponentUpdate
4 Desempenho
Use this as an opportunity to return false when you're certain that the transition to
the new props and state will not require a component update.

32. 4 Desempenho

33. 4 Desempenho
shouldComponentUpdate(nextProps) {
return nextProps !== this.props;
}

34. 4 Desempenho
Facebook again!

35. 4 Desempenho
shouldComponentUpdate(nextProps) {
return !nextProps.equals(this.props);
}

36. 4 Desempenho