Unidade 02 (1)

Prévia do material em texto

Aplicações server-side rendering (SSR)
Arquitetura de front ends
Aplicações server-side rendered
• Em cada uma das requisições, o servidor é o responsável por devolver a 
página completa ao usuário, pois ela já foi pré-processada; 
• Sistema de rotas de URLs direto no servidor.
Pontos de atenção
• Separação das responsabilidades pode ser mais difícil; 
• Dificuldade de componentização e reaproveitamento de códigos de 
interface; 
• Após o surgimento de frameworks de criação de componentes, construir 
interfaces sem o uso desse tipo de ferramenta tornou-se indispensável
Front-end + SSR
• Para evitar que tenhamos que recorrer a modelos antigos de criação de 
aplicações front-end, como PHP, ASP.NET MVC e JSP, foram criados outros 
frameworks que fazem o papel de renderizar o front-end no lado do 
servidor; 
• Aplicações citadas acima como "modelos antigos" possuem dificuldades 
técnicas (separação de conceitos, por exemplo) e organizacionais 
(dificuldade de contratação e retenção de talentos)
http://ASP.NET
FRONT-END + SSR
Front-end + SSR
• Next, Nuxt e Angular Universal (dentre outros) são frameworks que utilizam 
React, Vue e Angular respectivamente como base em suas construções; 
• Têm a proposta de possibilitar a criação de aplicações de forma 
componentizada, utilizando os mesmos conceitos fundamentais, mas com a 
funcionalidade de renderização de todo ou parte do seu código no servidor.
Front-end + SSR
• A abordagem SSR possibilitam que as aplicações possam ser indexadas pelos 
mecanismos de busca, favorecendo o Search Engine Optimization (SEO); 
• Na figura abaixo, podemos ver que quando fazemos uma requisição GET na 
URL de uma aplicação SPA, o conteúdo que temos é um elemento vazio: 
• Isso porque o conteúdo em aplicações SPA só é renderizado no cliente após 
a interpretação dos scripts referentes àquela página
Aplicações server-side rendered - Vantagens
• Performance e Time To Interactive (TTI) 
https://developers.google.com/web/tools/lighthouse/audits/time-to-interactive
https://developers.google.com/web/tools/lighthouse/audits/time-to-interactive
SSR + REACT
• Aplicação é pré-renderizadas no servidor, somente pela primeira vez; 
• Navegações subsequentes utilizam o “efeito SPA”; 
• Melhor desempenho em mecanismos de busca; 
• Requisições feitas nas URL retornam a página HTML com conteúdo 
completo pré-renderizado; 
• Possibilidade de usar todos os conceitos de componentização presentes no 
React; 
• Sistema de rotas baseado na estrutura de pastas.
SSR + REACT
SSR + REACT
Angular Universal
• Possibilidade de adicionar a renderização via servidor no Angular: 
• ng add @nguniversal/express-engine => adicionar recurso SSR; 
• npm run dev:ssr => usado para desenvolvimento no modo SSR; 
• npm run build:ssr => usado para build no modo SSR; 
DEMONSTRAÇÃO
Next.js: https://codesandbox.io/s/cold-water-9tb3k 
Nuxt.js: https://codesandbox.io/s/nuxtjs-example-g2wsu
https://codesandbox.io/s/cold-water-9tb3k
https://codesandbox.io/s/nuxtjs-example-g2wsu
Arquitetura de css
Arquitetura de front ends
Arquitetura de css
• CSS importa, e muito! 
• Um CSS mal feito prejudica toda a manutenção de um projeto web; 
• Refatorar CSS não é NADA fácil; 
• Já precisou de fazer alguma refatoração de CSS em projeto web?
Arquitetura de CSS
• CSS está ligado diretamente a performance: 
• Override de estilos é custoso para o browser; 
• Evitar o uso de !important diminui o número de re-render na fase de 
“painting”; 
• CSS está diretamente ligado à escala: 
• Manter a consistência de estilos entre as telas é de suma importância; 
• Editar estilos antigos não deve ser uma tarefa difícil; 
• Reutilizar estilos já criados é extremamente importante.
Arquitetura de CSS
• Colisão e nome de classes: 
• Ao dividir em múltiplos arquivos, vamos decorar todos os nomes para 
evitar de repeti-los em arquivos diferentes? 
• O nome das classes e ID dizem respeito ao que realmente fazem?
Arquitetura de CSS
• Algumas style-guides e metodologias tentam resolver tais problemas: 
• BEM: Block - Element - Modifier; 
• OOCSS: Object-Oriented CSS; 
• CSS Funcional: Tachyons e Tailwind;
https://tachyons.io
https://tailwindcss.com
Block - Element - Modifier (BEM)
• Block: 
• Exemplos: header, container, menu, checkbox, input; 
• Element: 
• Exemplos: ítem de menu, ítem de lista, título de cabeçalho; 
• Modifier: estado em que o elemento ou bloco se encontra 
• Exemplos: disabled, active, fixed, background cinza;
Block - Element - Modifier (BEM)
Block 
Element 
Modifier
Block - Element - Modifier (BEM)
Block - Element - Modifier (BEM)
Block
Block - Element - Modifier (BEM)
Element
Block - Element - Modifier (BEM)
Modifier
Block - Element - Modifier (BEM)
Block - Element - Modifier (BEM)
Block - Element - Modifier (BEM)
• Convenção já definida para nomenclatura de classes; 
• Visão clara de estilos para elementos filhos; 
• Visão clara de estados; 
• Nome de classes muito grandes; 
• http://getbem.com/naming/;
http://getbem.com/naming/
Object-oriented CSS (OOCSS)
• Separação entre CSS de estrutura e skin; 
• Structure properties: 
• Width | Height | Padding | Margins | Overflow; 
• Skin: 
• Color | Background | Font | Shadow.
Object-oriented CSS (OOCSS)
Object-oriented CSS (OOCSS)
Object-oriented CSS (OOCSS)
Object-oriented CSS (OOCSS)
• Separação entre container e conteúdo; 
• Ausência de classes “herdadas”.
Object-oriented CSS (OOCSS) - Antes
Object-oriented CSS (OOCSS) - Depois
CSS funcional
• Ideia de ter micro classes de CSS para compor um elemento; 
• Cada classe altera uma única propriedade do CSS; 
• Classes sempre tratam responsividade desde a concepção; 
• Exemplos: 
• Tachyons | Tailwind CSS | BassCSS
https://tachyons.io/
https://tailwindcss.com/
https://basscss.com/
CSS funcional - tachyons - propriedades de texto
CSS funcional - tachyons - propriedades de largura
CSS funcional - tachyons - espaçamentos
CSS variables
CSS funcional - tachyons - utilização no html
CSS funcional
• Responsividade: todas as classes possuem tratamento responsivo; 
• Reutilizável e modular: inúmeras classes prontas para serem usadas em 
qualquer tela; 
• Legibilidade: ao olhar o HTML, você sabe exatamente qual será o seu estilo; 
• Produtividade: escrever HTML é mais rápido, pois diminui a necessidade de 
criar classes para modificar propriedades simples;
Ferramentas de build
Arquitetura de front ends
Ferramentas de build
• As ferramentas de build foram criados para resolver problemas de automação do pipeline de 
desenvolvimento: 
• Transpilação de Typescript para Javascript ou de React (JSX) para JavaScript; 
• Otimização de código: remoção de quebras de linhas, espaçamentos, redução do nome de 
funções; 
• Quebra de arquivos de build muito grandes: um arquivo pode ser configurado para ter, no 
máximo, 100kb por exemplo; 
• Inserção automática de arquivos javascript/css como referência no HTML sob demanda; 
• Um arquivo de configuração é necessário para automatizar todas essas tarefas; 
• Possibilidade de customizar, a qualquer momento, as tarefas já automatizadas; 
• Frameworks mais novos vêm com algum bundler embutido, mas conhecendo o seu funcionamento 
podemos customizar e adaptar à nossa arquitetura.
Ferramentas de Build - Webpack
• Webpack é o bundler mais utilizado pela comunidade; 
• Utilizado por padrão no Angular, Vue e React; 
• Documentação um pouco extensa pela quantidade de recursos disponíveis; 
• Possível de ter suas funcionalidades nativas extendidas através dos "Loaders" 
e Plugins; 
• Inicializa um servidor de build e desenvolvimento local, o que possibilita o 
Hot-Reloading (carregamento automático ao salvar os arquivos) e outras 
funcionalidades;
Ferramentas de Build - Vite
• Ferramenta de build e desenvolvimento leve, com a proposta de ter um 
ambiente de desenvolvimento mais eficiente e rápido, de acordo comque as 
alterações locais vão sendo feitas; 
• Possui templates pré-configurados para inúmeros frameworks de mercado: 
https://github.com/vitejs/vite/tree/main/packages/create-vite
https://github.com/vitejs/vite/tree/main/packages/create-vite