Chrome, HTML5, JavaScript, webdev

Web Components On Google Developers Live Israel (Part 1)

Google Developers Live Israel

Today, in our weekly Google Developers Live Israel show we spoke about HTML5 and web component. It was a macro level overview on this new edge of front-end development. This new project is composed of a group of technologies that should help us (web developers) create moderan web apps using HTML, CSS and JS. They do this by allowing toolkit makers to encapsulate their widgets and UI elements as easily reusable components.

We covered the main players:

  • Templates – We can think on it as a new HTML element. It allow us to inert chunks of clonable DOM that can be activated for later use (e.g MDV). You can think of it as objects you creating out of your class definition. This new ‘object’ can contain markup (=CSS) and script (=JS) so it’s much more powerful from the ‘just’ CSS that we have today. We can use it as a decorator to give new style and functionality to our custom (new) HTML element.
  • Custom elements – which can be looked as our toolbelt when we are coming to build a new web app and we wish to reuse ‘wheels’ and not reinvent them. We showed how to create new HTML elements by expanding HTML’s existing vocabulary.
  • Shadow DOM – It’s like the regular DOM you know (and love) but it’s down in the ‘shadows’ hidden from our eyes. It’s main goal is to give us encapsulations. It’s the glue that let us insert and work with our components. Think of a ‘tab’ component that you don’t need to ‘know’ about it’s style, functionality etc’. It will work for you and you can’t break it from your JS code because you forgot to use a namespace for your app logic.
  • Mutation Observers – and how to watch for changes in the DOM in the most efficient way.

My insertion points from the new google office

If you wish to give it a ride and test it for yourself…
You can do it with two easy steps:

  1. Use Chrome Canary
  2. Enable yourself:
    • Enable experimental WebKit features in about:flags
    • Enable experimental JavaScript in about:flags
    • Enable Show Shadow DOM in DevTools

Polyfills from github that will let you work with it today:

Model Driven View or the ‘end results’ of this effort – MDV aims to get HTML to provide the essential foundation underlying most templating libraries. Further, it aims to allow dynamic web applications to declare the relationship between their data and presentation: updates to application data are reflected in the presentation and user input is assigned to application data. You can also start using AngularJS and its ability to create web components. It seems that lots of feedback that is being generated from developers that are working with angularJS (and other libraries) will be part of the final spec – so give it a try.


 Web Components / Custom Elements

Shadow DOM

Mutation Observers

…And here is Web Components Part 2 Show


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s