ti-enxame.com

Prós e contras do Facebook React vs. Componentes da Web (polímero)

Quais são os principais benefícios do Facebook React nos próximos Web Components spec e vice-versa (ou talvez uma comparação mais entre maçãs seja com a do Google - Polímero biblioteca)?

De acordo com este JSConf EU talk e a React, os principais benefícios do React são:

  • Desacoplamento e aumento da coesão usando um modelo de componente
  • Abstração, Composição e Expressividade
  • DOM virtual e eventos sintéticos (o que basicamente significa que eles reimplementaram completamente o DOM e seu sistema de eventos)
    • Ativa as coisas modernas do evento HTML5 em IE 8
    • Renderização do lado do servidor
    • Testabilidade
    • Ligações a SVG, VML e <canvas>

Quase tudo o que foi mencionado está sendo integrado aos navegadores de forma nativa por meio dos Componentes da Web, exceto pelo conceito DOM virtual (obviamente). Posso ver como o DOM virtual e os eventos sintéticos podem ser benéficos hoje para oferecer suporte a navegadores antigos, mas não está descartando uma grande quantidade de código de navegador nativo, como se você se matasse a longo prazo? No que diz respeito aos navegadores modernos, não há muita sobrecarga/reinvenção desnecessária da roda?

Aqui estão algumas coisas que eu acho React está faltando que o Web Components cuidará de você. Corrija-me se eu 'Estou errado.

  • Suporte nativo ao navegador (leia "garantia de ser mais rápido")
  • Escreva um script em uma linguagem de script, escreva estilos em uma linguagem de estilo, escreva marcação em uma linguagem de marcação.
  • Encapsulamento de estilo usando o Shadow DOM
    • Em vez disso, reagir possui isto , o que requer a gravação de CSS em JavaScript. Feio.
  • Encadernação bidirecional
528
CletusW

Os caras de [React têm explicação bastante boa na comparação entre React e Web Components:

Tentar comparar e contrastar React com WebComponents resulta inevitavelmente em conclusões ilusórias, porque as duas bibliotecas são construídas para resolver problemas diferentes. Os WebComponents fornecem um forte encapsulamento para componentes reutilizáveis, enquanto React fornece uma biblioteca declarativa que mantém o DOM sincronizado com seus dados. Os dois objetivos são complementares; os engenheiros podem combinar e combinar as tecnologias. Como desenvolvedor, você é livre para usar React em seus WebComponents, ou para usar WebComponents em React, ou ambos.

17
Erik Kaplun

O polímero é incrível. React é incrível. Eles não são a mesma coisa.

Polymer é uma biblioteca para a construção de componentes da Web compatíveis com versões anteriores.

React é o V no MVC. É a vista, e nada mais. Não por si só, pelo menos.

Reagir não é uma estrutura.

React + Flux + Node + (Gulp ou Grunt) é mais comparável a uma estrutura, mas três dessas coisas não fazem parte da reação.

Existem muitas tecnologias, padrões e estilos de arquitetura que reagem aos desenvolvedores, mas a reação em si não é uma estrutura.

É triste que ninguém tenha tempo para dizer a coisa mais simples possível, que eles não devem ser comparados. Eles têm alguma sobreposição, mas são mais diferentes que o mesmo.

Ambos permitem definir componentes da web, mas de maneiras diferentes. Além disso, são ferramentas muito, muito diferentes.

17
Robotsushi

Outra resposta em um ponto especificamente:

Escreva JavaScript em Vanilla JavaScript, escreva CSS em CSS, escreva HTML em HTML.

Nada impede que você escreva Javascript, por exemplo, CoffeeScript, TypeScript, ClojureScript ou qualquer outra coisa. É apenas uma questão de preferência.

HTML é o melhor DSL para documentos HTML estáticos. Mas não fornece nada para HTML dinâmico. E no navegador, a melhor linguagem para tornar o HTML dinâmico é o Javascript, não o HTML puro com manipulação DOM ad-hoc do Javascript ou linguagem de modelo como o Guiador, que nem sequer é metade da linguagem.

Para CSS, se seu CSS é estático, você o escreve como de costume. Se precisar ser dinâmico com base em alguns valores de tempo de execução, é a mesma história do HTML: o Javascript é a melhor maneira de torná-lo dinâmico.

15
DjebbZ

Não usei o Web Components, mas parece que eles exigem que você adicione lógica de mutação codificada manualmente aos manipuladores de eventos.

snippet de Polymer exemplo:

 <script>
   Polymer({
     counterChanged: function() {
       this.$.counterVal.classList.add('highlight');
     },
 ...

O objetivo de React é reduzir a complexidade, eliminando a lógica de mutação. Em vez disso, você regenera ingenuamente um DOM virtual e deixa o algoritmo diff do React descobrir o que precisa ser alterado no DOM real.

6
limscoder

Eu acho que a maior desvantagem de React na minha opinião é que não é baseado em padrões da web. React é uma ferramenta muito poderosa no momento, mas como contorna muito do que o navegador fornece sempre que possível, as decisões que pareciam fazer sentido agora provavelmente não farão sentido daqui a alguns anos. instalações internas continuam a melhorar. Então, eu gostaria de falar sobre isso e como isso afeta alguns aspectos diferentes dos aplicativos da web.

Desempenho

As pessoas gostam de argumentar que a vantagem do React é que ele reinventa completamente todo o DOM e o modelo de eventos, e o DOM padrão existente é pesado e caro, e o que não, mas no final do dia eu não encontrei o desempenho do DOM. React para ser melhor do que o que posso obter de um backbone bem escrito ou de um aplicativo Polymer. De fato, na maior parte da minha experiência profissional, o desempenho de React foi realmente um pouco pior. Isso não quer dizer que React seja lento ... Não é apenas a escolha de desempenho do Edge que todos pensávamos que era antes de colocarmos as mãos nela.

Na resposta da rsp, ele aponta que o modelo DOM do React para uma div é muito menor peso que a div DOM nativa, e isso certamente é verdade. No entanto, para React ser útil, essa div 'virtual' deve acabar se tornando uma div real em algum momento. Portanto, na minha visão de mundo, não se trata de uma div React vs uma div nativa. É uma React div + uma div nativa vs apenas uma div nativa. A sobrecarga da versão do DOM do React não é trivial e, se os padrões abandonarem alguns desses atributos desnecessários e permitirem que os nós DOM nativos sejam muito mais leves, subitamente essa sobrecarga parecerá realmente cara.

Em um dos meus locais de trabalho anteriores, tivemos alguns aplicativos no Polymer e outros no React. Uma das primeiras aplicações do Polymer acabou sendo reescrita em React porque era nisso que a empresa adotava os padrões e, com base nas medições que eu fiz, o React dessa mesma aplicação acabou usando cerca de 30% mais memória que a versão Polymer e, embora a diferença fosse marginal, a versão Polymer foi renderizada em menos tempo também. Uma coisa a considerar aqui é que estamos falando de aplicativos escritos por pessoas, e as pessoas não são perfeitas, portanto, é possível que a implementação React desse aplicativo não esteja tirando vantagem de tudo React é capaz. Mas acho que pelo menos parte disso tem a ver com a sobrecarga React incorrida por ter sua própria versão do DOM.

O React reinventa todo o DOM usando seu próprio modelo e o usa para uma grande otimização de desempenho. Uma exibição é renderizada em um DOM virtual e projetada no DOM real. Quando há uma alteração e a visualização deve ser atualizada, a visualização é novamente renderizada novamente em um DOM virtual e essa árvore é diferenciada da árvore anterior para determinar quais nós devem ser alterados no DOM real para refletir essa alteração. na vista. Embora essa seja uma abordagem muito inteligente para fazer atualizações eficientes do DOM, existe uma sobrecarga para manter todas essas árvores virtuais do DOM e diferenciá-las para determinar o que alterar no DOM real. No momento, essa sobrecarga é bastante compensada pelos benefícios de desempenho, mas à medida que o DOM nativo é aprimorado com o tempo, a escala muda na outra direção. Preocupo-me com a forma como os aplicativos React podem envelhecer e, em três anos, eles serão muito mais lentos do que as coisas que lidam com o DOM mais diretamente. Essa abordagem DOM virtual é um pouco mais difícil, e outras bibliotecas como Polymer foram capazes de implementar abordagens muito eficientes para lidar com o DOM de uma maneira muito mais sutil.

Atualização para desempenho: Uma das bibliotecas que encontrei há algum tempo faz o que eu acho que é um trabalho melhor para gerenciar atualizações no DOM. É a biblioteca Dom Incremental do Google, e acho que o fato de funcionar com o dom no local e não precisar criar uma 'cópia virtual' é uma abordagem muito mais limpa, com muito menos sobrecarga de memória. Veja mais aqui: http://google.github.io/incremental-dom/#about

Componentes declarativos versus imperativos

Uma das coisas que você sempre ouve quando se fala em componentes do seu aplicativo é todos os benefícios de seus componentes serem declarativos. Dentro da visão de mundo do React, tudo é agradável e declarativo. Você escreve JavaScript que retorna marcação e React cola tudo junto para você. E isso é ótimo se você estiver lidando com um aplicativo totalmente novo que usa apenas React e nada mais. Você pode escrever algum componente e, desde que você esteja dentro de uma parte do DOM React, é tão simples quanto colocar essa tag na página para consumir seu componente.

Mas assim que você pega esses componentes e os usa fora do React, as coisas ficam muito mais confusas. Como a maneira como os componentes React são transformados em tags está completamente fora do que os padrões da web fornecem, nada além de React sabe como fornecer uma maneira declarativa de consumir esses componentes. Se eu quiser colocar componentes React em uma visualização Backbone existente que esteja usando modelos do Handlebars, você deverá renderizar uma div fictícia no modelo com uma classe ou ID que possa ser usada como identificador e, em seguida, escreva JavaScript imperativo para encontre essa div fictícia e monte seu componente nela. Você tem um aplicativo Express.js que usa modelos do servidor? Bem, é a mesma música e dança. Uma página JSP? Você ri, mas ainda existem muitos aplicativos para usá-los. A menos que você seja algum tipo de inicialização sem código existente, você precisará escrever algum encanamento para reutilizar seus componentes React em muitos aplicativos. Enquanto isso, Polymer alcança componentes através do padrão Web Components e, usando a especificação de elemento personalizado, Polymer pode criar componentes que o navegador apenas sabe consumir de forma nativa. Posso colocar um componente Polymer em uma página JSP, um modelo Express.js, uma exibição ASP.NET, uma exibição Backbone ... dentro de um componente React mesmo. Literalmente, em qualquer lugar que você possa usar HTML, você pode consumir um componente Polymer. As pessoas que estão planejando reutilizar estão buscando os padrões da Web, porque os padrões são os contratos que facilitam a compatibilidade entre as coisas. O YouTube continua criando cada vez mais coisas em Polymer (fonte: http://react-etc.net/entry/youtube-is-being-rebuilt-on-web-components-and- polímero ), e só posso imaginar que o aspecto baseado em padrões de Polymer seja a razão. O player do YouTube no meio da página do YouTube pode ser transformado em um componente que inclua uma fonte de conteúdo como uma propriedade e, de repente, qualquer pessoa que queira incorporar o player do YouTube em sua página pode literalmente usar exatamente o mesmo código de player que o YouTube está usando , e eles podem fazer isso simplesmente colocando uma tag na página deles.

Resumo

Eu posso ver que definitivamente existem alguns aspectos atraentes de React agora. Se tudo o que você está usando é React, é possível criar alguns widgets e alguns componentes e reutilizá-los declarativamente em todo o lugar. Mas acho que React teria sido muito melhor se tivesse usado alguns dos padrões de componentes da Web para conseguir o que faz, em vez de sair e criar um navegador dentro de um navegador e um mecanismo complexo para mantenha tudo sincronizado.

6
Dogs