Thursday, November 13, 2014

Web Components are Real

Web Components are not another internet buzzword. Web Components are a collection of web browser constructs and standards that will modernize client side web development and improve the web design process overall. This is a long time in the making, but these are the missing building blocks (along with continued ECMAScript maturity) that are needed to bring web development on par with traditional structured programming languages and environments without the need the crazy hacks we have today.

The key standards behind Web Components include:
  • Shadow DOM: Finally DOM trees that don't step on each other. Modular DOM structures can exist and interact with each other.
  • Custom HTML Elements: HTML building blocks where each custom element can have encapsulated properties functions and events. Elements can exist in a hierarchy/nesting and look and act like native HTML elements.
  • HTML Imports: Import HTML pages and source files like other programming languages.
  • CSS Grid Layout: Table and grid layout done in a more intuitive way and more akin to how most client GUI frameworks handle widget layout.

These standards will impact low level frameworks such as jQuery, but will also change the way higher order client side frameworks like AngularJS, GWT, Ember, Knockout evolve over time and how they provide wiring, plugin and extension capability to their developers.

So get ready for Web Components. They are real and will finally bring modular and structured web programming to the web to support more robust, scalable and maintainable, extensible client side development frameworks.

P.S. Keep an eye on the Polymer project if you want to experiment with Web Components today. This client side framework, packages many of the emerging standards into a developer friendly API and programming model. But keep in mind that Polymer is not Web Components, it is just a project that demonstrates the power of these new Web Component standards.