Mixing Web Components - Paris Web Components - 2015 09-16

@LostInBrittany#MixingWebComponents @pariswebComps
Mixing Web Components
Horacio Gonzalez
@LostInBrittany

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 some questions
But does it really works with
<inser techno here/>?
And what about the other
web components technologies?

Before summer
everything was ready
J'étais tranquille, j'étais pénard...

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

For several days I didn't slept
And tiredness began to take its toll

But it worked
My polymer-beers lab was rewritten in time

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

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

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

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

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

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 !

More Related Content