#DevoxxFR

Polymer in the Real Life

Horacio Gonzalez @LostInBrittany

1

#DevoxxFR

Horacio Gonzalez@LostInBrittany

http://cityzendata.com

Spaniard lost in Brittany, developer, dreamer and all-around geek

#DevoxxFR

Introduction

3

Because I love to tell old stories

#DevoxxFR

Polymer tour 2014-2015

#DevoxxFR

Web components == Revolution

Imag

e: b

u.ed

u

#DevoxxFR

Build a world brick by brick

Imag

es: B

itReb

els

& Br

icks

et

#DevoxxFR

Variations of the same questions

Does it work in real life?

Imag

e: id

eas.

lego

.com

#DevoxxFR

But I couldn't answer...

I wasn't free to speak about my work at Cityzen Data

#DevoxxFR

Until early this year...

Warp 10 went open source in January 2016!

Imag

e: F

lickr

Hiv

emin

d

#DevoxxFR

Warp 10

#DevoxxFR

A software platform that

• Ingests and stores data• Manipulates and analyzes data• Is dedicated to data from sensors, meters, IoT

and any real or virtual probe

Warp 10

#DevoxxFR

So now at last I can say it

Polymer *really* works in real life

#DevoxxFR

Why Polymer?

13

"But it would be easier in AngularJS!"

#DevoxxFR

I was kinda an AngularJS fanboy

#DevoxxFR

Until I hit a wall

#DevoxxFR

Enter Web Components & Polymer

WebComponents, a modular approach to webapps

#DevoxxFR

Web Components

Encapsulated, reusable and composable widgets for the Web Platform

#DevoxxFR

Polymer

Lets you build encapsulated, re-usable elements that work just like HTML elements, to use in building web applications.

#DevoxxFR

What have you build with Polymer?

19

At last I can answer!

#DevoxxFR

Polymer is production ready

#DevoxxFR

But it wasn't in 2014

We put our first Polymer app in production on 2014 with Polymer 0.4Full story: http://blog.cityzendata.com/2015/02/07/behind-CES-colors/

#DevoxxFR

CES colors was quite a challenge

And it worked!

● Technology wasn't mature and changed quickly○ We followed the evolution and updated the app often

● Cross-browsing rendering and full responsiveness needed○ On computer & smartphone, Android & iPhone…

● Rich graphic components using canvas et SVG○ First experience integrating libraries in Polymer

#DevoxxFR

Quantum, IDE for Warp 10

#DevoxxFR

Quantum, IDE for Warp 10

#DevoxxFR

Quantum is a complete application

● Write and execute WarpScript scripts, plot results ○ Integrating non Polymer libraries : nvd3, ace editor…○ Many custom components

● Several vues to execute WarpScript and to push and delete data○ A router is needed■ At first page.js was encapsulated in a Polymer element■ Then we changed to excess-router, done with Polymer ■ Soon changing aghain for the official solution, carbon-route

● Lots of components, lots of imports○ Vulcanize used to build the releases○ Sharding used to avoid monolithic approach and to make easier

element re-use

#DevoxxFR

QuantumViz / GeoQuantumViz

Visualization widgets for Warp 10

#DevoxxFR

Functionally rich● Widget must be integrable everywhere ○ From full Polymer apps to plain old static pages, from AngularJS to ReactJS○ Even in Apache Zeppelin notebooks

(B.O.F. RiakTS/WarpScript on thursday evening)○ Any modern browser, with reasonable performances

● Several modes ○ Either sending WarpScript to a Warp 10 to get data or

Receiving data from other components / applications○

● Lots of components, lots of imports○ Vulcanize used to build the releases○ Sharding used to avoid monolithic approach and to make easier

element re-use

#DevoxxFR

Widgets, apps, one shotsAnd a beer-themed tutorial: Polymer-beers

I've just done a hands-on labon Polymer-beers this afternoon

#DevoxxFR

So what have I learnt?

#DevoxxFR

Using non Polymer libraries

30

"I really want that functionality"

#DevoxxFR

There is a library you want to use

#DevoxxFR

How do I Polymerize it?

#DevoxxFR

LostInBrittany/ace-widget

#DevoxxFR

Let's try something harder...

#DevoxxFR

And the result is as easy and painless...

#DevoxxFR

Cross-brosing capabilities

36

"Your Polymer thing sucks on my Firefox…"

#DevoxxFR

Polymer Chrome

WebComponents are native (and blazing fast!) in ChromeAnd in a few years, it will be native everywhere!

#DevoxxFR

But how about Firefox? Safari? OMG... IE?

The answer was simple: HTML imports!

#DevoxxFR

HTML Imports and polyfill

When imports aren't native, they are polyfilledAnd performance dies...

Imag

e: W

ilko.

com

#DevoxxFR

Vulcanize!

Vulcanize follows HTML Imports and <script> tags to inline these external assets into a single page

#DevoxxFR

Vulcanize!

#DevoxxFR

Before vulcanize

73 requests, most of them are dreaded imports!

#DevoxxFR

After vulcanize

5 request, no imports!

#DevoxxFR

But what about modularity? Lazy loading?

#DevoxxFR

web-component-shards

#DevoxxFR

Lazy loading

Already possible with lazyRegister settingIt will be more central in next versions

Imag

e: ro

ssdo

ugla

s.co

.uk

#DevoxxFR

Routing

47

"I want lots of different views in my app"

#DevoxxFR

Routing is a basic feature, isn't it?

#DevoxxFR

There was no routing component

"Integrating a routing library is easy""You can always use a 3rd part one"

#DevoxxFR

Fear no more: carbon-route arrived!

Official routing solution for PolymerThe first of the new Carbon Elements

#DevoxxFR

Remind: Polymer element catalog

Carbon Elements are the long awaited application-level elements

#DevoxxFR

Conclusion

52

My time is running out!

#DevoxxFR

Polymer is a superbe solution

#DevoxxFR

Thanks!

Do we have time for some questions?

54