Mixing Web Components - Best Of Web 2016

Transcript

1. 1.

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

2. 2.

   @LostInBrittany #MixingWebComponents @bestofwebconf Horacio Gonzalez @LostInBrittany Cityzen Data http://cityzendata.com Spaniard

   lost in Brittany, developer, dreamer and all- around geek
3. 3.

   @LostInBrittany #MixingWebComponents @bestofwebconf Introduction Because I love to tell old

   stories
4. 4.

   @LostInBrittany #MixingWebComponents @bestofwebconf Polymer tour

5. 5.

   @LostInBrittany #MixingWebComponents @bestofwebconf Web components == Revolution Image: bu.edu

6. 6.

   @LostInBrittany #MixingWebComponents @bestofwebconf Build a world brick by brick Images:

   BitRebels & Brickset
7. 7.

   @LostInBrittany #MixingWebComponents @bestofwebconf Variations of some questions But does it

   really works with <inser techno here/>? And what about the other web components technologies?
8. 8.

   @LostInBrittany #MixingWebComponents @bestofwebconf And one year ago 1.0 arrived It

   was time to really show off!
9. 9.

   @LostInBrittany #MixingWebComponents @bestofwebconf So I decided a new approach The

   truth is in the code I FIND YOUR LACK OF SOURCE CODE DISTURBING
10. 10.

    @LostInBrittany #MixingWebComponents @bestofwebconf Mixing webcomponents My challenge today

11. 11.

    @LostInBrittany #MixingWebComponents @bestofwebconf Objectifs Using webcomponents from different libraries in

    an AngularJS webapp
12. 12.

    @LostInBrittany #MixingWebComponents @bestofwebconf Base project: Angular Beers! https://github.com/LostInBrittany/angular-beers

13. 13.

    @LostInBrittany #MixingWebComponents @bestofwebconf https://github.com/LostInBrittany/beyond-polymer Let's show the code! Image: dcplanet.fr

    Coding is a superpower, friends
14. 14.

    @LostInBrittany #MixingWebComponents @bestofwebconf angular-polymer-beers Because directives are subpar webcomponents

15. 15.

    @LostInBrittany #MixingWebComponents @bestofwebconf angular-polymer-beers

16. 16.

    @LostInBrittany #MixingWebComponents @bestofwebconf angular-polymer-xtag-beers Polymer and X-tags play along nicely

17. 17.

    @LostInBrittany #MixingWebComponents @bestofwebconf angular-polymer-xtag-beers

18. 18.

    @LostInBrittany #MixingWebComponents @bestofwebconf angular-polymer-react-beers Thanks to Mathieu Ancelin (@TrevorReznik)

19. 19.

    @LostInBrittany #MixingWebComponents @bestofwebconf angular-polymer-react-beers

20. 20.

    @LostInBrittany #MixingWebComponents @bestofwebconf angular-polymer-xtag-react-beers And they all are happy...

21. 21.

    @LostInBrittany #MixingWebComponents @bestofwebconf angular-polymer-xtag-react-beers

22. 22.

    @LostInBrittany #MixingWebComponents @bestofwebconf And what about Angular 2 Or other

    modern frameworks
23. 23.

    @LostInBrittany #MixingWebComponents @bestofwebconf Modern frameworks support webcomponents Example Angular2-Polymer par

    @ManekiNekko https://github.com/webcomponents/angular- interop/
24. 24.

    @LostInBrittany #MixingWebComponents @bestofwebconf Thank you !

25. 25.

    @LostInBrittany #MixingWebComponents @bestofwebconf Web components polyfill Making developers life a

    bit easier