Arquitetura React Projeto Base

Transcript

1. ARQUITETURA REACT PROJETO BASE Jonathan “joohncruz” Cruz Rocha
2. “Arquitetura é a organização fundamental de um sistema, compreendido pelos seus componentes, o relacionamento entre eles e os princípios que direcionam seu projeto e sua evolução.”
3. “A arquitetura de grandes projetos deve contemplar necessidades dos mais diversos públicos.”
4. “Inicie com uma marcação HTML ruim e você estará escrevendo códigos CSS e Javascript ruins para mascarar isso. Inicie com uma grande marcação e você conseguirá escrever códigos CSS e JavaScript mais escaláveis. ”
5. Perspectivas de Qualidade na Arquitetura Usuário • Desempenho • Disponibilidade • Usabilidade • Segurança • Consistência Desenvolvedor • Desempenho • Produtividade • Manutenibilidade • Testabilidade
6. Em que devemos pensar? Style Guide Estrutura de Pastas Testes Unitários Requests Camadas? Documentação Testes de Interface Build
7. Estrutura inicial react-create-app, prático para o desenvolvimento, apenas uma dependência, Webpack, Babel, ESLint, entre outros já configurados. De fácil manutenção… npm install react-scripts@latest https://facebook.github.io/create-react-app/docs/getting-started
8. Estrutura inicial No Lock-In… npm run eject É um caminho sem volta… fez isso uma vez, aquele abraço... https://facebook.github.io/create-react-app/docs/getting-started
9. Estrutura de Pastas react-create-app
10. Estrutura de Pastas - APP
11. Estrutura de Pastas - Common
12. Estrutura de Pastas - Components
13. Estrutura de Pastas - Infrastructure
14. Estrutura de Pastas
15. Camadas • Components • Store (flux) • Services • Repositories
16. Components - Statefull https://github.com/airbnb/javascript/tree/master/react#class-vs-reactcreateclass-vs-stateless
17. Components - Stateless https://github.com/airbnb/javascript/tree/master/react#class-vs-reactcreateclass-vs-stateless
18. Store https://www.freecodecamp.org/news/scaling-your-redux-app-with-ducks-6115955638be/ https://medium.com/@matthew.holman/what-is-redux-ducks-46bcb1ad04b7 https://blog.rocketseat.com.br/estrutura-redux-escalavel-com-ducks/
19. Store
20. Services
21. Service Testes - All
22. Repositories https://facebook.github.io/create-react-app/docs/getting-started
23. Repositories Testes - Methods
25. Style Guide Javascript ES6 React CSS/SCSS/SASS https://github.com/airbnb/javascript https://github.com/airbnb/javascript/tree/master/react http://getbem.com/naming/
26. Javascript ES6 https://github.com/airbnb/javascript
27. REACT https://github.com/airbnb/javascript/tree/master/react
28. CSS/SCSS/SASS http://getbem.com/naming/ Block Element Modifier
29. Documentação DOCZ https://facebook.github.io/create-react-app/docs/getting-started
30. STORYBOOK • Complete overhaul of Storybook’s developer experience • Theme-ready component library • Evolved front-end architecture for addons • Brand new Storybook website • ⚡Accelerate development: We document common use cases, automate visual testing, and promote code reuse • ✨ Promote best practices: Our long-term goal is that the library will be a shining example of how to build a well-documented design system in Storybook. We’ve got a long way to go here, but SB5 is a first step. • https://medium.com/storybookjs/storybook-5-0-db1d0f9c83b8
31. STORYBOOK https://github.com/pedronauck/docz
32. DOCZ • Zero config and easy. Don't worry about complex configurations steps. • ⚡ Blazing Fast. Full hot reload support with webpack 4 and automatic code splitting. • Easy to customize. Create and use real customizable themes. • MDX Based. Write markdown enhanced by the power of components. • Pluggable. Use plugins to manipulate and customise Docz to suit your needs. • Typescript Support. Full support for TypeScript. Write your type definitions with no extra setup required. https://facebook.github.io/create-react-app/docs/getting-started
33. DOCZ https://github.com/pedronauck/docz
34. TESTES Vamos falar apenas do Cypress e segue o baile... https://www.cypress.io/
35. CYPRESS https://github.com/joohncruz/todo-list-react-cypress https://docs.cypress.io/guides/overview/why-cypress.html#Writing-tests
36. BUILD https://github.com/motdotla/dotenv https://github.com/toddbluhm/env-cmd https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables • .env: Default. • .env.development, .env.test, .env.production: Environment-specific settings. • .env.development.local, .env.test.local, .env.production.local: • Local overrides of environment-specific settings.
37. BUILD https://github.com/motdotla/dotenv https://github.com/toddbluhm/env-cmd https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables
38. Fim...