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