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

Battle of Frameworks: Polymer - Meetup Paris Web Components 2016-09

Battle of Frameworks: Polymer - Meetup Paris Web Components 2016-09

The Paris Web Components Meetup proposed a session to compare several component-oriented frameworks, where each speaker made the case of his or her favorite framework and showed the implementation of the same webapp done with the chosen framework. I did the Polymer presentation.

6f8d092fec403f766c734ce36e1eef93?s=128

Horacio Gonzalez

September 21, 2016
Tweet

Transcript

  1. @LostInBrittany #polymer @pariswebComps Battle of Frameworks: Polymer Horacio Gonzalez @LostInBrittany

  2. @LostInBrittany #polymer @pariswebComps Horacio Gonzalez @LostInBrittany Cityzen Data http://cityzendata.com Spaniard

    lost in Brittany, developer, dreamer and all-around geek
  3. @LostInBrittany #polymer @pariswebComps Polymer Ecosystem DevTools, task runner...

  4. @LostInBrittany #polymer @pariswebComps Until Google I/O 2016 The Polymer library

    is for building components out of components out of components out of components out of components...
  5. @LostInBrittany #polymer @pariswebComps How do I write an app with

    Polymer? How about routing? Use your favorite routing lib, in a custom element How about i18n? Use your favorite i18n lib, in a custom element How about xyz? Use your favorite xyz lib, in a custom element To be fair, it felt too light for big apps Until Google I/O 2016
  6. @LostInBrittany #polymer @pariswebComps And then, in Google I/O 2016 Image:

    FlickrHivemind Polymer App-Toolbox
  7. @LostInBrittany #polymer @pariswebComps Polymer App-Toolbox Everything you needed to build

    big apps • app-layout elements • app-route • app-localize-behavior • app-storage • Polymer CLI
  8. @LostInBrittany #polymer @pariswebComps • If you write a full Polymer

    app The App-Toolbox is all you need • If you use Polymer components in an app Use the tools you have with your app DevTools? Task Runner?
  9. @LostInBrittany #polymer @pariswebComps Let's look to your app A challenge

    is a challenge, show us the code! Image: Ken Shirriff
  10. @LostInBrittany #polymer @pariswebComps An app? More, a PWA!

  11. @LostInBrittany #polymer @pariswebComps Routing How navigation works

  12. @LostInBrittany #polymer @pariswebComps app-location & app-route <app-location> speaks with browser

    location <app-route> enables declarative, self-describing routing <app-location route="{{route}}"></app-location> <app-route route="{{route}}" pattern="/:page" data="{{data}}" tail="{{tail}}"> </app-route>
  13. @LostInBrittany #polymer @pariswebComps Route cascading Route cascading allows for complex

    routing Child <app-route> can be declared in any element... <app-location route="{{route}}"></app-location> <app-route route="{{route}}" pattern="/:page" data="{{data}}" tail="{{tail}}"> </app-route> <app-route route="{{subroute}}" pattern="/:id" data="{{subrouteData}}"> </app-route>
  14. @LostInBrittany #polymer @pariswebComps Forms Creating, using and validating forms

  15. @LostInBrittany #polymer @pariswebComps Polymer ❤ Material Design Two canonical implementations:

    Android & Polymer MD is native in Polymer: paper-elements
  16. @LostInBrittany #polymer @pariswebComps <paper-input> <paper-input floatinglabel label="Type only numbers... (floating)"

    validate="^[0-9]*$" error="Input is not a number!"> </paper-input>
  17. @LostInBrittany #polymer @pariswebComps Why to choose Polymer? That's the wrong

    question
  18. @LostInBrittany #polymer @pariswebComps I ❤several JS frameworks

  19. @LostInBrittany #polymer @pariswebComps But I don't want to be locked

    in
  20. @LostInBrittany #polymer @pariswebComps Web-components simply work I can use (and

    I have used) my on:
  21. @LostInBrittany #polymer @pariswebComps A good pattern Use your framework for

    the app high level logic And use web-components for all the rest Now forcibly Polymer
  22. @LostInBrittany #polymer @pariswebComps Build a good catalog of components Your

    business logic inside web components A lifecycle different to the framework "Never again locked with a useless stack of directives"
  23. @LostInBrittany #polymer @pariswebComps Conclusion Image: dcplanet.fr That's all folks!

  24. @LostInBrittany #polymer @pariswebComps Thank you !