Polymer in the Real Life - Devoxx Fr 2016

Transcript

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