How do Web Components stack up to popular libraries and frameworks in use today? Taylor Savage speaks to the products built with Polymer in the Polymer Summit Keynote. How does this compare to other types of solutions in the wild?
What is a Component?
A component should be a stand-a-lone piece, that can be dropped into almost anywhere, to reuse some kind of functionality. Components were popularized in Angular 1.x with directives. The HTML5 spec said we could use custom elements, this was really interesting. But these custom elements couldn't do anything for the users, this was aimed at improving semantics for developers. Developers created Angular Directives, that enabled implementers to use what looked like HTML tags, into the markup, and achieve custom functionality. That which was componentized into a simple tag.
A simple example:
You can choose to use a framework, you could roll your own with a collection of micro libraries, or you could roll your own from scratch. The overarching methodologies in implementing a framework fundamentally revolve around three primary concepts.
- Model/View (Angular, Backbone)
- Reactive/Functional (Angular 2, Vue, Cycle.js)
- Virtual DOM (React, Preact, Inferno)
When developing only for browsers with shadow DOM support, WCs facilitate rapid development. If you have to support all browsers, then you may spend time having to figure out why things don't work. It is not possible to step into, through, or over code that is executed directly by the browser. This means you have to resort to a lot of trial and error. When you prepare your code for production, you will need to vulcanize. This is putting together the HTML and CSS into a single file, and all of your JS into another file. A lot of times we are thinking about code splitting, HTTP2, and ES6 imports. Putting everything into a single markup file and js file, won't give you a lot of options. Adopting Polymer means you will be using Bower. The number of Bower users is dwindling.
- Model/View (Polymer)
- Reactive/Functional (SkateJS)
- Virtual DOM (Riot)
there are many other libs, these are just the ones I find interesting.
Principles of Component Architectures
- One-way dataflow
- Stateful and stateless components
- Split rendering engine
- Component inputs and outputs
Angular 2 and React — Just-in-Time and Ahead-of-Time compilers. With JiT and AoT