Baixar para ler offline
Carregado porCriciúma Dev
Escalando aplicações no front-end com ReactJS
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.
Escalando aplicações no front-end com ReactJS
- 1. Escalando aplicações nofront-end com ReactJS
- 2. Mateus Martinelli Paegle mateus.paegle@hotmail.com 11anos 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.
- 10. 3 Arquitetura Gerenciamento deestados É 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 eComponentes 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 NPMLOCAL APP1 APP2 - react - react-dom - lodash - moment - jquery - TextInput - NumberInput - Checkbox - RadioGroup - Select - Search - ComentarioList
- 24. 3 Arquitetura Estrutura ● Fácilde 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.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31. shouldComponentUpdate 4 Desempenho Use thisas 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.
- 33. 4 Desempenho shouldComponentUpdate(nextProps) { returnnextProps !== this.props; }
- 34.
- 35. 4 Desempenho shouldComponentUpdate(nextProps) { return!nextProps.equals(this.props); }
- 36.