Beyond Polymer - JUG Summer Camp - 2015-09-18

@LostInBrittany#JSC2015 #BeyondPolymer
Speaker :
Horacio Gonzalez - @LostInBrittany
Beyond Polymer
Mixing Webcomponents

Horacio Gonzalez
@LostInBrittany
Cityzen Data
http://cityzendata.com
Spaniard lost in Brittany,
developer, dreamer and all-
around geek

Introduction
Because I love to tell old stories

Polymer tour

Web components == Revolution
Image: bu.edu

Build a world brick by brick
Images: BitRebels & Brickset

Variations of the same questions
But does it really works with
<inser techno here/>?
And what about the other
web components technologies?

The questions deserved answers
So I decided to prepare a new talk

I prepared everything before BreizhCamp
J'étais tranquille, j'étais pénard...

And the Google made me a gift
The gift of living interesting moments...

During a week sleep was optional
And tiredness began to take its toll

But it worked!
Everything was rewritten in time
And people seemed to like it!

Will it work today?
I had prepared a rather traditional slidedeck
Comparing Polymer with X-Tag and Bosomic
Explaining how to make them work together

But I decided a new approach
The truth is in the code
I FIND YOUR LACK OF SOURCE CODE
DISTURBING

Web Components
Reinventing the wheel... and this time
making it round

Example : the Google+ button
● If you want to place a Google+ button in your page

<div class="g-plusone" data-annotation="inline" data-width="300"
></div>

<script type="text/javascript">
(function() {
var po = document.createElement('script');
po.type = 'text/javascript';
po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(po, s);
})();
</script>

● And what I would like is simple
<g:plusone></g:plusone>

● To be fair, Google already makes it simpler
<script type="text/javascript" src="https://apis.google.com/js/plusone.js">
</script>...
<g:plusone></g:plusone>
● They create directives with JS to emulate components
○ AngularJS approach
○ Respecting the spirit of the future standard
○ Working in current browsers
Totally non standard...

Another example : the RIB
● If you're French, you know what a RIB is
○ A banking account identification number
● To show a RIB in HTML:
○ All styling & surface control must be done elsewhere by CSS and JS
● What I would like
○ A semantic tag
○ With encapsulated styling and surface controlling
<div class="rib">58496 87451 00014500269 74</div>
<x-rib banque="58496" guichet="87451" compte="00014500269" cle="74" />

But we already can do that!
● In most modern frameworks we can already do components, in
a way or another
○ And all those ways are different!
○ Using different JavaScript libraries
○ Almost no component sharing between frameworks
● W3C's works aim to make a standard way
○ Supported natively by all browsers
○ Allowing for component reuse

W3C standard
● Web Components standard is being worked at W3C
○ We all know what this means
■ Clue : HTML5
They will work for years, bickering and fighting
Browsers and devs will use the WiP document

The 4 pillars of the Web Components
● Templates
● Shadow DOM
● Custom Elements
● Imports

Templates
Image : Instructables
The clone wars

● Reusable blocks in the DOM with a new tag
● Content inside the tag is parsed but not interpreted
○ HTML not shown
○ Resources are not loaded
○ Scripts not executed
● Create the elements in page by cloning the template
The <template> tag
<template id="commentTemplate">
<div>
<img src="">
<div class="comment-text"></div>
</div>
</template>

Shadow DOM
Image: Springfield Punx
Join the shadowy side,
young padawan

Encapsulation
● Each component should have
○ Public interface
○ Private inner code
● When using a component
○ You manipulate the interface only
○ You don't need to know anything about inner code
○ No conflict between inner code and outside code

Your browser cheats on you
● Considerer this simple slider
○ How does the browser deal with it?
■ With HTML, CSS and JS!
○ It has a movable element, I can recover it's position
■ Why cannot see it in DOM tree?
Browsers hide DOM sub-trees for standard components
They have a public interface and hidden inner code
That's Shadow DOM!
<input id="foo" type="range">
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
</video>

My name is DOM, Shadow DOM
● Shadow DOM: ability of the browser to
○ Include a DOM subtree into the rendering
○ But not into the main document DOM tree
● In Chome you can see the Shadow DOM
○ By activating the option in Inspector

Looking into the Shadow
● For the slider :

Shadow DOM is already here
● Browser use it everyday...
○ For their inner needs
○ Not exposed to developers
● Web Components makes Shadow DOM available
○ You can use it for your own components

Example

Custom Elements
Image: The Brick Blogger
Elemental mayhem !

Custom elements : the HTML side
● An element encloses template, lifecycle and behaviour
○ Templates done with <template> tag

<template id="template">
<style>
...
</style>
<div id="container">
<img src="http://webcomponents.org/img/logo.svg">
<content select="h1"></content>
</div>
</template>

<x-component>
<h1>This is Custom Element</h1>
</x-component>

Custom elements : the JavaScript side
● An element encloses template, lifecycle and behaviour
○ JavaScript to define behaviour and register the element
var proto = Object.create(HTMLElement.prototype);
proto.createdCallback = function() {
// Adding a Shadow DOM
var root = this.createShadowRoot();
// Adding a template
var template = document.querySelector('#template');
var clone = document.importNode(template.content, true);
root.appendChild(clone);
}
var XComponent = document.registerElement('x-component', {
prototype: proto
});

Imports
Image: Brikipedia
Because you hate long files

● Custom elements can be loaded from external files
○ Using the link tag:
○ Only <decorator> and <element> are interpreted
○ The DOM of this document is available to script
○ Documents are retrieved according to cross-origin policies
Imports
<link rel="import" href="goodies.html">

Can I use?
Image: Christoph Hauf
If not, why are you telling us all this sh*t?

Are we componentized yet?

WebComponents.org

Polymer
Webcomponents for today's web

● A Google project
○ Introduced in Google I/O 2013
○ New type of library for the web
○ Built on top of Web Components
○ Designed to leverage the evolving web platform
Version 1.0 just released last week at Google IO
Oh yeah!
Polymer

● What does it means ?
○ Polymer is comprised of two efforts :
■ A paper platform to give Web Component
capabilities to modern browsers
● Shims for all modern browsers
● Shared with Mozilla x-tag project
■ A next-generation web framework built upon
this core platform
● Called Polymer Elements
Polymer

Polymer

Polymer elements

● Principes:
○ Everything is a component
■ Encapsulation is needed for a component oriented application
○ Extreme pragmatism
■ Boilerplate is bad
■ Anything repetitive should be re-factored into a component
● Handled by Polymer itself or
● Added into the browser platform itself
Polymer

● Principes:
○ Salt to taste
■ Use as much or as little of the framework as you wish.
● You want polyfills only : load polymer-
all/platform/platform.js
● You want extra bits : load polymer-
all/polymer/polymer.js
○ Polymer elements
Polymer

● Platform technologies are already functional
○ You can use it to add templates, shadow DOM, custom elements and imports
to your app
● Lots of examples in the site
Polymer

WebComponents
beyond Polymer
A whole world

● X-Tag is a small JavaScript library
○ created and supported by Mozilla
○ that brings Web Components capabilities
○ to all modern browsers
● Polymer vs X-Tag?
○ Different features and approaches
○ Mozilla and Google worked together
■ building the shared polyfills platform
○ More barebones approach
X-Tag?

● AngularJS directives allow to create custom elements
○ Same spirit, different implementation
AngularJS?
<!doctype html>
<html>
<head>
<title>Directive Test</title>
<script type="text/javascript" src="jquery.min.js" ></script>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="mydirectives.js"></script>
</head>
<body ng-app>
<div test-elem></div>
</body>
</html>

Google Web Components
From small widgets to full-scoped apps

Mozilla Brick

Bosonic

Web components polyfill
Making developers life a bit easier

Web components polyfill library
Set of polyfills built on top of the
Web Components specifications

What's in webcomponents.js?
● Web Components
○ Custom Elements .
○ HTML Imports
○ Shadow DOM
● DOM
○ WeakMap
○ Mutation Observers

Your own webcomponents!
Building directly over webcomponents.js

Or webcomponent libraries
Also built on top of webcomponents.js

Many webcomponents libraries
Based on the same polyfill

Mixing webcomponents
My challenge today

Objectifs
Using webcomponents from different
libraries in an AngularJS webapp

Will it work?
or

Base project: Angular Beers!
https://github.com/LostInBrittany/angular-beers

Let's show the code!
Image: dcplanet.fr
Coding is a superpower, my friends
https://github.com/LostInBrittany/beyond-polymer

angular-polymer-beers
Because directives are subpar webcomponents

angular-polymer-xtag-beers
Polymer and X-tags play along nicely

angular-polymer-react-beers
Thanks to Mathieu Ancelin (@TrevorReznik)

angular-polymer-xtag-react-beers
And they all are happy...

Thank you !

Beyond Polymer - JUG Summer Camp - 2015-09-18

More Related Content

What's hot (20)

Similar to Beyond Polymer - JUG Summer Camp - 2015-09-18 (20)

More from Horacio Gonzalez (20)

Recently uploaded (20)

Beyond Polymer - JUG Summer Camp - 2015-09-18