Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09
-
Upload
horacio-gonzalez -
Category
Technology
-
view
127 -
download
3
Transcript of Battle of Frameworks: Polymer - Meetup Paris Web Components - 2016-09
@LostInBrittany#polymer @pariswebComps
Battle of Frameworks:Polymer
Horacio Gonzalez @LostInBrittany
@LostInBrittany#polymer @pariswebComps
Horacio Gonzalez
@LostInBrittany
Cityzen Datahttp://cityzendata.com
Spaniard lost in Brittany, developer, dreamer and all-around geek
@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...
@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
@LostInBrittany#polymer @pariswebComps
And then, in Google I/O 2016
Imag
e: F
lickr
Hiv
emin
d
Polymer App-Toolbox
@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
@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?
@LostInBrittany#polymer @pariswebComps
Let's look to your app
A challenge is a challenge, show us the code!
Imag
e: K
en S
hirr
iff
@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>
@LostInBrittany#polymer @pariswebComps
Route cascading
Route cascading allows for complex routingChild <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>
@LostInBrittany#polymer @pariswebComps
Polymer ❤ Material Design
Two canonical implementations: Android & Polymer
MD is native in Polymer: paper-elements
@LostInBrittany#polymer @pariswebComps
<paper-input>
<paper-input floatinglabel
label="Type only numbers... (floating)"
validate="^[0-9]*$"
error="Input is not a number!">
</paper-input>
@LostInBrittany#polymer @pariswebComps
Web-components simply work
I can use (and I have used) my on:
@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
@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"
@LostInBrittany#polymer @pariswebComps
Conclusion
Image: dcplanet.fr
That's all folks!