Web Components

1. Polymer
Josef Ježek
Polymerosaurus @ 3BT software s.r.o.

2. Stack Overflow Div Soup
nests divs 10 levels deep

3. Facebook Div Soup

5. Gross spaghetti code

6. Mobile web development is hard ● 60 FPS (frames per second)
● Responsive to the touch
● Different screen sizes
● Slow mobile network

7. Polymer Shop Demo
Try the Shop demo app to experience
a Progressive Web App in action.

8. DevFest Pilsen
2016
Progressive Web App in action
Hoverboard template

9. Web Components

10. What are Web Components?
Collection of standards that allow the building reusable components.
● Templates - Templating engine on browser
● Shadow DOM - Encapsulated DOM and styling
● HTML Imports - Import document with CSS,HTML,JS
● Custom Elements - APIs to define new HTML elements

11. Native <video> element

12. Custom Element

13. Web Components use DOM as framework

14. Build reusable elements

15. Reusable Custom Element Features
Live in git repository
Semantic versioning 0.x.x 1.x.x
Testable - web-component-tester
Demo
Forking
Installation over bower

16. Polymer Project
Open-source project.
From front-end developers working within the Chrome organization at Google.
Libraries, tools and patterns for build modern Progressive Web Apps.
Start new Web Standards.

17. Who’s using Polymer?

21. Material Design
Best components
implementing Material
Design principles.
<paper-elements>
<neon-elements>
github.com/ebidel/mat
erial-playground

24. Easy to create own powerful element

26. Polymer Template

27. Extending DOM elements

28. Data Flow
Properties go Down - Events go Up!
Data Flow in Polymer Elements and Apps (Polymer Summit 2016)

29. Why you should be excited
Developer productivity
● DOM + JS + CSS → no new APIs to learn!
● say what you mean → readability
Re-usability
● don’t repeat yourself
● easy interoperability with other frameworks - Angular, React, ...
● CSS isolation

30. Performance Patterns
Measure Performance with the RAIL Model
Use the PRPL pattern
Lazy-load non-critical components

31. Case study
Reduce the cost of element.
youtu.be/hHC9EOJzrQk?t=16m10s

32. Custom Icon Set
poly-icon.appspot.com
tool generates smaller icon
sets containing only the
icons you need
<iron-icon icon=”home-page:add”>
<iron-icon icon=”home-page:close”>

33. Performance Tips
from Polymer Summit 2016
Do Less & Be Lazy: Practical Performance Patterns for Polymer
youtu.be/hHC9EOJzrQk
Practical Performance
youtu.be/6m_E-mC0y3Y
Making Chromestatus.com a Lightning-Fast PWA
youtu.be/Rd0plknSPYU

34. Editor plugins
As-you-type Linting
As-you-type
documentation and
autocompletion
Jump to definition
github.com/Polymer/po
lymer-editor-service

35. Web Components Catalog
beta.webcomponents.org
customelements.io
elements.polymer-project.org

36. Awesome Elements
beta.webcomponents.org/collection/StartP
olymer/awesome-elements

37. Polymer Examples
1. Native Form - jsfiddle.net/StartPolymer/t1nvv6vb/
2. Ajax Form - jsfiddle.net/StartPolymer/0pkbkm7a/
3. Persistent Form - jsfiddle.net/StartPolymer/715npvya/
4. Firebase Form - jsfiddle.net/StartPolymer/s2bs3re9/

38. Firebase Form

39. Firebase Form

40. Firebase Form

41. Firebase Form

42. Firebase Form

43. Polymer Starter Kit
A starting point for
Polymer apps.

44. Polymer Starter Kit
Service Workers Cache
<app-route>
<app-drawer-layout>
<app-header-layout>
<iron-pages>

45. Progressive Web App Template
Starting point for building Progressive Web Apps based on Polymer
● Based on PRPL performance pattern
● App Shell architecture
● Lazy-loading App Shell and all pages with dependencies included icons, locales
● Connectivity independent using Service Worker
● Support for more themes
github.com/StartPolymer/progressive-web-app-template

48. Polymer 2.0
Standard ES6 classes
Standard Custom Elements v1, Standard Shadow DOM v1
Library size only 12KB
Modular set of mixins
Hybrid mode for backward compatibility to v1.0

49. #UseThePlatform
Let the browser do the hard work.
Take advantage of powerful standards.
● Web Components
● Service Workers
● HTTP/2

50. Thank you
Josef Ježek
Polymerosaurus @ 3BT software s.r.o.