This talk cover three main subjects:
- State of the union – What has change in the past 3 years
- Problems solved by web components – When it comes to build complex web applications, there are many ways we can do things better. In this section we will see how/why.
- Thinking in components – What are the implications when you coming to design and build web apps.
== Psst… It’s in raw format – I will polish it after I/O is over ==
State of the union
Once many years ago… We had HTML4 with all its problems. Later, well few years back, HTML5 was the answer for everything. It specifically, tried to show developers what can be done on the web modern platform and moreover APIs browser vendors could add to help developers boost their productivity. In the past 18 months we saw a lot of things like: templates, shadow dom, data binding etc’. It’s been a long journey. Now, we have Polymer.
What is polymer?
Polymer is opinionated way on top of web components. The great news is that Chrome 36 – is the first browser that will have it all! Opera as well thanks to Blink. Firefox – coming along. IE – there is hope. Safari – They remove it on valentine day! but there are signs they will bring it back into webkit.
What are the main problems do web components solve?
The time before web components was challenging in term of maintaining the building block of your site/app. A good example is the polymer site that is composed from few components. If you open chrome dev-tools on a web app like gmail you will see that HTML didn’t keep up – A huge soup of html tags that are very hard to navigate. The good news are that with custom elements you can declare a new element (e.g tabs, calendar etc’). The usage is powerful as you can extend elements and use other developers work. We integrated with the browser / DOM. Mutation observers and query selectors are now at our hands.
The interoperability give us every framework compatible with the dom.
In the past we had mustache and other hacks. But with this new ability we have template at the client side which won’t be visible to the user until we instance it. Think on it as classes and objects. It’s very powerful way to build complex application.
Two main aspect to remember:
All polymer objects are shadow dom by default.
You add styles to your shadow dom. You can use IDs without worry to scope. It’s private to your element. Later we can add (content) tag and let our users insert their data.
Change the way we develop. We don’t need to re invent the wheel each time. A cool toolbar, tabs, widget etc’ you can just use it. Declare it after you import it and here you go!
Reusable stuff is important. It will let us develop faster with smarter building blocks.
Btw, you can import a component that import anoter one and again and again. So you have now a dependency management as well.
Polymer’s material design elements
Check it out live at: http://polymer-change.appspot.com/#58 and play with the batmen button at the bottom.
How to interact with APIs
By composing elements we building our web app. It’s native to the browser as it is a combination of tags. Then, when we use title or drag able=true it will continue to work.
Google got 250+ APIs and you can find on GitHub – googlewebcomponents.github.io a growing collection of components that will let you work with these APIs with a (big) smile. This collection of components, let developers reuse APIs without starting from zero. As we said, small step to men… I hope we could have all the web elements hosted on GitHub soon.
The (great) slides that Eric made are over at: polymer-change.appspot.com
Enjoy you next project on the web.