@LostInBrittany#MixingWebComponents @bestofwebconf

Mixing Web ComponentsHoracio Gonzalez @LostInBrittany

@LostInBrittany#MixingWebComponents @bestofwebconf

Horacio Gonzalez

@LostInBrittany

Cityzen Datahttp://cityzendata.com

Spaniard lost in Brittany, developer, dreamer and all-around geek

@LostInBrittany#MixingWebComponents @bestofwebconf

Introduction

Because I love to tell old stories

@LostInBrittany#MixingWebComponents @bestofwebconf

Polymer tour

@LostInBrittany#MixingWebComponents @bestofwebconf

Web components == Revolution

Image: bu.edu

@LostInBrittany#MixingWebComponents @bestofwebconf

Build a world brick by brick

Images: BitRebels & Brickset

@LostInBrittany#MixingWebComponents @bestofwebconf

Variations of some questions

But does it really works with <inser techno here/>?

And what about the other web components technologies?

@LostInBrittany#MixingWebComponents @bestofwebconf

And one year ago 1.0 arrived

It was time to really show off!

@LostInBrittany#MixingWebComponents @bestofwebconf

So I decided a new approach

The truth is in the code

I FIND YOUR LACK OF SOURCE CODE DISTURBING

@LostInBrittany#MixingWebComponents @bestofwebconf

Mixing webcomponents

My challenge today

@LostInBrittany#MixingWebComponents @bestofwebconf

Objectifs

Using webcomponents from different libraries in an AngularJS webapp

@LostInBrittany#MixingWebComponents @bestofwebconf

Base project: Angular Beers!

https://github.com/LostInBrittany/angular-beers

@LostInBrittany#MixingWebComponents @bestofwebconf

https://github.com/LostInBrittany/beyond-polymer

Let's show the code!

Image: dcplanet.fr

Coding is a superpower, friends

@LostInBrittany#MixingWebComponents @bestofwebconf

angular-polymer-beers

Because directives are subpar webcomponents �

@LostInBrittany#MixingWebComponents @bestofwebconf

angular-polymer-beers

@LostInBrittany#MixingWebComponents @bestofwebconf

angular-polymer-xtag-beers

Polymer and X-tags play along nicely

@LostInBrittany#MixingWebComponents @bestofwebconf

angular-polymer-xtag-beers

@LostInBrittany#MixingWebComponents @bestofwebconf

angular-polymer-react-beers

Thanks to Mathieu Ancelin (@TrevorReznik)

@LostInBrittany#MixingWebComponents @bestofwebconf

angular-polymer-react-beers

@LostInBrittany#MixingWebComponents @bestofwebconf

angular-polymer-xtag-react-beers

And they all are happy...

@LostInBrittany#MixingWebComponents @bestofwebconf

angular-polymer-xtag-react-beers

@LostInBrittany#MixingWebComponents @bestofwebconf

And what about Angular 2

Or other modern frameworks

@LostInBrittany#MixingWebComponents @bestofwebconf

Modern frameworks support webcomponents

Example Angular2-Polymer par @ManekiNekkohttps://github.com/webcomponents/angular-

interop/

@LostInBrittany#MixingWebComponents @bestofwebconf

Thank you !

@LostInBrittany#MixingWebComponents @bestofwebconf

Web components polyfill

Making developers life a bit easier