Components, the future of HTML development
Or why you should stop using a third-party library to deal with your custom UI elements
I recently made a project named Furaito (フライト, flight in Japanese). It’s a simple app that checks your emails to find your last flights. It uses Polymer, Import.io and Gmail API. You can check the demo here and the source code here.
Before I write a blog post about how I built this app, let me explains you web components, the root of Polymer.
As you know, the Web has been continuously evolving, even more these last years because of the need of apps working on every platform, the mobile, the realtime.
So far, CSS evolved with a lot of new styling features in its third version. We created preprocessors to make it easier to develop with it.
JavaScript got its preprocessors, and its sixth version is coming soon (modern browsers have already partial support).
But HTML didn’t really evolve. We have now semantic & multimedia tags, but the way we write them didn’t change and preprocessors don’t help that much. We need a change.
Web Components!
When you develop a complex web app, you know that HTML debugging is painful. The depth of your DOM is damn long, and you don’t want to open all elements again and again in your devtools after each refresh of the page.
So what’s this revolution?
Web components bring four new features to help you writing your HTML in a better way:
Templates
Forget the time when you had to wrap your templates into an ugly scrip tag:
<script type=”text/tpl”>Now you have a dedicated tag for that.
First benefit, you will have your syntax coloration back in your IDE.
Secondly, even if there are scripts or videos inside, none of them will be executed until the template is used.
Thirdly, the elements inside your template aren’t considered as part of your DOM until you use them. Clean separation.
HTML Import
You hate to add your templates in your views because you have nowhere else to put them? Me too. Now with HTML import, you can import HTML pages where your templates and scripts tags will be written (DRY).
No need to make XHR requests anymore to do lazy-loading. Good point, the browser will request only one time your imported files. So no need of being afraid to duplicate execution of your scripts. You can import from your imported files too. Importception!
Shadow DOM
At first, it was hard for me to understand this feature. Why would I like to have sub DOMs? Well to have a perfect sandbox. As you know, it’s painful to check if your components names don’t collides with externals elements (Facebook Login, Timeline widget, Google Maps, etc.).
With Shadow DOM, you can do whatever you want inside your component, it will not impact the parent DOM.
Good news, the CSS is sandboxed too, there aren’t id collisions. Yeah, no need to write very long unique id or class!
- http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/
- http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-201/
- http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom-301/
Custom Elements
The last but not least feature of web components. In AngularJS, you will use directives to create your own elements. So what’s the difference with Custom Elements? Instead having a library dealing with personalized elements, you can have them recognized directly by the browser engine!
They have their own prototype, methods, properties, lifecycle callbacks (element created, attached, detached, attributes changed). Isn’t that cool ☺ ?
In conclusion, Web Components are a much cleaner way to create HTML UI elements. They are sandboxed, importables, clonables in your templates and have their own logic. No need to have an external script to manage them. Their support isn’t still complete, but there are already polyfills (scripts which provide facilities that aren’t built into old browsers).
I’m going to talk more about Polymer in my next article but if you can’t wait, you have to know that it is made on top of web components with a lot of sugar: two-way data binding, bunch of logic & UI components (which can be reused in your components, that’s the point), template syntax a la AngularJS, etc.
Have a look to the talk of Addy Osmani at LXJS, which resumes well these technologies : http://addyosmani.com/blog/video-componentize-the-web-talk-from-lxjs/
