Web Components are going to change everything you think you know about building for the web. For the first time, the web will have low level APIs allowing us to not only create our own HTML tags but also encapsulate logic and CSS. No more global stylesheet soup or boilerplate code! It’s a brave new world where everything is an element.
In my talk from DotJS, I walk through what Web Components have to offer and how to build them using modern tooling. I’ll show you Yeoman, a workflow of tools to streamline creating web-apps using Polymer, a library of polyfills and sugar for developing apps using Web Components in modern browsers today.
In this talk you will learn:
For example, to install Polymer's Web Component polyfills and the library itself, you can run this one liner:
bower install --save Polymer/platform Polymer/polymer
This adds a
bower_components folder and adds the above packages.
--save adds them to your app's bower.json file.
Later, if you wanted to install Polymer's accordion element you could run:
bower install --save Polymer/polymer-ui-accordion
and then import it into your application:
<link rel="import" href="bower_components/polymer-ui-accordion/polymer-ui-accordion.html">
To save time, scaffolding out a new Polymer app with all the dependencies you need, boilerplate code and tooling for optimizing your app can be done with Yeoman with this other one liner:
I also recorded a 30 minute bonus walkthrough of the Polymer Jukebox app I show in the talk.
Covered in the bonus video:
We also make use of Yeoman sub-generators for scaffolding our new Polymer elements. e.g to create the boilerplate for an element
foo we run:
yo polymer:element foo
which will prompt us for whether we would like the element automatically imported, whether a constructor is required and for a few other preferences.
The latest sources for the app shown in both talks are now up on GitHub. I’ve refactored it a little further to be more organized and a little more easy to read.
Preview of the app:
A few other articles that are worth checking out on the subject: