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

Polymer EcosystemDevTools, task runner...

@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

An app? More, a PWA!

@LostInBrittany#polymer @pariswebComps

Routing

How navigation works

@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

Forms

Creating, using and validating forms

@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

Why to choose Polymer?

That's the wrong question

@LostInBrittany#polymer @pariswebComps

I ❤several JS frameworks

@LostInBrittany#polymer @pariswebComps

But I don't want to be locked in

@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!

@LostInBrittany#polymer @pariswebComps

Thank you !