![Page 1: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/1.jpg)
#DevoxxFR
Polymer in the Real Life
Horacio Gonzalez @LostInBrittany
1
![Page 2: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/2.jpg)
#DevoxxFR
Horacio Gonzalez@LostInBrittany
http://cityzendata.com
Spaniard lost in Brittany, developer, dreamer and all-around geek
![Page 3: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/3.jpg)
#DevoxxFR
Introduction
3
Because I love to tell old stories
![Page 4: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/4.jpg)
#DevoxxFR
Polymer tour 2014-2015
![Page 6: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/6.jpg)
#DevoxxFR
Build a world brick by brick
Imag
es: B
itReb
els
& Br
icks
et
![Page 7: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/7.jpg)
#DevoxxFR
Variations of the same questions
Does it work in real life?
Imag
e: id
eas.
lego
.com
![Page 8: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/8.jpg)
#DevoxxFR
But I couldn't answer...
I wasn't free to speak about my work at Cityzen Data
![Page 9: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/9.jpg)
#DevoxxFR
Until early this year...
Warp 10 went open source in January 2016!
Imag
e: F
lickr
Hiv
emin
d
![Page 10: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/10.jpg)
#DevoxxFR
Warp 10
![Page 11: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/11.jpg)
#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
![Page 12: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/12.jpg)
#DevoxxFR
So now at last I can say it
Polymer *really* works in real life
![Page 13: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/13.jpg)
#DevoxxFR
Why Polymer?
13
"But it would be easier in AngularJS!"
![Page 14: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/14.jpg)
#DevoxxFR
I was kinda an AngularJS fanboy
![Page 15: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/15.jpg)
#DevoxxFR
Until I hit a wall
![Page 16: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/16.jpg)
#DevoxxFR
Enter Web Components & Polymer
WebComponents, a modular approach to webapps
![Page 17: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/17.jpg)
#DevoxxFR
Web Components
Encapsulated, reusable and composable widgets for the Web Platform
![Page 18: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/18.jpg)
#DevoxxFR
Polymer
Lets you build encapsulated, re-usable elements that work just like HTML elements, to use in building web applications.
![Page 19: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/19.jpg)
#DevoxxFR
What have you build with Polymer?
19
At last I can answer!
![Page 20: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/20.jpg)
#DevoxxFR
Polymer is production ready
![Page 21: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/21.jpg)
#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/
![Page 22: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/22.jpg)
#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
![Page 23: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/23.jpg)
#DevoxxFR
Quantum, IDE for Warp 10
![Page 24: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/24.jpg)
#DevoxxFR
Quantum, IDE for Warp 10
![Page 25: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/25.jpg)
#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
![Page 26: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/26.jpg)
#DevoxxFR
QuantumViz / GeoQuantumViz
Visualization widgets for Warp 10
![Page 27: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/27.jpg)
#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
![Page 28: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/28.jpg)
#DevoxxFR
Widgets, apps, one shotsAnd a beer-themed tutorial: Polymer-beers
I've just done a hands-on labon Polymer-beers this afternoon
![Page 29: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/29.jpg)
#DevoxxFR
So what have I learnt?
![Page 30: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/30.jpg)
#DevoxxFR
Using non Polymer libraries
30
"I really want that functionality"
![Page 31: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/31.jpg)
#DevoxxFR
There is a library you want to use
![Page 32: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/32.jpg)
#DevoxxFR
How do I Polymerize it?
![Page 33: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/33.jpg)
#DevoxxFR
LostInBrittany/ace-widget
![Page 34: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/34.jpg)
#DevoxxFR
Let's try something harder...
![Page 35: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/35.jpg)
#DevoxxFR
And the result is as easy and painless...
![Page 36: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/36.jpg)
#DevoxxFR
Cross-brosing capabilities
36
"Your Polymer thing sucks on my Firefox…"
![Page 37: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/37.jpg)
#DevoxxFR
Polymer Chrome
WebComponents are native (and blazing fast!) in ChromeAnd in a few years, it will be native everywhere!
![Page 38: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/38.jpg)
#DevoxxFR
But how about Firefox? Safari? OMG... IE?
The answer was simple: HTML imports!
![Page 39: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/39.jpg)
#DevoxxFR
HTML Imports and polyfill
When imports aren't native, they are polyfilledAnd performance dies...
Imag
e: W
ilko.
com
![Page 40: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/40.jpg)
#DevoxxFR
Vulcanize!
Vulcanize follows HTML Imports and <script> tags to inline these external assets into a single page
![Page 41: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/41.jpg)
#DevoxxFR
Vulcanize!
![Page 42: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/42.jpg)
#DevoxxFR
Before vulcanize
73 requests, most of them are dreaded imports!
![Page 43: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/43.jpg)
#DevoxxFR
After vulcanize
5 request, no imports!
![Page 44: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/44.jpg)
#DevoxxFR
But what about modularity? Lazy loading?
![Page 45: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/45.jpg)
#DevoxxFR
web-component-shards
![Page 46: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/46.jpg)
#DevoxxFR
Lazy loading
Already possible with lazyRegister settingIt will be more central in next versions
Imag
e: ro
ssdo
ugla
s.co
.uk
![Page 47: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/47.jpg)
#DevoxxFR
Routing
47
"I want lots of different views in my app"
![Page 48: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/48.jpg)
#DevoxxFR
Routing is a basic feature, isn't it?
![Page 49: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/49.jpg)
#DevoxxFR
There was no routing component
"Integrating a routing library is easy""You can always use a 3rd part one"
![Page 50: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/50.jpg)
#DevoxxFR
Fear no more: carbon-route arrived!
Official routing solution for PolymerThe first of the new Carbon Elements
![Page 51: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/51.jpg)
#DevoxxFR
Remind: Polymer element catalog
Carbon Elements are the long awaited application-level elements
![Page 52: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/52.jpg)
#DevoxxFR
Conclusion
52
My time is running out!
![Page 53: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/53.jpg)
#DevoxxFR
Polymer is a superbe solution
![Page 54: Polymer in the real life - Devoxx France - 2016 04-20](https://reader035.vdocument.in/reader035/viewer/2022081605/58ea4a461a28abc4698b5bdf/html5/thumbnails/54.jpg)
#DevoxxFR
Thanks!
Do we have time for some questions?
54