Reaching for the Future with Web Components and Polymer

50 %
50 %
Information about Reaching for the Future with Web Components and Polymer

Published on November 18, 2013

Author: fitc_slideshare

Source: slideshare.net

Description

with Michael Labriola
Presented live in Boston on Nov 7-8, 2013 at FITC's Web Unleashed 2013

Web Components allow us to view web applications as a set of encapsulated, maintainable and reusable components, an approach which is necessary for scalability and large applications. However, they rely on the use of emerging web platform features such as the Shadow DOM, HTML Imports and Custom elements, which currently have limited browser support. But thanks to the Polymer project - a set of polyfills and an application framework using these principles – Web Components can be used today. They are bleeding edge, likely to change a bit and simultaneously insanely cool and undeniably useful. Michael Labriola invites attendees to learn how to integrate these pieces into their processes today, to bring sanity and reuse to their worlds as a result.

Page 0 of 59 Reaching for the Future With Web Components and Polymer Michael Labriola - @mlabriola Senior Consultant w/ Digital Primates

Web Components Put simply, Web Components are an attempt to let you write custom components that can be used like this: <body> Sales:<br> <my-super-cool-chart id="coolChart"> </ my-super-cool-chart > </body>

What in the world is Polymer? A library built on top of Web Components. Allows us to use Web Components today in modern browsers 3 main pieces • A set of polyfills • Web application framework • Set of UI components

What are we going to cover? Web Components, specifically: What in the world are web components? What problem are they trying to solve? How do they work? Can I actually use these things? What does it mean to my app/development process?

Bleeding Edge Web Components are beyond leading edge. As of this moment, they do not work in their entirety in any browser A good portion of the functionality is available in Chrome Canary if you turn on all of the experimental WebKit and JavaScript features

Why am I talking about this? I do believe web components are a significant part of our future I think understand their goal and vision is crucial to the next few years I think they will change a lot before they are final

...and? You can still play with flavors of Web Components to a large extent through polyfills today Unless you skydive to work or love framework code more than sleep, you may want to avoid putting this all into production today

Given that... Why Components? A few minor reasons you may like the idea, first: Encapsulation • • • • Manageable Reuse Hiding complexity and implementation Dealing with duplicated IDs Dealing with CSS scoping / propagation

Why? And then: [More] even playing field • Using the same tricks the browser uses Ease of distribution Appropriate technology uses • Markup in markup not strings or code

How do they work? Web Components are a draft specification, but they rely on a number of other puzzle pieces, including: Templates Decorators Shadow DOM Imports Custom Elements

Templates The concept of templates is prolific and nearly selfexplanatory. Their use takes a bit more effort: Inactive DOM Fragment Easily Clone-able Easily Change-able

State of the Intersection People use templates today, they tend to take on two forms, first: <div id="productTemplate" style="display:none"> <img src="/images/products/{{product_id}}.png"> <div class="name"></div> <div class="description"></div> </div>

The Reality Which, as Eric Bidelman of Google nicely points out: Is good, because were are creating markup in markup and working with the DOM Is bad, because its active DOM, so the image still tries to load on startup • 404 (Not Found) http://localhost/images/products/%7B%7Bproduct_id%7D%7D.png Is bad, because either we deal with global styles for these things or we have to scope all of our styles manually and deal with collisions

State of the Intersection Second form, we use strings: <script id="productTemplate" type="text/x-template"> <img src="/images/products/{{product_id}}.png"> <div class="name"></div> <div class="description"></div> </script> OR template = "<div> <img src="/images/products/{{product_id}}.png"> <div class="name"></div> <div class="description"></div> </div>";

The Reality Which makes me sad… •String parsing •No real way to do validation •Especially if stored remotely, is a great way to open yourself up to attacks

Built In Templates You define them with the template element <template id="productTemplate"> <div> <img src=""> <div class="name"></div> <div class="description"></div> </div> </template> This is parsed but it’s not active. It’s not rendered.

Using It DEMO, if you will

Decorators Decorators are the next concept in the web component stack but… “Decorators, unlike other parts of Web Components, do not have a specification yet.” –W3C …so, lets go ahead and skip these for today.

Shadow DOM Shadow DOM is at the heart of the whole component concepts It’s encapsulation. Its used by the browsers today to implement their own controls Ultimately its about hiding implementation details and exposing an interface… music to my ears

Shadow DOM The name and the technical explanation sometimes get in the way of the concept. Put simply, the user sees this: Photo by Photo by: Mark Kaelin/TechRepublic

Shadow DOM The browser sees this: Photo by Photo by: Mark Kaelin/TechRepublic

Shadow Host/Root

Rendering

Styles The Shadow also forms a boundary. Styles don’t cross unless you let them. So you to keep control of this area

Styles This, by default, goes both ways… meaning we aren’t worried about collisions. Outside styles don’t affect shadow content Styles defined in here are scoped locally

Shadow DOM Demo Another DEMO, please

HTML Imports HTML imports are about importing and sharing HTML content. Why? Well, reuse, it facilitates the reuse of templates and provides us a fundamental need if we are going to share an encapsulated chunk we might call a component. <link rel="import" href="goodies.html">

HTML Imports Last word on this… Imports aren’t supported pretty much anywhere yet, however, there are polyfills. Imports are blocking. So, your page will act as though it needs this content before it can render.

Custom Elements Elements are the key to putting this together. Custom Elements are DOM elements that can be defined by a developer. They are allowed to manage state and provide a scriptable interface. In other words, they are the shell of what will become our component

Custom Elements Defining a custom element like this: <element extends="button" name="fancy-button"> </element> Allows you to use that custom element in your own markup: <div> <fancy-button></fancy-button> </div>

Custom Elements You can use the concepts we previously discussed, templates, Shadow DOM, etc. from within a custom element. Further, custom elements give you a set of Lifecycle callbacks so you can know things like when you are inserted into the DOM, removed and ready. This means you can define the visual aspects of a custom element in mark up and the code in script.

Custom Element in Script You can also register custom elements in script directly using: document.register( 'option-group' ); Which turns out to be a really convenient thing because…

Reality Check Most of this doesn’t work at all. More specifically, the <element> approach to building your custom elements doesn’t work yet. In fact, it seems to have left Chrome Canary for the moment.

Light, tunnel, something This is where Polymer and other polyfills (such as x-tags) come in They let us play today and give feedback for tomorrow Please remember, this is pre-alpha software

In the meantime… explore http://www.polymer-project.org/ http://www.x-tags.org/ http://www.w3.org/TR/2013/WD-components-intro20130606/

Page 0 of 59 Reaching for the Future With Web Components and Polymer Michael Labriola - @mlabriola Senior Consultant w/ Digital Primates

Add a comment

Related presentations

Related pages

Reaching for the Future with Web Components and Polymer - FITC

Overview. Web Components allow us to view web applications as a set of encapsulated, maintainable and reusable components, an approach which is necessary ...
Read more

Web Components

A curated collection of web apps and websites using Polymer. ... Web Components have been an controversial subject that surfaced the ... and future of the ...
Read more

NCDevCon — North Carolina's Premier Web & Mobile Conference

NCDevCon Session Spotlight: Reaching for the future with Web Components and Polymer
Read more

Welcome - Polymer 1.0

Using Web Components. Polymer leverages web components, a new set of standards designed to provide reusable components for the web.
Read more

Google’s Polymer and the future of web UI frameworks

Google’s Polymer and the future of web UI frameworks ... Talks at Google I/O 2013: “Web Components: A Tectonic Shift for Web Development” by Eric ...
Read more

Polymer.js: The Future of Web Application Development?

... The Future of Web Application ... Brother i have been looking for a confident introduction to web components and Polymer and i must admit it ...
Read more

Web Components: Web’s Polymer Future | Abhishek Tiwari

Web Components Explained, Component model for the web. About; Articles; Hacking; ... Web Components: Web's Polymer Future By Abhishek Tiwari June 12th, ...
Read more

Would you invest more time in learning Angular or Polymer ...

Would you invest more time in learning Angular or Polymer/Web Components? ... It seems like the future of web development is going to involve a lot of what ...
Read more