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

A Treasure Hunt Without The Treasure

By -
Image
I have written previously on LocalSchoolDirectory.com about a former student of mine lost in community college hell. Such is the educational reality in America these days that one must wade through a lot of crap to get to a decent university and a desired program of study. This is the case for Elda , a student much too smart for her particular ring of Dante’s Inferno . However, she hasn’t allowed her woefully deficient education experience to damage her sharp sense of humor. Logging on the other night, I found her latest rant lodged in my inbox. A new semester brings yet more grievances from the land of allegedly higher education. She listed her most pressing pet peeves: “Expensive college textbooks that are assigned merely because the professor must assign a book or is too lazy to make his own multiple choice exams and thus, I must go buy a $200 book for a class I have already taken in high school.” “Taking a class I have already taken in high school because a 3 on the AP exam is n
Keep reading

Drop a ping-pong ball in the clown’s mouth

By -
Image
I've always looked upon Nigel Farage as an English amusement. He reminds me of rows of fair-ground clowns that amused me greatly as a child in Australia. The heads swivelled constantly to the left and the right, and the trick consisted of guessing the exact moment to drop your ping-pong ball down the clown's throat, so that it ended up falling into the right spot and winning something. Today, I don't think the prize would justify my efforts. On the other hand, the ping-pong ball might shut up Farage.
Keep reading