Polymer in the real life - Devoxx France - 2016 04-20
•
0 j'aime•377 vues
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.
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (14)
En vedette
En vedette (20)
Similaire à Polymer in the real life - Devoxx France - 2016 04-20
Similaire à Polymer in the real life - Devoxx France - 2016 04-20 (20)
Plus de Horacio Gonzalez
Plus de Horacio Gonzalez (20)
Dernier
Dernier (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