Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Mixing Web Components - Best Of Web 2016

Mixing Web Components - Best Of Web 2016

Horacio Gonzalez

June 10, 2016
Tweet

More Decks by Horacio Gonzalez

Other Decks in Technology

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