Mindset para aplicações baseadas em componentes no Front-End — Parte 1

5 min readSep 22, 2017

Hoje vamos conversar sobre uma mudança de mindset que todo desenvolvedor Front-End precisa ter. Não veremos códigos neste artigo, apenas a base teórica sobre como devemos compor nossas aplicações utilizando componentes.

Ficou confuso(a)? Se você já ouviu os termos SPA, PWA ou Rotas, essa é a base teórica que você precisa para entender como montar uma aplicação dessas a partir de componentes.

Está perdido? Confira os links abaixo para entender de uma vez por todas os conceitos de SPA e PWA:

Motivação

Minha namorada descolada (Simone Amorim) está trabalhando bastante com componentes em React, e acabou esbarrando em dúvidas na hora de compor aplicações com rotas e outras coisas, logo, aqui estou eu para escrever um série de artigos para deixar claro esse meio do caminho entre criar componentes e compor aplicações (não necessariamente apenas com React).

Apps no Front-End são uma realidade

Nos últimos anos o termo SPA (Single Page App) se popularizou muito, principalmente através do AngularJS, que sem dúvidas mudou para sempre a forma em que pensamos o desenvolvimento no client side.

Atualmente o termo PWA (Progressive Web App) tem se destacado, e não vai demorar para que esse conceito se firme como um padrão para o desenvolvimento, assim como as SPA’s.

O que fica claro vendo esses caras, é que a palavra chave “App” se repete, e é nessa realidade onde muita gente se perde:

Quando falamos em desenvolvimento Front-End moderno, lidamos com aplicações, não com websites.

Definições básicas

Antes de prosseguir, vamos definir algumas coisas básicas:

O que é um website?

Um sítio (em inglês website ou simplesmente site, também aportuguesado para saite) é um conjunto de páginas web, isto é, de hipertextos acessíveis geralmente pelo protocolo HTTP na internet.
Fonte: Wikipédia

O que é uma aplicação ou App (não mobile)?

Software aplicativo (aplicativo ou aplicação) é um programa de computador que tem por objetivo ajudar o seu usuário a desempenhar uma tarefa específica, em geral ligada a processamento de dados.
Fonte: Wikipédia

Se você no mínimo já ouviu alguém falando sobre boas práticas para desenvolver aplicações, já deve ter ouvido falar sobre como trabalhar com componentes é uma boa ideia, então vamos definir mais esse cara:

Componentes de Software é o termo utilizado para descrever o elemento de software que encapsula uma série de funcionalidades. Um componente é uma unidade independente, que pode ser utilizado com outros componentes para formar um sistema mais complexo.
Fonte: Wikipédia

Resumindo: Podemos definir um website como um conjunto de páginas e uma Aplicação como um conjunto de componentes.

Essa diferença pode parecer não importar muito a primeira vista, mas quando precisamos construir nossas Apps, ter em mente que não trabalhamos mais com páginas e sim com componentes faz toda a diferença.

A estrutura de um website

Quando lidamos com Websites temos basicamente uma página inicial (geralmente index.html) com links para outras páginas.

Exemplo de website (Links que fazem requisição para outras páginas)

Quando um link é clicado, o browser carrega a página apontada pelo link e altera a URL.

A web funciona assim desde o início, o que possibilita navegar e compartilhar um link específico que aponta para uma página específica dentro de um website, simples e genial.

A estrutura de uma SPA

Apesar do exemplo do website ser mágico, não faz muito sentido recarregar toda a página para simplesmente alterar um único pedacinho da tela, pensando em solucionar isso temos as tão famosas Single Page Apps.

Nesse cenário temos apenas uma única página com links, porém esses links não carregam outras páginas, mas sim fazem chamadas AJAX (asynchronous / Sem recarregar a página) para os conteúdos necessários e substituem apenas as partes que realmente "mudam" de uma “página” para outra, dessa forma, não recarregando conteúdo desnecessário.

Porém, como não carregamos outra página, mas sim um componente dentro da mesma página, o Browser não altera a URL, o que impossibilita o compartilhamento de um ponto específico da aplicação.

Por sorte, temos a History API, que nos dá o poder tanto de manipular a URL quanto de inserir entradas no histórico, possibilitando voltar e avançar entre os estados da aplicação, como se estivéssemos navegando em páginas de fato.

Ou seja, temos todo esse trabalho para imitar o comportamento padrão do Browser, porém sem recarregar coisas desnecessárias. Parabéns, você entendeu o que é uma SPA.

A estrutura de uma PWA

Quando falamos em PWA, temos assuntos como Web manifest, Push notifications e outros. Mas, hoje vamos focar em Offline, mas não em detalhes sobre Service Workers e códigos, mas sim em como pensar nossas aplicações baseadas em componentes.

Mais uma vez, temos uma SPA, porém agora podemos pensar em estratégias para tornar a experiência ainda melhor para nosso usuário.

Com o advento das PWAs, a parte estática de nossa SPA agora é chamada de APP Shell, e é essa a parte da página que focamos em tornar offline em primeiro momento.

Note que agora chamamos esses "pedaços de página" de componentes.

Entendendo as rotas

Agora entenderemos o papel dos links nessa história, como você já deve ter imaginado, eles não servem mais para carregar novas páginas, mas sim redirecionam para diferentes estados da aplicação, e esse “locais” para onde os links tem a tarefa de apontar são as tão famosas rotas.

Cada caminho que o link aponta (rota) é relacionada a um componente que é carregado dentro da Shell.

PS: Esses componentes somados a sua relação com rotas, são chamados de views.

Conclusão

Esses são conceitos (soltos) de base para quem está começando a compor aplicações a partir de componentes, um cenário bem comum quando falamos de bibliotecas de componentes como React e Polymer.

Falando neles, em breve teremos uma continuação, abordando a parte prática disso tudo com react-router (React) e app-route (Polymer).

PS: Tudo vai fazer sentido e ter uma aplicação prática no próximo artigo, relaxem ;).

Meus links:

Bye bye.