I've been searching for new technologies to make a website and I came across these web components. I like Polymerjs because I like Material Design also. What is its difference between Reactjs and Angularjs?
Well React and Angular have nothing to do with Web Components. But first things first.
Web Components are a new technology where you are building a complete seperated component of of something. For example an image slider. You have the markup, css and js seperated into this one compontent you are building. Which is a bit confusing at the beginning but in the end its pretty cool.
Because you can reuse your compontents that you've build for another project.
You are making your own html fake tags, for using the components. For example if you making your slider compontent you can use something like <slider></slider> and in your webcompontent you have something like
<div class="main-slider">
<div class="container">
<img src=...>
<img src=...>
<img src=...>
</div>
</div>And the js for the webcomponents will see your slider tag, and create the content of it into the shadow dom.
So you can basically build very clean markup which gets rendered later into something more complex. it is pretty cool, because of the seperation of components it's easier to make changes. You exactly knwo which component to change and you can be sure that this changes will effect only this one component.
And the difference between ReactJs and AngularJs... well that are two different things. AngularJs is a full MVW frontend framework. You can make interactive interfaces and views. It has two way-data binding so whenever you change something in the view the model gets changed too.
ReactJS however is a frontend framework, too. But only for the View Layer of your application. It's pretty cool, too. Because in react you are also building your components which can require other components and so on.
Reactjs has a concept of virtual dom and has a diff algorithm to see which state has changed and instead of rendering whole dom it only renders those properties which have changed thus it is a bit faster than angularjs. Sometimes people use reactjs within angularjs directives like ng-repeat to increase speed of their web app.
React, Angular, Polymer all let you build powerful websites. React and Angular are already successful now and would be safe bets. Polymer's success was in question in the last year because unlike the other frameworks it was contingent on Apple and Microsoft agreeing in a particular vision(web components). but MS and Apple are coming along now, just slowly. So if you're really attracted to Polymer's vision and you're willing to tolerate a little API turbulence and significant portion of your development will be in the next year or so, Polymer would be a great choice.
"You have the markup, css and js seperated into this one compontent you are building." - well, except for maybe the CSS part, this is pretty much what React is. I see React as being one possible implementation (or at least kinda similar) of Web Components before they become a wide-spread standard and get browser support. Am I missing something?
Web Components is the process of creating re-usable components, so instead of copying and pasting large blocks of HTML, you build a component which you can re-use.
The creators of Web Components introduced a couple of new concepts which I need to briefly cover before covering the components themselves ...
ShadowDOM, each component you create gets their own sandboxed DOM that runs on top of the normal DOM.
ShadowDOM is not supported by all browsers, Chrome and Opera supports it, Firefox partially supports it and as far as I know, IE/Edge and Safari has no support for ShadowDOM at all.
Why bother with a ShadowDOM at all, isn't the normal DOM good enough?
If you're doing a lot of DOM manipulation, having each element have their own DOM means better performance since everything you do will only apply to the ShadowDOM so your getElementById / Class / Name / etc will only have to search in your ShadowDOM and not the full DOM.
What about the browsers that doesn't support it?
The engineers created something called Polyfills.
polyfills.js(if we can call it that) will look at which browser is running, if a feature is natively supported, send it straight through, if not, do some magic to simulate the feature that's missing from the browser, almost likemodernizer.jsdoes, onlypolyfills.jsmakes a non-shadowDOM browser behave as if it had shadowDOM enabled and in the cases where custom tags are not supported, emulate custom tags as if they were allowed, etc.The components side of it is pretty simple, you create a new component, let's call it ScrollPanel, you define a tag for it,
<scroll-panel></scroll-panel>, give it some attributes which will be used to initialise the component,<scroll-panel scroll-x="true" scroll-y="false" height="200px" width="100px">......<scroll-panel>and then when you define the component, you can extend an existing component (in this case adivwould be perfect) and define what those attributes should do with the component, give that component its own CSS and its own JavaScript. A good practice is to not include colour in the component, only use CSS for layout and apply colour in a global style.In terms of packaging all these components into a single CSS and JS file, I don't know how that works, I've only briefly worked with Polymer Dart. Performance tuning of pages containing Web Components is probably worth a separate topic.