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.

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 !