Palestra realizada na 4ª Semana de Tecnologia e Inovação da UniLaSalle - RJ, em 10/05/2019.

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. O polêmico JSX

23. As principais libs do ecossistema do React.js

24. O lifecycle do React (por componente)

25. 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

26. 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

27. PropTypes

28. Documentar os componentes é importante

29. 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

30. E o JQuery? Sobrevive, firme e forte!
Fonte: https://insights.stackoverflow.com/survey/2019#technology-_-web-frameworks

31. Show me the code!
★ https://github.com/fernandohenriques/desafio-mangabadigital
★ https://github.com/fernandohenriques/chat-app
★ https://github.com/fernandohenriques/petline-app

32. Obrigado!