Save 10% off ANY FITC event with discount code 'slideshare'
See our upcoming events at www.fitc.ca
OVERVIEW
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.
VVVIP Call Girls In Connaught Place ➡️ Delhi ➡️ 9999965857 🚀 No Advance 24HRS...
Reaching for the Future with Web Components and Polymer
1. Page 0 of 59
Reaching for the Future With
Web Components and Polymer
Michael Labriola - @mlabriola
Senior Consultant w/ Digital Primates
2. 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>
3. 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
4. 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?
5. 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
6. 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
7. ...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
8. 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
9. 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
10. 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
11. 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
12. 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>
13. 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
14. 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>";
15. 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
16. 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.
18. 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.
19. 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
20. 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
24. Styles
The Shadow also forms a boundary. Styles don’t cross
unless you let them. So you to keep control of this area
25. 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
27. 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">
28. 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.
29. 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
30. 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>
31. 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.
32. 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…
33. 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.
34. 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
35. In the meantime… explore
http://www.polymer-project.org/
http://www.x-tags.org/
http://www.w3.org/TR/2013/WD-components-intro20130606/
36. Page 0 of 59
Reaching for the Future With
Web Components and Polymer
Michael Labriola - @mlabriola
Senior Consultant w/ Digital Primates