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.

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:KenShirriff

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 !