Mixing Web Components - Best Of Web 2016

Mixing Web Components - Best Of Web 2016

6f8d092fec403f766c734ce36e1eef93?s=128

Horacio Gonzalez

June 10, 2016
Tweet

Transcript

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

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

    lost in Brittany, developer, dreamer and all- around geek
  3. @LostInBrittany #MixingWebComponents @bestofwebconf Introduction Because I love to tell old

    stories
  4. @LostInBrittany #MixingWebComponents @bestofwebconf Polymer tour

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

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

    BitRebels & Brickset
  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. @LostInBrittany #MixingWebComponents @bestofwebconf And one year ago 1.0 arrived It

    was time to really show off!
  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. @LostInBrittany #MixingWebComponents @bestofwebconf Mixing webcomponents My challenge today

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

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

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

    Coding is a superpower, friends
  14. @LostInBrittany #MixingWebComponents @bestofwebconf angular-polymer-beers Because directives are subpar webcomponents

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

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

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

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

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

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

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

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

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

    @ManekiNekko https://github.com/webcomponents/angular- interop/
  24. @LostInBrittany #MixingWebComponents @bestofwebconf Thank you !

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

    bit easier