Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Polymer in the Real Life - Devoxx Fr 2016

Polymer in the Real Life - Devoxx Fr 2016


Horacio Gonzalez

April 21, 2016


  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 &

  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

  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

  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