Post on 09-Apr-2017
#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
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