A grata surpresa chamada: InfernoJS.

tl;dr: A ideia aqui é apenas apresentar InfernoJS e mostrar suas características e diferenças comparada a ReactJS, não tenho pretenções de fazer você toma-lo como o seu novo ponto de partida para web components. Penso que como engenheiro de software, temos que abrir a mente para novas abordagens sempre e decidir por nós mesmos.

Ponto de Partida

Depois de toda a discussão em torno do React no último ano, eis que surge a cada dia que passa novas possibilidades baseadas na famosa biblioteca. É assim com Preact que é uma alternativa a React que tem apenas 3kb. Porém não estou aqui pra falar dessa alternativa e sim de uma outra que eu descobri recentemente e achei fantástica. Intitulada InfernoJS, uma biblioteca que traz rapidez e eficiência acima de tudo. Em um post da Cynthia Zanoni em seu facebook, ela questionou “Qual seria a diferença entre React e InfernoJS”. Então decidi criar esse post e tentar de forma geral explicar o que Inferno traz para nós e suas diferenças comparando a ReactJS.

Um aspecto interessante que temos que ter em mente antes de tudo, é que React trouxe além da sua biblioteca, foi uma forma diferente de pensar. Ele tirou de nossas cabeças as velhas formas de desenvolver software. Abriu um leque de novas opções, questionando antigos padrões como o MVC, além de oferecer uma abordagem que inspirou muitos padrões diferentes e discussões de design. Por exemplo, fluxo de dados unidirecional, componentes sobre modelos, JSX, DOM virtual e etc.

Sabendo disso tudo sobre React, eis que surge InfernoJS. Foi projetado para ser muito rápido e leve, oferecendo um monte de recursos que torna o trabalho com um projeto React, um pouco mais agradável!

Criado por Dominic Gannaway que foi contratado pelo time do Facebook, InfernoJS é um projeto open source que traz consigo o pequeníssimo tamanho de 9kb (gzip) e a promessa de ser extremamente rápido. Em seus testes de benchmark comparado muito das vezes até mesmo com VanillaJS, mostra-se bem a frente. Para vocês terem uma ideia, com InfernoJS é possível desenvolver uma UI com até 60 FPS em dispositivos móveis.

Inferno é consideravelmente mais rápido do que React. Isso não se aplica a apenas benchmarks, mas aplicações do mundo real, variando de 40% a 110% de melhoria de desempenho pra quem usa Inferno 1.0.

Mas quais seriam as diferenças de InfernoJS e React?

Primeiro ponto aqui como vimos acima foi sua rapidez. Ele consegue isso porque em vez de fazer “diff” do DOM ​​virtual x DOM real, InfernoJS faz “diff” do DOM virtual x o último DOM virtual criado. Além disso Inferno tenta reutilizar propriedades, objetos e nós do DOM sempre que possível. Se você for pensar, criar muitos objetos é muito caro na memória, compromete o desempenho de forma geral. Pra você ter como exemplo, em vez de criar propriedades adicionais em VNode Objects, Inferno reutiliza propriedades anteriores (mesmo que o nome da propriedade não seja exatamente o que está sendo colocado dentro dele).

Existem outras inúmeras diferenças, vou listar outras que jugo interessantes:

  • Inferno não tem um sistema de eventos completamente sintético como React faz. Ele tem um sistema de eventos parcialmente sintético, optando apenas para delegar certos eventos (como onClick).
  • Inferno fornece eventos de ciclo de vida em componentes sem estado. Esta é uma grande vitória para as pessoas que preferem componentes leves ao invés de classes inchadas ES2015.
  • Inferno inclui render no pacote do núcleo principal, em vez de ter um pacote InfernoDOM como React. Costumávamos fazê-lo dessa forma, mas descobrimos que as pessoas simplesmente não gostavam, dado que não apoiamos nativos. Além disso, ao não dividi-los, melhoramos o desempenho e o tamanho dos bundles.

Uma característica legal é que Inferno evita tocar no DOM, por que sabemos que o DOM real é lento. Em vez disso, opta por tocar somente um pequeno subconjunto de propriedades / métodos em nós do DOM tais como firstChild, lastChild, parentNode, nextSibling, createElement, removeChild, insertBefore, replaceChild. Inferno evita usar childNodes por que estes métodos tendem a ser muito caro se pensarmos em performance. Um truque de otimização bacana para limpar o conteúdo de um DOM foi usar textContent(‘ ’).

Conclusão

Acredito que InfernoJS tem muito a nos mostrar como desenvolvedores. Traz consigo o que React conquistou e te leva a mergulhar em mares mais profundos com toda a sua simplicidade e leveza. Faz mudanças interessantes na sua arquitetura comparado a React que realmente fez toda a diferença se pensarmos em leveza e performance. Acredito que para 2017 uma coisa que veremos com certa frequência é a otimização de bibliotecas famosas, deixar mais rápidas e menores. InfernoJS é um dos exemplos que deu o primeiro passo, espero que nos próximos dias eu consiga mostrar um pouco da experiências que estou tendo com InfernoJS. Mas uma coisa é certa, vocês irão escutar muito ainda a falar dessa biblioteca.

Uma questão curiosa que deixo para discussão é que Dominic Gannaway foi contratado pelo Facebook, será que React terá um redesign ao ponto de chegar a leveza de InfernoJS? Só o tempo dirá mas vocês podem discutir nos comentários!