Three Google I/O videos about Web Components and Polymer

By -

The videos of the Google I/O 2014 talks have been online for a while now. Three of them are about Web Components and Polymer. This blog post briefly describes what they are about and mentions a few highlights, which may help you to decide which videos you want to watch.




The three talks are:



  1. “Polymer and the Web Components revolution” by Matt McNulty (38:47)

  2. “Polymer and Web Components change everything you know about Web development” by Eric Bidelman (36:13)

  3. “Unlock the next era of UI development with Polymer” by Rob Dodson (41:30)


If you need a quick primer to Web Components, you can look at slide 35ff of the slides for my talk “Six technologies that will change the web platform”.


Polymer and the Web Components revolution

Matt McNulty gives a broad overview of Web Components and Polymer, setting the stage for the remaining two talks.


McNulty explains why Web Components are important, then describes Polymer, which is a Web Components polyfill plus a convenience layer on top. The nice thing about Polymer’s new “Paper Elements” (UI components following Google’s new Material design language) is that they are custom elements. That means that they can be used with any HTML framework. They will work even better in the next versions of AngularJS and Ember.js, which explicitly support Web Components.


I found it interesting to hear that Polymer co-evolves with the Chrome platform: if Polymer encounters problems (e.g. jank), they are fixed in Chrome. Similar to Mozilla’s X-Tag, Polymer’s Web Component polyfill enables us to field-test web platform APIs before they are standardized.


Polymer and Web Components change everything you know about Web development

Eric Bidelman’s talk is mainly about the current state of Web Components. Polymer is mentioned occasionally, though. Highlights:



  • Web Components state of the union:

  • Problems solved by custom elements:

    • Cleaner DOM (markup encapsulated in custom elements)

    • Common widgets across frameworks

    • Better support for widgets in the platform and in dev tools

    • And more



  • Example that profits from HTML imports: Twitter Bootstrap. Two <link> elements for CSS and four <script> elements for JavaScript versus a single HTML import (of an HTML file packaging these elements).


Unlock the next era of UI development with Polymer

Rob Dodson goes deeply into the new Paper UI components and shows off some interesting UI-related functionality provided by Polymer. A few notes:



  • Goal: support multiple devices and app-like user interface. That’s not what HTML was originally built for.

  • Overview of Polymer’s Paper elements: Layout, Material, Theming, Transitions.

  • The ::shadow CSS pseudo-element and /deep/ CSS combinator enable you to reach inside shadow DOMs and style custom elements.

  • In Polymer, the <core-style> element can be used to share style information between elements, which helps with theming.


Polymer gives you declarative support for Flexbox, via HTML attributes.





I really like like the design of the Paper elements. You can see that a lot of thought has gone into making them work with both touch and pointer devices.




Text field: no input, yet.




Text field with input. The label slides to the top, warnings appear underneath.



Comments

Post a Comment

Popular posts from this blog

Steve Lopez and the Importance of Newspapers

By -
Image
It has been one year since I cancelled my subscriptions to The New York Times and the Los Angeles Times . In that time, I continued to read both publications online. My assessment of this experiment is that reading newspapers and journalism online is vastly inferior to the hard copy thrown on my porch each morning. So I restarted my subscription to the Los Angeles Times and I have made it a point to buy The New York Times as often as I pass one of those coin boxes or my local news stand. The catalyst for this re-evaluation resulted from catching the film, The Soloist on cable last week. I liked the movie, although the scenes I found most interesting were the ones that showed columnist Steve Lopez at work. I realized the book was sitting in my “to-read” stack, so I pulled it and began reading. The book, as I expected, is better than the film. Lopez clearly addresses the revolution occurring in journalism, and worries about his future with the paper even as he researches and writes...
Keep reading

The interoperability of Web Component polyfills

By -
At the moment, there are two polyfills for the upcoming Web Components standard (roughly, for widgets): Polymer by Google X-Tag by Mozilla Fortunately, the three ways of writing a Web Component (via the Polymer polyfill, via the X-Tag polyfill or by using the APIs directly) are interoperable. Quoting “ Custom Element Interoperability ” by the Polymer team: We’re happy to say that, yes, custom elements of any variety (be they Polymer, X-Tag or vanilla) can all happily coexist. The blog post explains how that works and provides an example that you can download from GitHub. Third Web Component polyfill: @b_lionel told me about Bosonic , which is partially based on Polymer and also interoperable .
Keep reading

Ideas for fixing unconnected computing

By -
I traveled quite a bit recently and got exposed to a negative aspect of current technology: Things work well if you have a solid internet connection with no traffic limits and are plugged into a power outlet. Otherwise, things do not work well at all. This blog post describes the problems that arise and suggests solutions. Managing data traffic Cell phones are quite good at conserving traffic, laptops much less so. This becomes a problem when your laptop has a mobile connection (e.g., via tethering or in a hotel with data caps). I once accidentally started iTunes in such a situation and immediately used up my daily allowance of traffic. Similarly, mobile email is frugal with traffic (only the current folder is updated, attachments are only downloaded on demand, etc.), desktop email is usually not. How can this be handled better? I’d like to see three traffic modes for all operating systems: “full”, “restricted”, “minimal”: In full traffic mode , all data transfers are allowed and happe...
Keep reading