Web Components - What is the difference between Polymer and Reactjs?

Asked

Viewed 588 times

9

With the advancement of the web, we now also have the web components.

Google created and maintains a framework named Polymer, although it does not have much compatibility with several browsers.

At the other end we have Reactjs from Facebook, which also creates these "components".

What is the difference between the two technologies? Or they have the same purpose?

polymer react

  • a very similar question was made Stack Over Flow and was closed because it was based solely on opinions.

  • Rafael, I got to this link, but I was very confused, in short, I just wanted to know if they have very different, or has the same goal, which is to create web

  • Rod, one of the comments has a link, where the person claims to have posted the answer, is here. Maybe it’ll help!

  • Answer from him, it is very tedious, he only complains about reactjs and being beautiful or ugly to jhx writing

2 answers

7


Well, they both have different goals, and at some point they may even cross.

The Polymer aims to encapsulate html, js and css using the spec of import of . html, shadow gift and web components.

Import html file (html import)

ex: Adding an html menu to a site without html import:

<link rel="stylesheet" href="menu.css">
<script type="text/javascript" src="menu.js"></script>
<div class="menu">...</div>

ex: Adding the same menu with html import

<link rel="import" href="menu.html">

It’s actually quite simple, by importing the html file we can create a page ( like in the ex. menu.html ) and make it import html, css and js from Manu.
With this, just import the page to use the component ( html element ) and it imports the other files.

Shadow DOM

The DOM shadow creates a new context for the component by separating it from the page context, so you don’t need to worry for example id or out-of-context css collisions.

So when creating an element with ID 'item', do not worry about having another element with that same ID inside the page where the component will be rendered.

HTML component (web Component)

The short form html component is a way to encapsulate component creation through html tags.
Instead of having to create html and then run javascript:

<div id="menu"></div>
$("#menu").criaMenu({});

Just register the component and then call the tag.

<meuMenu />

O React in turn, has no concern (at least for the time being) of organizing your files using html import or creating web Components. The goal of React is to create html/javascript components and render it performatively in the browser using the virtual DOM.

The Virtual DOM is a diff mechanism, which makes all the html manipulation happen in memory before being rendered in the DOM, making it possible to check what has already been created and change only what has been changed.

5

As I have never used any of the two libraries, I reply with what I understand to be the basic difference between them: while Polymer is an attempt to give immediate support to the new W3C specifications which, together, are called Web Components, Reactjs is a completely independent framework for these specifications.

The goal of the two is similar (creating encapsulated and reusable components for use in web applications), but the way each library works seems to be completely different.

Browser other questions tagged polymer react

You are not signed in. Login or sign up in order to post.