Let's play with Polymer

A quick overview of Web Components and Polymer library with basic examples. Also, you can find information about available tools for the Polymer development.

Presented at GDG DevFest Spring 2016 in Kosice, Slovakia.

Transcript

1. Let’s play with Polymer +Oleh Zasadnyy @ozasadnyy GDG DevFest Spring 2016 Kosice,Slovakia
2. Web Components
3. Why should I care about Web Components?
4. <h1> 
 <ul>
 <p>
5. <div class="tabs">
 <ul>
 <li><a href="#tab-1"><span>Tab 1</span></a></li>
 <li><a href="#tab-2"><span>Tab 2</span></a></li>
 <li><a href="#tab-3"><span>Tab 3</span></a></li>
 <div id="tab-1">
 <h2>Tab 1 header</h2>
 <p>Lorem Ipsum is simply dummy text of the industry.</p>
 </div>
 <div id="tab-2">
 <h2>Tab 2 header</h2>
 <p>Lorem Ipsum is simply dummy text of the industry.</p>
 </div>
 <div id="tab-3">
 <h2>Tab 3 header</h2>
 <p>Lorem Ipsum is simply dummy text of the industry.</p>
 </div>
 </ul>
 </div>
6. Less markup. Less JS. Less confusion. <paper-tabs>
 <paper-tab>ITEM ONE</paper-tab>
 <paper-tab>ITEM TWO</paper-tab>
 <paper-tab>ITEM THREE</paper-tab>
 </paper-tabs>
7. Templates Native templating in the browser Shadow DOM Scoped CSS!!! + encapsulated markup Custom Elements Create new HTML elements and extend existing ones (native only) 
 HTML Imports Load custom element definitions and resources
8. <template is="dom-repeat" items="{{employees}}">
 <div># {{index}}</div>
 <div>First name: {{item.first}}</div>
 <div>Last name: {{item.last}}</div>
 </template>
9. Template is shipping pretty much everywhere
12. <link rel="import" href=“../paper-toolbar.html">
 <paper-toolbar></paper-toolbar>
15. Polymer
16. “The Polymer library provides a set of features for creating custom elements”
17. Applications Existing Frameworks Web Components built with Polymer (or not) Web Platform
18. Let’s create a first element
19. <!-- badge-element.html -->
 
 
 <link rel="import" href=“../polymer/polymer.html”>
 
 
 <script>
 Polymer({
 is: 'badge-element'
 });
 </script>
20. <badge-element></badge-element>
21. <!-- badge-element.html -->
 
 
 <dom-module id="badge-element">
 <template>
 </template>
 </dom-module>
22. Local DOM -The DOM an elements is in a charge of creating and managing
23. <!-- badge-element.html -->
 
 
 <dom-module id="badge-element">
 <template>
 <div>Wow, so easy</div>
 </template>
 </dom-module>
24. <!-- badge-element.html -->
 
 
 <dom-module id="badge-element">
 <template>
 <style>
 .amazing {
 color: navy;
 }
 </style>
 <div class="amazing">Wow, so easy</div>
 </template>
 </dom-module>
25. <badge-element></badge-element>
26. <!-- badge-element.html -->
 
 
 <dom-module id="badge-element">
 <template>
 <style>...</style>
 <div class="amazing">
 <content></content>
 </div>
 </template>
 </dom-module>
27. <badge-element>
 Awesome, it works!
 </badge-element>
28. Properties & data-binding
29. <!-- badge-element.html -->
 
 
 <dom-module id="badge-element">
 <template>
 <style>...</style> 
 <h3 class="name">Oleh</h3>
 <div class="country">Ukraine</div>
 </template>
 </dom-module>
30. Polymer({
 is: 'badge-element', 
 properties: {
 name: String, 
 country: String
 }
 });
31. Polymer({
 is: 'badge-element', 
 properties: {
 name: String, 
 country: String, 
 age: {
 type: Number, 
 value: 42
 }
 }
 });
32. Polymer({
 is: 'badge-element',
 properties: {
 name: String, 
 country: String, 
 age: {
 type: Number, 
 value: 42, 
 observer: '_ageChanged'
 }
 }
 });
33. Polymer({
 is: 'badge-element',
 properties: {
 name: String, 
 country: String, 
 age: {
 type: Number, 
 value: 42, 
 observer: '_ageChanged', 
 notify: true
 }
 }
 });
34. Polymer({
 is: 'badge-element',
 properties: {
 first: String, 
 last: String, 
 fullname: {
 type: String, 
 computed: '_computeFullName(first, last)'
 }
 }
 });
35. Polymer({
 is: 'badge-element',
 properties: {
 name: String, 
 country: String, 
 showCountry: {
 type: Boolean, 
 value: false
 }
 }
 });
36. <!-- badge-element.html -->
 
 
 <dom-module id="badge-element">
 <template>
 <style>...</style>
 <h3 class="name">{{name}}</h3>
 <div class="country" 
 hidden$=“{{showCountry}}">
 {{country}}
 </div>
 </template>
 </dom-module>
37. <badge-element name="Oleh"
 country="Ukraine"
 show-country>
 </badge-element>
38. Styling & Theming
39. <!-- badge-element.html -->
 
 
 <dom-module id="badge-element">
 <template>
 <style>
 .name { color: grey; } 
 .country {color: lightgray; } 
 </style> 
 <h3 class=“name”>{{name}}</h3>
 <div class=“country”>{{country}}</div>
 </template>
 </dom-module>
40. <!-- badge-element.html -->
 
 
 <dom-module id="badge-element">
 <template>
 <style>
 .name { color: var(--name-font-color); }
 .country { ... }
 </style> 
 <h3 class="name">{{name}}</h3>
 <div class="country">{{country}}</div>
 </template>
 </dom-module>
41. <!-- my-theme.html -->
 
 
 <style is="custom-style"> 
 badge-element { 
 --name-font-color: blue; 
 --country-font-color: yellow;
 }
 </style>
42. <!-- badge-element.html -->
 
 
 <dom-module id="badge-element">
 <template>
 <style>
 :host { @apply(--badge-theme); }
 .name { ... }
 .country { ... }
 </style>
 <h3 class="name">{{name}}</h3>
 <div class="country">{{country}}</div>
 </template>
 </dom-module>
43. <!-- my-theme.html -->
 
 
 <style is="custom-style">
 badge-element {
 --badge-theme: { 
 padding: 20px;
 background: lightskyblue; 
 border: 2px solid lightgray; 
 border-radius: 5px;
 };
 --name-font-color: blue;
 --country-font-color: yellow;
 }
 </style>
44. Elements - LEGO blocks in a web
45. “There’s an element for that!”
48. Tools
49. Polygit A dev CDN serving assets from cdn.rawgit.com polygit.org
50. <base href=“http://polygit.org/components/">
 
 <link rel=“import”
 href=“polymer/polymer.html">
51. <component> [+<org>] + <ver>|:<branch>|* badge-element +ozasadnyy +* *Fetch the latest tag of ozasadnyy/badge-element
52. <head>
 <base
 href="https://polygit.org/badge-element +ozasadnyy+*/components/">
 <script
 src="webcomponentsjs/webcomponents- lite.min.js"></script>
 <link
 rel="import"
 href="badge-element/badge-element.html">
 </head>
 <body>
 <badge-element
 name="Oleh"
 country="Ukraine"
 show-country></badge-element>
 </body>
53. Polyserve Serving elements to a browser github.com/polymerlabs/polyserve
54. $ npm install -g polyserve $ cd seed‐element $ polyserve Starting Polyserve on port 8000 Serving components from bower_components
55. Web Component Tester Unit testing for Elements github.com/polymer/web-component-tester
56. $ npm install -g web-component-tester $ wct
57. <html>
 <head>
 <meta charset="utf-8">
 <script src="../../webcomponents-lite.js"></ script>
 <script src=“../../web-component-tester/ browser.js"></script>
 </head>
 <body>
 <script>
 // Load and run all tests (.html, .js):
 WCT.loadSuites([
 'basic-test.html'
 ]);
 </script>
 </body>
58. Vulcanize Concatenate Imports for Production github.com/polymer/vulcanize
59. $ npm install -g vulcanize $ vulcanize index.html > build.html
60. Crisper Split inline scripts from HTML for CSP github.com/polymerlabs/crisper
61. $ npm install -g crisper $ crisper -source index.html ‐-html build.html -‐js build.js
62. PolyBuild Combines Vulcanize, Crisper & Polyclean github.com/polymerlabs/polybuild
63. $ vulcanize ‐-inline-css -‐inline‐scripts ‐‐strip‐ comments index.html | polyclean | crisper -‐html index.build.html -‐-js index.build.js $ npm install ‐g polybuild $ polybuild index.html
64. PolyLint Linting for Elements github.com/polymerlabs/polylint
65. $ npm install ‐g polylint $ polylint index.html
66. Polymer Starter Kit A starting point for building web applications with Polymer developers.google.com/web/tools/polymer-starter-kit
67. first-class components end-to-end build process application theming responsive app layout offline-first (optional) recipes for ES2015 support Polymer performance
68. $ npm install -g generator-polymer $ yo polymer
69. Polymer in the real world
70. About 3.5M pages on the web using Polymer
76. Recap
77. Polymer is lean, and production ready
78. Polyfills grand total… 11kb
79. Polymer grand total… 35kb
80. Components for nearly any app, out of the box Complete build chain for bringing your app to production Flexiable app theming using custom properties Responsive app layout boilerplate & routing Material Design ready
81. Useful links
82. webcomponents.org Web components best-practises
83. polymer-project.org Official website
84. ChromeDevelopers YouTube channel
85. Polymer Social networks
86. polymerlabs.github.io/app-layout App layout demos
87. polymerfast.appspot.com App first paint/loading demos
88. customelements.io A web components gallery
89. Thank you! +Oleh Zasadnyy @ozasadnyy