Preact

Alternativa ao React com apenas 3KB e uma melhor performance.

O objetivo principal do Preact se resume em:

  • Tamanho: Pequeno e leve
  • Performance: Render rápido e eficiente

O nome, baseado na lib React, porém com um P antes de React. Sabem o porquê deste nome? Petit React, petit é pequeno na língua francesa.

Diferenças e pontos interessantes

Preact não se define como uma reimplementação de React, existem algumas diferenças entre eles, porém algumas features do React também estão presentes no preact.

A grande diferença já foi relatada anteriormente, mas não custa relembrar. A distinção aqui está na performance e tamanho do Preact em relação ao React.

Com Preact, você tem a possibilidade de utilizar qualquer lib que seja compatível com React, você não precisa se preocupar ao utilizar Preact que você não ficará sem utilizar as libs disponíveis para React.

Caso você tenha alguma parte feita em React ou algum módulo utilizando React, você poderá fazer uma alias dos módulos dessa aplicação para que o resultado final seja com Preact. Isso é possível devido ao preact-compact, você terá apenas que fazer algumas configurações no seu bundler.

Um ponto mais técnico, é a possibilidade de utilizar class na sintaxe do JSX, todos que usam React sabem que é necessário utilizar className, e Preact suporta ambas abordagens.

Outro ponto, é em relação ao método render, o mesmo recebe por parâmetro as props e state, isso ajuda quando você quer fazer uma desestruturação de props na chamada do método render, onde o primeiro parâmetro é o props e o segundo o state.

Na transformação da sintaxe JSX, existe uma grande diferença. Temos que instalar o plugin babel transform-react-jsx e alterar o pragma, pois por default, o plugin utiliza React.createElement. A alteração pode ser feita tanto no bundler, quanto em .babelrc.

Lifecycle

Sabemos que no React 16.3, trouxeram algumas novas informações sobre o Lifecycle. No Preact, ainda temos os seguintes:

  • componentWillMount: Antes que o componente seja montado no DOM
  • componentDidMount: Depois que o componente é montado no DOM
  • componentWillUnmount: Antes da remoção do DOM
  • componentWillReceiveProps: Antes que novas props sejam aceitas
  • shouldComponentUpdate: Antes de render(). Retorne false caso queiram pular o render()
  • componentWillUpdate: Antes render()
  • componentDidUpdate: Depois render()

Porque usar?

Tendo a possibilidade de estar utilizando React, porque eu utilizaria Preact?

Existem vários benchmarks comprovando a eficiência de libs como Preact e Inferno comparado ao React. Isso é tão verdade, que o próprio Facebook contratou o criador do inferno, Dominic Gannaway, para que ele faça parte do time do React e consiga trazer uma melhor performance para React, e esta melhora já pode ser notada no React Fiber.

Perguntar como estas devem ser respondidas com outra pergunta, qual a finalidade que você procura para o seu projeto?

É realmente complexo definir a arquitetura de um projeto nos dias de hoje, onde temos várias opções de libs extraordinárias, e que possuem a mesma finalidade, mas com propostas diferentes. Preact é destinado a quem está em busca de performance, aplicações que serão utilizadas em dispositivos mobile ou em países em desenvolvimento.

Os frameworks e libs de hoje, tendem a ter tamanhos enormes e isso podem ser uma pedra no sapato quando a necessidade é ter um bundle menor, preact defende que, a maior parte do código do projeto deve ser seu.

Existem pessoas que irão relatar que hoje em dia, a conexão de internet faz o download disto em questão de milissegundos, e que não existe a necessidade de nos preocuparmos com isto.

Concordo, e é por isto que fiz uma pergunta mais acima e vou repeti-lá novamente. Qual a finalidade do seu projeto? Imagine que você tenha que desenvolver uma aplicação para um país ainda em desenvolvimento, que a conexão seja de baixa qualidade. No Brasil todos sabemos que a conexão não é de boa qualidade, e imagine você acessando uma aplicação, em que você tenha que baixar um bundle enorme.

Quem usa?

A grande Uber utiliza Preact em uma aplicação web mobile(PWA). Eles relatam que tiveram um grande desafio em realizar uma aplicação semelhante a nativa, para smartphones e que seja acessada via dispositivos até mesmo com conexões 2G.

A aplicação tem o tamanho de 50KB e possui a mesma experiência nativa, porém em uma aplicação web super rápida. Toda a aplicação foi feita com o intuito de obter performance, e isto pode ser notado até mesmo nas escolhas das libs usadas no projeto.

Listarei algumas delas:

  • Bundler: Webpack
  • Style: Styletron CSS in JS
  • Just
  • SVGO

Uma interessante observação de uma destas ferramentas utilizadas é a Styletron, algo semelhante ao Styled Components.

Sendo assim, a aplicação poderá ser acessada até mesmo por dispositivos sem SO populares, como Android e iOs. Caso tenha interesse em acessar a aplicação, a mesma pode ser vista aqui: https://m.uber.com

Hand On

Como de costume, crei uma pequena configuração, para que você coloque a mão na massa, e brincar com uma aplicação utilizando Preact.

Conclusão

O intuito aqui, não é afirmar que Preact é melhor ou pior que React, mas sim demonstrar uma alternativa a mais famosa lib de construção de UI. Onde o uso vai depender da sua necessidade.