Escalando aplicações no front-end com ReactJS
0 gostou456 visualizações
O documento discute como escalar aplicações front-end com ReactJS. Ele explica que ReactJS é uma biblioteca para criar componentes e usar Virtual DOM para renderização, e que escalabilidade no front-end significa suportar mais usuários e funcionalidades. Ele também descreve arquiteturas com gerenciamento de estado, fluxo unidirecional de dados e containers/componentes, além de dicas de desempenho como shouldComponentUpdate.
Mais conteúdo relacionado
Mais procurados (20)
Semelhante a Escalando aplicações no front-end com ReactJS (20)
Mais de Criciúma Dev (15)
Último (7)
Escalando aplicações no front-end com ReactJS
- 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
- 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; }
- 35. 4 Desempenho shouldComponentUpdate(nextProps) { return !nextProps.equals(this.props); }
- 36. 4 Desempenho