Polymer & PWA: Understanding the “why”

This talk was present during Google Developer Group Dev Fest 2017 at Bengaluru(Oct 7 2017) and Mumbai (28 Oct 2017).
The slide walks through the shortcomings of web platform and how web component solves them. Explains what is Polymer and how it can be used to build PWA.

Transcript

1. Polymer & PWA: Understanding the “why” @ashrith_kulai #UseThePlatform
3. @ashrith_kulai #UseThePlatform HTML was meant for • Text content • Images • Interlinking with other HTML docs
5. @ashrith_kulai #UseThePlatform Javascript was created for • Programmatic control of HTML • Adding behavior to HTML and Browser
6. @ashrith_kulai #UseThePlatform Evolution of browsers • Serve dynamic content from server side • More capabilities - HTML spec evolution • ES5
7. @ashrith_kulai #UseThePlatform Capable browsers led to • Complex processing at frontend - Web 2.0 • Patterns emerged into libraries/frameworks
8. @ashrith_kulai #UseThePlatform Framework Wars • Enabled complex frontend apps • Web Performance Race
9. @ashrith_kulai #UseThePlatform Where are we Today? • Complex abstract frameworks • Framework clutter + fragmentation • Complex build tools to extract performance • Workarounds for how the platform is today
10. @ashrith_kulai #UseThePlatform What did we lose? • Interoperability (we have reusability) • Simplicity
11. @ashrith_kulai #UseThePlatform What we didn’t anticipate? • Mobile Web • Most of the frameworks are humongous for mobile • Mobile CPUs don’t have heatsinks like desktop!!!
12. Let’s take a look at an example
14. @ashrith_kulai #UseThePlatform Built with <DIV> soup
15. @ashrith_kulai #UseThePlatform Forced Behavior <div class="tree-control">
16. @ashrith_kulai #UseThePlatform Mutation of HTML • HTML moved away from original purpose and capabilities • HTML was not meant for Web Apps
17. Time to redesign the HTML/Web
19. @ashrith_kulai #UseThePlatform Natural Behavior <tree-control>
20. Web Component Custom Element • Lets you define your own HTML tags
21. Web Component HTML Template • Enables you to define blocks of markup with the ability to inject dynamic content into
22. Web Component Shadow DOM • Gives you the ability to scope markup and styles in a separate DOM tree
23. Web Component HTML Import • Provides a way to include and reuse HTML documents in other HTML documents
24. Web Component Custom Element Shadow DOM HTML Import HTML Template
25. @ashrith_kulai #UseThePlatform Hey!! Popular frameworks already do something like that!
26. FRAMEWORKS (pseudo-parser) (pseudo-lifecycle) (handling DOM) Browser JS code How is it different? <tree-control> Browser native code Web Components (native parser) (native lifecycle) (handling DOM) <tree-control>
27. FRAMEWORKS (pseudo-parser) (pseudo-lifecycle) (handling DOM) Browser native code Web Components (native parser) (native lifecycle) (handling DOM) Browser JS code Where Does Polymer fit in? POLYMER (not a new framework) (helper library)
28. What is Polymer? Polymer is a JavaScript library that helps you create custom reusable HTML web components. @ashrith_kulai #UseThePlatform
29. What’s in Polymer? • Syntactic sugar around WC • Data system • Event system @ashrith_kulai #UseThePlatform
30. Sample Element HTML, CSS & JS all in single file
31. https://custom-elements-everywhere.com/
32. @ashrith_kulai #UseThePlatform Polymer Conclusion • Use the Platform • Interoperable • Web is now equipped to handle web apps
33. PWA with Polymer • Polymer-cli supports ◦ App shell architecture ◦ PRPL pattern ◦ Service worker ◦ HTTP/2 server push ◦ Unit testing ◦ Linter @ashrith_kulai #UseThePlatform
34. polymer.json • Entrypoint • App shell • Routes • Build flags
35. Polymer-cli: Presets Inside polymer.json
36. Polymer-cli: Overriding preset
37. Polymer-cli: Features
38. Source: End-to-End Polymer Apps with the Modern Web Platform (Chrome Dev Summit 2017)
39. Distribution of unbundled code with HTTP/2. One awesome thing that Polymer introduced @ashrith_kulai #UseThePlatform
40. @ashrith_kulai #UseThePlatform
41. Parent Children Properties Data and Event flow between the components
42. Parent Children Properties Events Data and Event flow between the components
43. Parent Children Properties Events Store Data and Event flow between the components dispatch(...) getState(...)
44. Parent Children Properties Events Store Data and Event flow between the components dispatch(...) getState(...) X
45. Data flow within the components Observed property: active: { type: Boolean, observer: '_activeChanged' } _activeChanged(newValue, oldValue) { this.toggleClass('highlight', newValue); }
46. Data flow within the components Observed property: active: { type: Boolean, observer: '_activeChanged' } _activeChanged(newValue, oldValue) { this.toggleClass('highlight', newValue); } Computed property: first: String, last: String, fullName: { type: String, computed: 'computeFullName(first, last)' }, computeFullName(first, last) { return first + ' ' + last; }
47. Data flow within the components Observed property: active: { type: Boolean, observer: '_activeChanged' } _activeChanged(newValue, oldValue) { this.toggleClass('highlight', newValue); } Computed property: first: String, last: String, fullName: { type: String, computed: 'computeFullName(first, last)' }, computeFullName(first, last) { return first + ' ' + last; } One way Data binding: <div hidden$=[[active]]>
48. Data flow within the components Observed property: active: { type: Boolean, observer: '_activeChanged' } _activeChanged(newValue, oldValue) { this.toggleClass('highlight', newValue); } Computed property: first: String, last: String, fullName: { type: String, computed: 'computeFullName(first, last)' }, computeFullName(first, last) { return first + ' ' + last; } One way Data binding: <div hidden$=[[active]]> Two way data binding: <input value="{{first::input}}" type="text"> <input value="{{last::input}}" type="text">
49. @ashrith_kulai #olaforweb Polyspector Demo • Polyspector - A Chrome extension https://chrome.google.com/webstore/detail/polyspector/naoehbibkfilaolkmfiehggkfjndlhpd?utm_ source=chrome-ntp-icon
52. @ashrith_kulai #UseThePlatform Building a PWA using Polymer Drawbacks • Needs polyfills for unsupported browsers (28KB) • IE support - 11+ • Flaky support on UC browser, older versions of Android browser & webviews • No server side rendering
53. @ashrith_kulai #UseThePlatform Building a PWA using Polymer Advantages • Lightweight 10KB and fast • Simple yet very powerful • Bye bye css preprocessors • Configurable build • Integrates well with any framework Drawbacks • Needs polyfills for unsupported browsers (28KB) • IE support - 11+ • Flaky support on UC browser, older versions of Android browser & webviews • No server side rendering
55. @ashrith_kulai #UseThePlatform Overall conclusion • Exciting days ahead of us • Next billion Indian users • Better performance on mobile • The platform will offer better support for Web Apps