Understand the shortcomings of web platform and how web component solves them. Explains what is Polymer and how it can be used to build PWA.

1. Polymer & PWA:
Understanding the “why”
@ashrith_kulai#UseThePlatform

2. @ashrith_kulai#UseThePlatform
HTML was meant for
● Text content
● Images
● Interlinking with other HTML docs

4. @ashrith_kulai#UseThePlatform
Javascript was created for
● Programmatic control of HTML
● Adding behavior to HTML and Browser

5. @ashrith_kulai#UseThePlatform
Evolution of browsers
● Serve dynamic content
● More capabilities
● ES5

6. @ashrith_kulai#UseThePlatform
Capable browsers led to
● Complex processing at frontend
● Patterns emerged into libraries/frameworks

7. @ashrith_kulai#UseThePlatform
Framework Wars
● Enabled complex frontend apps
● Web Performance Race

8. @ashrith_kulai#UseThePlatform
Where are we Today?
● Complex abstract frameworks
● Framework clutter
● Complex build tools to extract performance
● Workarounds for how the platform is today

9. @ashrith_kulai#UseThePlatform
What did we lose?
● Interoperability (we have reusability)
● Simplicity

10. @ashrith_kulai#UseThePlatform
What we didn’t anticipate?
● Mobile Web
● Most of the frameworks are humongous for mobile
● Mobile CPUs don’t have heatsinks !!!

11. Let’s take a look at an example

13. @ashrith_kulai#UseThePlatform
Built with <DIV> soup

14. @ashrith_kulai#UseThePlatform
Forced Behavior
<div class="tree-control">

15. @ashrith_kulai#UseThePlatform
Mutation of HTML
● HTML moved away from original purpose and
capabilities
● HTML was not meant for Web Apps

16. Time to redesign the HTML/Web

18. @ashrith_kulai#UseThePlatform
Natural Behavior
<tree-control>

19. Web Component
Custom Element
● Lets you define your
own HTML tags

20. Web Component
HTML Template
● Enables you to define
blocks of markup with
the ability to inject
dynamic content into

21. Web Component
Shadow DOM
● Gives you the ability to
scope markup and
styles in a separate
DOM tree

22. Web Component
HTML Import
● Provides a way to
include and reuse
HTML documents in
other HTML
documents

23. Web Component
Custom Element
Shadow DOM
HTML Import
HTML Template

24. @ashrith_kulai#UseThePlatform
Hey!! Popular frameworks already do
something like that!

25. FRAMEWORKS
(pseudo-parser)
(pseudo-lifecycle)
Browser JS code
How is it different?
<tree-control>
Browser native code
Web Components
(native parser)
(native lifecycle)
<tree-control>

26. 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)

27. What is Polymer?
Polymer is a JavaScript library that
helps you create custom reusable
HTML web components.
@ashrith_kulai#UseThePlatform

28. What’s in Polymer?
● Syntactic sugar around WC
● Data system
● Event system
@ashrith_kulai#UseThePlatform

29. Sample Element
HTML, CSS & JS all in single file

30. https://custom-elements-everywhere.com/

31. @ashrith_kulai#UseThePlatform
Polymer Conclusion
● Use the Platform
● Interoperable
● Web is now equipped to handle web apps

32. PWA with Polymer ● Polymer-cli supports
○ App shell architecture
○ PRPL pattern
○ Service worker
○ HTTP/2 server push
○ Unit testing
○ Linter
@ashrith_kulai#UseThePlatform

33. polymer.json

34. Polymer-cli: Features
Inside polymer.json

35. Polymer-cli: Features

36. Polymer-cli: Features

37. Distribution of unbundled code
with HTTP/2.
One awesome thing that Polymer introduced
@ashrith_kulai#UseThePlatform

38. @ashrith_kulai#UseThePlatform

39. @ashrith_kulai#olaforweb
Polyspector Demo
● Polyspector - A Chrome extension
https://chrome.google.com/webstore/detail/polyspector/naoehbibkfilaolkmfiehggkfjndlhpd?utm_
source=chrome-ntp-icon

40. @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

43. @ashrith_kulai#UseThePlatform
Building a PWA using Polymer
Advantages
● Lightweight 10KB and fastest
● 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

45. @ashrith_kulai#UseThePlatform
Overall conclusion
● Exciting days ahead of us
● Next billions Indian users
● Better performance on mobile
● The platform will offer better support for Web Apps