Mixing Web Components - Best Of Web 2016

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. @LostInBrittany
   #MixingWebComponents @bestofwebconf
   Polymer tour
   

   View Slide

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

   View Slide

6. @LostInBrittany
   #MixingWebComponents @bestofwebconf
   Build a world brick by brick
   Images: BitRebels & Brickset
   

   View Slide

7. @LostInBrittany
   #MixingWebComponents @bestofwebconf
   Variations of some questions
   But does it really works with
   ?
   And what about the other
   web components technologies?
   

   View Slide

8. @LostInBrittany
   #MixingWebComponents @bestofwebconf
   And one year ago 1.0 arrived
   It was time to really show off!
   

   View Slide

9. @LostInBrittany
   #MixingWebComponents @bestofwebconf
   So I decided a new approach
   The truth is in the code
   I FIND YOUR LACK OF
   SOURCE CODE DISTURBING
   

   View Slide

10. @LostInBrittany
    #MixingWebComponents @bestofwebconf
    Mixing webcomponents
    My challenge today
    

    View Slide

11. @LostInBrittany
    #MixingWebComponents @bestofwebconf
    Objectifs
    Using webcomponents from different
    libraries in an AngularJS webapp
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

15. @LostInBrittany
    #MixingWebComponents @bestofwebconf
    angular-polymer-beers
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. @LostInBrittany
    #MixingWebComponents @bestofwebconf
    And what about Angular 2
    Or other modern frameworks
    

    View Slide

23. @LostInBrittany
    #MixingWebComponents @bestofwebconf
    Modern frameworks
    support webcomponents
    Example Angular2-Polymer par @ManekiNekko
    https://github.com/webcomponents/angular-
    interop/
    

    View Slide

24. @LostInBrittany
    #MixingWebComponents @bestofwebconf
    Thank you !
    

    View Slide

25. @LostInBrittany
    #MixingWebComponents @bestofwebconf
    Web components polyfill
    Making developers life a bit easier
    

    View Slide