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

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

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

Santhosh

November 16, 2014
Tweet

More Decks by Santhosh

Other Decks in Technology

Transcript

  1. <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
  2. 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
  3. <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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. <core -toolbar> A basic container for controls like tabs or

    buttons MY APP @polyme #itshackademic
  20. 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>
  21. 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>
  22. 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>
  23. 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
  24. <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
  25. 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>
  26. <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>
  27. <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>
  28. <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
  29. <paper-slider min=“0” max=“100”> </paper-slider> allows you to style nodes internal

    to an element’s shadow dom ::shadow @polyme #itshackademic
  30. 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
  31. html /deep/ paper-ripple { background-color: #E91E63; } styles will pierce

    all shadow boundaries /deep/ @polyme #itshackademic
  32. Some more examples…  <x-blink>  <x-chart>  <x-gif> 

    <video-camera>  <x-miley>  <music-visualizer>
  33. { "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