Web Components
are the future present.
My definition
Web Componets are custom elements that behave like standard HTML elements and are easy to reuse and don't interfer with other elements.
Key Goals of Web Components
- Encapsulation - keep component logic isolated
- Isolation - keep component internals hidden
- Reusability - make features easy to reuse
- Native - expose standard event APIs
- Customizable - style and extendable
- Declarative - expressive markup
Web Components are 4 technologies
- Custom Elements (encapsulation, declarative)
- HTML Imports (reusability)
- Templates (encapsulation, reusability)
- Shadow DOM (isolation)
Fair warning
The Spec is not finalized, a polyfill is needed,
and API changes are possible.
Vanilla Javascript Example
Vanilla Javascript
- Just the native APIs
- Most flexibility
- Can be efficient
- Great for simple
|
- Most work to implement
- Opportunity for bad design
- Lacks supporting tools
- Best practices unknown
|
X-Tag
- Cleaner API
- Lifecycle and events
- Mixins and utilities
- Provides support for IE9+
|
- No Shadow DOM (by default)
- Documentation lacking
- No two way data binding
- Manual templating
|
Polymer
is a two part toolkit. It contains a set of polyfills, and a framework to develop custom elements.
http://polymer-project.org
Polymer
- Custom elements as APIs
- Two way data binding
- Rich framework
- Docs are growing
|
- Active development
- Loads assets
- Alpha
- IE10+
|
Web Components using AngularJS
- Extensive APIs
- Declarative markup
- Lots of flexibility
- Strong templating
|
- No styling isolation
- Difficult to reuse
- Needs Angular application
- Doesn't use native APIs
|
Web Components do not solve
- External dependency management (like jQuery)
- Accessibility requirements
- Duplication of features, the same as jQuery plugin duplication
- Doesn't enforce quality of componentization
Other considerations
- Packaging options: Polymer has Vulcanize, Grunt/Gulp/etc tasks
- Favor simplicity over complexity
- Limit dependencies
- Make web components like native elements