In these years we are seeing multiple technologies on disposal for web development like:
Isomorphic React:
It provides a common code base shared among client and server.
Web Components :
Polymer.js shows the way of creating native element for the browser.
Both of these technologies are going in opposite direction.Which one a web developer should follow?Any suggestions/comments are welcome here.
React and Web Components are similar, but not the same. What's great about Web Components (or the idea at least, we're not quite there yet) is that you're supposed to be able to extend HTML with custom elements. The browser doesn't give you a <datepicker>
element? Throw in a Web Component that implements it! You don't have to worry about how it implements it, you just import it and then you can use it. Turns out that it has poor accessibility or poor browser support? Someone else will surely have created something better.
A big issue with Web Components currently though is that they add global names. So if there will ever be a de facto Web Components registry like NPM for Node, you will have a race for the best names. But with NPM that's not a huge issue, because you can name the variable what you want, like var Promise = require('bluebird');
. It tells you what it does. But a Web Component named blue-bird
would be terrible, since you won't have any idea what that does when reading the markup that uses it. So if that doesn't get fixed before Web Components are final, we'll end up with long, prefixed, wierd names to avoid name clashes.
Web Components are meant to be smallish components that are quite general. Things like a date picker, a select list with auto complete, a map element, etc. They are not meant to solve how you structure your application, but instead how we can reuse common elements between sites. So you might see custom elements like <date-picker>
but you won't see an index.html
with just <body><my-app></my-app></body>
where my-app
is a Web Component for your specific app. Well, maybe you'll see it, but that's not really the purpose of Web Components and it doesn't give you a lot of tools to do it.
React on the other hand is all about how you structure your application, and passing data between your components. You can pass plain Javascript objects as properties to React components, but the only thing you can pass as an attribute to a Web Component is a string. Which works for simple stuff, but not for your entire application.
They are not mutually exclusive since you'll probably see a lot of people using Web Components inside their React applications. But if you see anyone creating a Web Component that depends on React, please feel free to shout at them. Web Components are supposed to be isolated and reusable, and including a big library/framework like React inside one is an anti-pattern.