uma história opinionada sobre o frontend

quem sou eu

  • Luciano Ratamero
  • fotojornalista de formação
  • dev JS/Python desde 2010
  • amo música, jogos, poesia e cinema
  • atualmente trabalho na Lincoln Loop, uma consultoria especializada em sites Django

do que vamos falar?

  • o que é frontend
  • cenário do front antes de 2005
  • 2005 a 2009: início da programação pesada no cliente
  • 2010 a 2014: frontend como profissão
  • 2015 a 2019: engenharia do frontend
  • 2020 até hoje: metaframeworks e MPAs

o que é o frontend

cenário antes de 2005

Três tecnologias

  • HTML (1991): estrutura do documento que vemos
  • CSS (1994): forma (estilos) do documento que vemos
  • JavaScript (1995): adiciona interatividade ao documento que vemos

guerra dos navegadores

  • IE vs Netscape
  • IE vs Firefox

2005 a 2009: início da programação pesada no cliente

jQuery e jQuery Ajax

polyfills e CSS Resets

pré-processadores de CSS

experimentos de frameworks e linguagens

  • Dojo, MooTools, dentre outros
  • CoffeeScript

NodeJS

JavaScript fora do navegador

2010 a 2014: frontend profissional

popularização da web mobile

  • Design responsivo
  • Paradigma Mobile First

primeiros frameworks JS importantes

  • Knockout: introduziu programação reativa com signals
  • Backbone e AngularJS: popularizados pela sua arquitetura MVC

primeiros grandes frameworks CSS

  • Twitter Bootstrap
  • Foundation

primeiros bundlers e toolkits

  • Bundlers: Browserify e Webpack
  • Toolkits: Grunt e Gulp

primeiros gerenciadores de dependências

  • NPM
  • Bower

experimentos com MPAs híbridas

  • PJAX
  • Turbolinks

SPAs (Single Page Apps)

React

  • Fluxo de dados unidirecional
  • arquitetura de componentes

enquanto isso...

quota de mercado da jQuery em 2015:

62,7% dos 1M sites mais acessados

2015 a 2019: engenharia do frontend

ES6 (ECMAScript 2015)

  • padronização do sistema de módulos (import e export)
  • sintaxe aprimorada (arrow functions, spread operator, etc.)
  • classes

popularização de:

  • processos de build
  • bibliotecas de componentes
  • design systems

aprimoramento dos frameworks JS

  • Vue (2015)
  • Angular (2016)
  • Svelte (2016)
  • React Hooks (2019)

experimentos com novas tecnologias

  • metaframeworks
  • compiladores

SPAs em ascensão

mas a discussão sobre retorno a MPAs ou MPAs híbridas começa a se aquecer

enquanto isso...

quota de mercado da jQuery em 2019:

80% dos 1M sites mais acessados

2020 até hoje: entre o front e o back

retorno forte e popularização de conceitos antigos:

  • observabilidade e signals
  • compiladores (no Vue, Solid, Svelte e outros)
  • código do front e do back no mesmo arquivo
  • tipagem gradual (TypeScript e Flow)
  • MPAs

novas propostas de ferramental

  • Vite: servidor de dev, bundler, pré/pós processador, suíte de testes, HMR, inicializador de projetos
  • Bun: runtime, gerenciador de pacotes, suite de testes, servidor de aplicação

crescimento das MPAs híbridas

  • HTMx
  • Inertia
  • metaframeworks em geral

sopa de letrinhas

  • SSR: server side rendering
  • SSG: static site generation
  • ISR: incremental static regeneration

a linha tênue entre front e back

  • React Server Components
  • SvelteKit Adapters

enquanto isso...

quota de mercado da jQuery em 2024:

77% dos 1M sites mais acessados

Referências

obrigado! 💖

@lucianoratamero