O documento discute a evolução das tecnologias front-end e como o React se tornou uma das bibliotecas mais populares para a criação de Single Page Applications (SPAs). Ele descreve a transição de sites estáticos para dinâmicos com back-end, o surgimento de frameworks como Angular e o foco em mobile-first. Também explica como o React usa o Virtual DOM para melhorar o desempenho, programação declarativa e One-Way Data Flow.

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!