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

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

Fernando Henriques
● Desenvolvedor 10+ anos
● Senior Full Stack Developer
● JavaScript, Ruby, PHP e Java
● Front-end 💓 3000
github.com/fernandohenriques

A Internet não para de crescer desde que entrou no ar...
Fonte: https://www.statista.com/statistics/273018/number-of-internet-users-worldwide/

As tecnologias que “fazem” a Internet
também não pararam de evoluir para
atender as demandas constantes dos
usuários

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)

Nos primórdios...
Algumas tentativas de evoluir fora
das soluções nativas do browser
duraram algum tempo, mas
depois perderam espaço

Sites estáticos vs. Sites dinâmicos
Quando o back-end passou a servir o front-end

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…)

Mas foi o Node.js que revolucionou o
front-end a partir de 2010

Gerenciamento de dependências

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…)

Webpack: Front-end “compilado”

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

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)

Virtual DOM: mais performance para renderizar a tela

One Way Data Flow vs. Two Way Data Binding

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

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.

As principais libs do ecossistema do React.js

O lifecycle do React (por componente)

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

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

Documentar os componentes é importante

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

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

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

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

Mais conteúdo relacionado

Mais procurados

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

Mais de Fernando Henriques

Último

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