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
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.
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
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
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
46.
47.
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
https://github.com/graynorton/chat-view-summit-16
Data Flow in Polymer Elements and Apps (Polymer Summit 2016)
interoperabilita - vzájemně spolupracovat, poskytovat si služby
Do Less & Be Lazy technique
https://www.youtube.com/watch?v=hHC9EOJzrQk&index=16&list=PLNYkxOF6rcICc687SxHQRuo9TVNOJelSZ
Performance je meren pomoci casu
Firebase Form - https://jsfiddle.net/StartPolymer/s2bs3re9/
https://www.polymer-project.org/2.0/docs/about_20
Web Native
Service Workers 60% - Chrome, Opera, Firefox
HTTP/2 protokol nyní podporuje 77% prohlížečů na celém světě