Rethinking Components

Repensando sua aplicação com componentes e React.

Transcript

1. COMPONENTS RETHINKING
2. VINICIUS DACAL @vinicius_dacal viniciusdacal
3. Desenvolvedor Front-end
5. RETHINK APPLICATION
7. RETHINK COMPONENTS
8. CONTAINER & PRESENTATIONAL
9. CONTAINER COMPONENTS How things work Subscribe to state Dispatch actions Aware of behavior
10. PRESENTATIONAL COMPONENTS How things look Read data from props Invoke callbacks from props Unaware of behavior
13. CRIANDO COMPONENTES DE FORMA ISOLADA
14. REACT STORYBOOK
17. CSS!
18. OLD WAY
21. NÃO ESCALA
22. Namespace Global (Isolamento) Eliminação de código morto Dependência da ordem do carregamento Dificuldade de configuração
23. OOCSS, SMACSS, BEM
24. CSS PROCESSORS Less Sass Stylus PostCSS cssnext
25. REACT WAYS
27. INLINE STYLES
29. VANTAGENS Estilo isolado sem seletores Seu estilo fica independente de ordem Eliminação de código morto Extremamente expressivo
30. PROBLEMAS DESSA ABORDAGEM Pseudo Elements Pseudo States Media Queries
31. LIBS Radium React Style
32. Radium
33. React Styles
34. OUTRA ABORDAGEM JSS Aphrodite
35. JSS
36. Aphrodite
37. VANTAGENS EM COMPARAÇÃO AO INLINE Rules Caching Rules Sharing All css features included Performance
38. CSS MODULES RULES ARE LOCAL BY DEFAULT
41. QUAL A MELHOR ABORDAGEM?
42. NO ONE KNOWS YET
43. OBRIGADO!