O front-end moderno e sua lib mais popular: React

Palestra realizada na 4ª Semana de Tecnologia e Inovação da UniLaSalle - RJ, em 10/05/2019, e posteriormente para o time técnico da Multiplan (MIND), em 30/05/2019.

Transcript

1. O front-end moderno e sua lib mais popular: React
2. Fernando Henriques • Desenvolvedor 10+ anos • Senior Full Stack Developer • JavaScript, Ruby, PHP e Java • Front-end 3000 github.com/fernandohenriques
3. A Internet não para de crescer desde que entrou no ar... Fonte: https://www.statista.com/statistics/273018/number-of-internet-users-worldwide/
4. As tecnologias que “fazem” a Internet também não pararam de evoluir para atender as demandas constantes dos usuários
5. Tudo começou com o HTML ★ No começo queríamos apenas que tudo funcionasse ★ Depois começamos a nos preocupar com a semântica ★ Hoje pensamos em acessibilidade e na experiência do usuário (HTML 5)
6. Nos primórdios... Algumas tentativas de evoluir fora das soluções nativas do browser duraram algum tempo, mas depois perderam espaço
7. Sites estáticos vs. Sites dinâmicos Quando o back-end passou a servir o front-end
8. Os famosos frameworks MVC
9. Camada de visão
10. Ajax: A um passo das SPAs
11. O CSS também evoluiu ★ Pré-processadores (SASS, LESS) ★ Pós-processadores (Post-CSS) ★ Praticamente uma nova especificação com o CSS 3 (variáveis nativas, feature queries, flexbox…) ★ Design Patterns (BEM, Atomic) ★ Frameworks e libs de elements (Bootstrap, Bulma CSS…)
12. Mas foi o Node.js que revolucionou o front-end a partir de 2010
13. Gerenciamento de dependências
14. Automatizadores de tarefas
15. Transpilação, Babel e um universo de possibilidades ★ Modularização do código ★ Suporte às especificações mais novas do JavaScript ★ Supersets (Flow, TypeScript) ★ Outras linguagens (CoffeeScript, Elm, ClojureScript…)
16. Webpack: Front-end “compilado”
17. O boom do mobile popularizou as APIs ★ Começou a ser definido um limite claro entre o front-end e o back-end ◦ Projetos separados ◦ Times separados ★ Mobile first
18. SPA: Single Page Application
19. React.js: Uma lib para criar componentes reutilizáveis ★ Combinada com outras libs do ecossistema do React torna-se um poderoso framework para criação de SPAs ★ Não serve apenas para criar SPA (widgets e afins)
20. Virtual DOM: mais performance para renderizar a tela
21. One Way Data Flow vs. Two Way Data Binding
22. One Way Data Flow Two Way Data Binding ★ Implícito ★ O framework altera o dado ★ Não testável ★ Explícito ★ this.setState({ }) ★ Testável
23. Programação imperativa vs. Programação declarativa ★ Ex.: Siga reto pela rua Cap. Frederico, sentido Centro. Vire à esquerda na R. Marechal Floriano Peixoto e siga reto até o terminal que fica no nº 1641; ★ Maioria das linguagens de programação; ★ Orientação a objetos. ★ Ex.: O endereço é Rua Marechal Floriano Peixoto, 1641 - Centro. ★ SQL é um exemplo de linguagem declarativa; ★ Focada na lógica, não na execução.
24. Programação Imperativa
25. Programação declarativa
26. O polêmico JSX
27. As principais libs do ecossistema do React.js
28. O lifecycle do React (por componente)
29. Como ficam organizados os componentes em uma aplicação React.js? ★ Componentes globais ★ Componentes locais (por feature/componentes/screens) ★ Design Patterns ◦ Atomic Design ◦ Presentational and Containers components
30. Estrutura de um componente no React ★ Padrão index.js ★ Imagens escopadas ★ CSS Modules ★ Testes unitários do componente ★ Código do componente em si
31. PropTypes
32. Documentar os componentes é importante
33. SPA: não é bala de prata ★ Não usar para tudo (idealmente serve para Webapp, sites que se comportam como aplicações) ★ Em muitos cenários ainda é preciso ter Server Side Rendering ◦ Posso ter SSR e continuar sendo uma SPA ◦ Next.js
34. E o JQuery? Sobrevive, firme e forte! Fonte: https://insights.stackoverflow.com/survey/2019#technology-_-web-frameworks
35. Show me the code! ★ https://github.com/fernandohenriques/desafio-mangabadigital ★ https://github.com/fernandohenriques/chat-app ★ https://github.com/fernandohenriques/petline-app
36. Obrigado!