Polymer in the real life - Devoxx France - 2016 04-20
•
0 likes•377 views
In the last two years I've been speaking a lot about web components and Polymer in conferences and user-groups, sharing a vision of the upcoming web-component revolution. But after these introductory talks I often got the same question: "that seems great... but does it works in Real Life?" Ah, the pesky real life question... In this talk I'm going to tackle that question in the best way I know: I'm going to tell you my experience of almost two full years web applications with Polymer in the real life, for real projects in a real enterprise with real costumers, and all the lessons I've learnt from it. You will heard why did I choose Polymer, how I dealt with the 0.x versions lifecycle, the good points and the bad ones too, how I did integrate lots of 3rd part libs into a component architecture and how now I'm able to create full fledge Progressive Web Apps using Polymer in a simple way without having to deal with the complexity of Angular/React/Whatever JS, but also how to integrate your components into those frameworks if needed.
Recommended
Recommended
More Related Content
What's hot
What's hot (14)
Viewers also liked
Viewers also liked (20)
Similar to Polymer in the real life - Devoxx France - 2016 04-20
Similar to Polymer in the real life - Devoxx France - 2016 04-20 (20)
More from Horacio Gonzalez
More from Horacio Gonzalez (20)
Recently uploaded
Recently uploaded (20)
Polymer in the real life - Devoxx France - 2016 04-20
- 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
- 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
- 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?
- 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
- 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?
- 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