Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Perks of Polymer - An Introduction to Web Components, Polymer and Material Design

Cb06f453a64a7f2bf485a9a021852133?s=47 Santhosh
November 16, 2014

Perks of Polymer - An Introduction to Web Components, Polymer and Material Design

This presentation was a part of the talk @ GDG Chennai, DevFest 2014 event.

The talk focused on Introducing Web Components development to the developers using a Google library named "Polymer". The slide deck also talks about Google's Material design.

Slide Deck customized and Presented by Santhosh Vijay.
Presentation courtesy: Rob Dodson,Google

Cb06f453a64a7f2bf485a9a021852133?s=128

Santhosh

November 16, 2014
Tweet

Transcript

  1. DevFest 2014, GDG Chennai

  2. @santhoshthepro fb.me/santhoshthepro www.santhoshthepro.in <about-me> Santhosh vijay Developer, Staples Open Source

    Innovation Lab </about-me>
  3. http://goo.gl/BTPcFx http://goo.gl/53rMRY http://goo.gl/MXxnee

  4. Agenda Overview: Components Introducing Polymer Join the revolution

  5. Web Components: Overview

  6. None
  7. None
  8. None
  9. None
  10. None
  11. Elements are the building blocks of the web

  12. Elements are encapsulated

  13. <select> <option>Small</option> <option>Medium</option> <option>Large</option> </select>

  14. Elements are configurable

  15. <select id=“schwag”> … <option disabled>medium</option> <option disabled>large</option> <option selected>XX-large</option> </select>

  16. <select size=“4” multiple> <option>Do</option> <option>Ri</option> <option>Mi</option> … </select>

  17. Elements are composable

  18. <select> <optgroup label=“German Cars”> <option>Do</option> <option>Ri</option> <option>Mi</option> </optgroup> … </select>

  19. Elements are programmable

  20. var foo = mySelect.selectedIndex;

  21. None
  22. http://drbl.in/esYL Building UI tabs should be easy! Tabs: a common

    component on the web
  23. @polyme #itshackademic

  24. @polyme #itshackademic

  25. @polyme #itshackademic

  26. @polyme #itshackademic

  27. @polyme #itshackademic

  28. Pile on the Javascript

  29. Our HTML is terrible

  30. None
  31. None
  32. None
  33. None
  34. What problems are we solving?

  35. None
  36. @polyme #itshackademic

  37. <paper-tabs> <paper-tab>KNOWLEDGE</paper-tab> <paper-tab>HISTORY</paper-tab> <paper-tab>FOOD</paper-tab> </paper-tabs> Less Code. Less confusion. Web

    Components
  38. What are Web Components?

  39. Web Components are a set of emerging standards that allow

    developers to extend HTML.
  40. Custom Elements define new HTML/DOM elements

  41. <paper-tabs selected=“1”> <paper-tab>Tab 1</paper-tab> <paper-tab>Tab 2</paper-tab> <paper-tab>Tab 3</paper-tab> </paper-tabs> declarative,

    readable meaningful HTML common way to extend → reusable Custom Elements define new HTML @polyme #itshackademic
  42. declarative, readable meaningful HTML common way to extend → reusable

    Custom Elements define new HTML var tabs = document.querySelector('paper-tabs'); tabs.addEventListener('core-activate', function() { console.log(this.selected); }); @polyme #itshackademic
  43. Templates native client-side templating

  44. <template> <div class=“comment”> <img src=“image.png”> </div> <script>...</script> </template> use DOM

    to scaffold DOM → no XSS content is inert until cloned/used doc fragment → not part of the page HTML Templates native client-side templates parsed, not rendered @polyme #itshackademic
  45. Shadow DOM DOM/CSS scoping

  46. <video src=“foo.webm” controls></video> @polyme #itshackademic

  47. <video src=“foo.webm” controls></video> Actually Shadow DOM @polyme #itshackademic

  48. <video src=“foo.webm” controls></video>

  49. HTML Imports loading web components

  50. @polyme #itshackademic

  51. @polyme #itshackademic

  52. Vulcanize $ vulcanize -o build.html index.html \ --csp --strip npm

    install -g vulcanize
  53. grunt-vulcanize

  54. gulp-vulcanize

  55. Custom Elements Create new HTML elements and extend existing ones

    Templates Native templating in the browser Shadow DOM Scoped CSS!!! + encapsulated markup HTML Imports Load custom element definitions and resources
  56. @polyme #itshackademic

  57. @polyme #itshackademic

  58. @polyme #itshackademic

  59. @polyme #itshackademic

  60. Browser support Summer 2014

  61. None
  62. Polyfills Web Components with webcomponents.js * previously called platform.js *

  63. Browser support Summer 2014 (with Polymer)

  64. Browser support Summer 2014 (with Polymer)

  65. Adds syntactic “sugar” with polymer.js

  66. None
  67. None
  68. None
  69. None
  70. None
  71. None
  72. Sugaring: Custom Elements

  73. vanill a polym er <polymer-element name=“paper-tabs”> … </polymer-element> usag e

    <paper-tabs>…</paper-tabs> // document.createElement(‘paper-tabs’); document.registerElement(‘paper-tabs’, { prototype: Object.create(HTMLElement.prototype) }); @polyme #itshackademic
  74. document.registerElement(‘paper-tabs’, { prototype: Object.create(HTMLElement.prototype) }); vanilla polym er <polymer-element name=“paper-tabs”>

    … </polymer-element> usag e <paper-tabs>…</paper-tabs> // document.createElement(‘paper-tabs’); @polyme #itshackademic
  75. vanilla polymer <polymer-element name=“paper-tabs”> … </polymer-element> usag e <paper-tabs>…</paper-tabs> //

    document.createElement(‘paper-tabs’); document.registerElement(‘paper-tabs’, { prototype: Object.create(HTMLElement.prototype) }); @polyme #itshackademic
  76. vanilla polymer <polymer-element name=“paper-tabs”> … </polymer-element> usage <paper-tabs>…</paper-tabs> // document.createElement(‘paper-tabs’);

    document.registerElement(‘paper-tabs’, { prototype: Object.create(HTMLElement.prototype) }); @polyme #itshackademic
  77. vanill a polym er <polymer-element name=“super-button” extends=“button”> … </polymer-element> usag

    e <button is=“super-button”>…</button> // document.createElement(‘button’, ‘super-button’); document.registerElement(‘super-button’, { prototype: Object.create(HTMLButtonElement.prototype), extends: ‘button’ }); @polyme #itshackademic
  78. vanilla polym er <polymer-element name=“super-button” extends=“button”> … </polymer-element> usag e

    <button is=“super-button”>…</button> // document.createElement(‘button’, ‘super-button’); document.registerElement(‘super-button’, { prototype: Object.create(HTMLButtonElement.prototype), extends: ‘button’ }); @polyme #itshackademic
  79. vanilla polymer <polymer-element name=“super-button” extends=“button”> … </polymer-element> usag e <button

    is=“super-button”>…</button> // document.createElement(‘button’, ‘super-button’); document.registerElement(‘super-button’, { prototype: Object.create(HTMLButtonElement.prototype), extends: ‘button’ }); @polyme #itshackademic
  80. vanilla polymer <polymer-element name=“super-button” extends=“button”> … </polymer-element> usage <button is=“super-button”>…</button>

    // document.createElement(‘button’, ‘super-button’); document.registerElement(‘super-button’, { prototype: Object.create(HTMLButtonElement.prototype), extends: ‘button’ }); @polyme #itshackademic
  81. Sugaring: Templates

  82. vanill a polym er <polymer-element name=“user-list” noscript> <template> <ul> <template

    repeat=“{{user, i in users}}”> <li>{{user.name}}</li> </template> </ul> </template> </polymer-element> <template> … </template> @polyme #itshackademic
  83. vanilla polym er <polymer-element name=“user-list” noscript> <template> <ul> <template repeat=“{{user,

    i in users}}”> <li>{{user.name}}</li> </template> </ul> </template> </polymer-element> <template> … </template> @polyme #itshackademic
  84. vanilla polymer <polymer-element name=“user-list” noscript> <template> <ul> <template repeat=“{{user, i

    in users}}”> <li>{{user.name}}</li> </template> </ul> </template> </polymer-element> <template> … </template> @polyme #itshackademic
  85. Sugaring: Shadow DOM

  86. var shadow = el.createShadowRoot(); shadow.innerHTML = “<style>h2 { color: red;

    }</style>” + “<h2>I’m a profile-card</h2>”; vanill a <polymer-element name=“profile-card” noscript> <template> <link rel=“stylesheet” href=“styles.css”> <h2>I’m a profile-card</h2> </template> </polymer-element> polym er @polyme #itshackademic
  87. var shadow = el.createShadowRoot(); shadow.innerHTML = “<style>h2 { color: red;

    }</style>” + “<h2>I’m a profile-card</h2>”; vanilla <polymer-element name=“profile-card” noscript> <template> <link rel=“stylesheet” href=“styles.css”> <h2>I’m a profile-card</h2> </template> </polymer-element> polym er @polyme #itshackademic
  88. var shadow = el.createShadowRoot(); shadow.innerHTML = “<style>h2 { color: red;

    }</style>” + “<h2>I’m a profile-card</h2>”; vanilla <polymer-element name=“profile-card” noscript> <template> <link rel=“stylesheet” href=“styles.css”> <h2>I’m a profile-card</h2> </template> </polymer-element> polymer @polyme #itshackademic
  89. Components

  90. <ul> <p> <h1>

  91. <menu-button> <page-scaffold> <animated-pages>

  92. Demo Using Bower and YOMEN

  93. What if we designed HTML for the mobile web?

  94. <core-icon> <paper-fab> <core-drawer-panel> <core-field>

  95. http://bit.ly/1jkTo5c core-elements Image: http://bit.ly/1mZjnTu

  96. <core -toolbar> A basic container for controls like tabs or

    buttons MY APP @polyme #itshackademic
  97. <link rel=“import” href=“core-toolbar.html”> <core-toolbar> A basic container for controls like

    tabs or buttons MY APP @polyme #itshackademic
  98. <core-toolbar> <div>MY APP</div> </core-toolbar> <link rel=“import” href=“core-toolbar.html”> <core-toolbar> A basic

    container for controls like tabs or buttons MY APP @polyme #itshackademic
  99. <core-toolbar> <core-icon-button icon=“menu”> </core-icon-button> <div>MY APP</div> </core-toolbar> <link rel=“import” href=“core-toolbar.html”>

    <core-toolbar> A basic container for controls like tabs or buttons MY APP @polyme #itshackademic
  100. A simple container with a header section and a content

    section <core-header-panel> MY APP <core-header-panel flex> <core-toolbar> <core-icon-button icon=“menu"> </core-icon-button> <div>MY APP</div> </core-toolbar> <div class=“content”>…</div> </core-header-panel>
  101. A simple container with a header section and a content

    section <core-header-panel> MY APP <core-header-panel flex> <core-toolbar> <core-icon-button icon=“menu"> </core-icon-button> <div>MY APP</div> </core-toolbar> <div class=“content”>…</div> </core-header-panel>
  102. A simple container with a header section and a content

    section <core-header-panel> MY APP <core-header-panel flex> <core-toolbar> <core-icon-button icon=“menu"> </core-icon-button> <div>MY APP</div> </core-toolbar> <div class=“content”>…</div> </core-header-panel>
  103. A simple container with a header section and a content

    section <core-header-panel> <core-header-panel flex> <core-toolbar> <core-icon-button icon=“menu"> </core-icon-button> <div>MY APP</div> </core-toolbar> <div class=“content”>…</div> </core-header-panel> MY APP
  104. <core-header-panel mode=“scroll" flex> <core-toolbar> <core-icon-button icon=“menu"> </core-icon-button> <div>MY APP</div> </core-toolbar>

    <div class=“content”>…</div> </core-header-panel> <core-header-panel> Toolbar will scroll with the page
  105. A responsive container that combines a left- or right-side drawer

    panel and a main content area. <core-drawer-panel> <core-drawer-panel> <div drawer> Drawer panel... </div> <div main> Main panel... </div> </core-drawer-panel>
  106. <core-drawer-panel> <div drawer> Drawer panel... </div> <div main> Main panel...

    </div> </core-drawer-panel> A responsive container that combines a left- or right-side drawer panel and a main content area. <core-drawer- panel>
  107. <core-drawer-panel> <div drawer> Drawer panel... </div> <div main> Main panel...

    </div> </core-drawer-panel> A responsive container that combines a left- or right-side drawer panel and a main content area. <core-drawer- panel>
  108. None
  109. paper-elements

  110. <paper-input floatinglabel label="Type only numbers... (floating)" validate="^[0-9]*$" error="Input is not

    a number!"> </paper-input> @polyme #itshackademic
  111. <paper-checkbox></paper- checkbox>

  112. <div class=“card”> <img src=“science.svg”> <paper-ripple fit></paper-ripple> </div> A reactive ink

    effect for indicating touch and mouse actions <paper-ripple>
  113. <div class=“card”> <paper-shadow z=“5” animated> </paper-shadow> </div> A dynamic shadow

    for conveying z-depth and spatial relationships <paper-shadow> @polyme #itshackademic
  114. Demo On Chrome Dev Editor

  115. Styling

  116. <paper-slider min=“0” max=“100”> </paper-slider> allows you to style nodes internal

    to an element’s shadow dom ::shadow @polyme #itshackademic
  117. allows you to style nodes internal to an element’s shadow

    dom ::shadow paper-slider::shadow #sliderKnobInner { background-color: #f4b400; } <paper-slider min=“0” max=“100”> </paper-slider> @polyme #itshackademic
  118. html /deep/ paper-ripple { background-color: #E91E63; } styles will pierce

    all shadow boundaries /deep/ @polyme #itshackademic
  119. With ::shadow and /deep/ you can apply sitewide themes source:

    ebidel.github.io/material-playground
  120. We’re not alone

  121. Mozilla Brick

  122. <brick-appbar> <brick-deck> <brick-tabbar>

  123. Web Components can work together

  124. Apps

  125. github.com/ForceDotComLabs/mobile-ui-elements github.com/ForceDotComLabs

  126. polymer-project.org/tools/designer/

  127. Demo Using Polymer Design Tool

  128. https://www.youtube.com/watch?v=djQh8XKRzRg Read More..

  129. Some more examples…  <x-blink>  <x-chart>  <x-gif> 

    <video-camera>  <x-miley>  <music-visualizer>
  130. None
  131. None
  132. None
  133. Meaningful Motion

  134. Delightful details

  135. Polymer + Material Demo

  136. Join the revolution

  137. Learn

  138. None
  139. polymer-project.org

  140. goo.gl/Ji3WdW

  141. None
  142. chromestatus.com

  143. Build

  144. YO POLYMER npm install -g generator-polymer

  145. Start with <seed-element> github.com/PolymerLabs/seed-element

  146. None
  147. http://goo.gl/UjLvb2 Chrome Dev Editor

  148. Share!

  149. customelements.io

  150. { "name": "my-element", "version": "0.0.0", "description": "My awesome Custom Element",

    "license": "MIT", "keywords": [ "web-components" ], "ignore": [ "**/.*", "node_modules", "bower_components" ] bower.json @polyme #itshackademic
  151. EXPLORE

  152. <thank-you> Santhosh Vijay @santhoshthepro fb.me/santhoshthepro www.santhoshthepro.in