DevFest2014-Zhuhai-Polymer

6002ee051e03f0b762642ee7fafd111f?s=47 Zoom.Quiet
November 17, 2014

 DevFest2014-Zhuhai-Polymer

官方幻灯转载:
配合中文讲解录像...

6002ee051e03f0b762642ee7fafd111f?s=128

Zoom.Quiet

November 17, 2014
Tweet

Transcript

  1. San Francisco, November 2014

  2. +Rob Dodson @rob_dodson #itshackademic @polymer

  3. Agenda Overview Components Join the revolution

  4. Web Components: Overview

  5. What problems are we solving?

  6. @polymer #itshackademic

  7. http://drbl.in/esYL Building UI tabs should be easy!

  8. @polymer #itshackademic

  9. @polymer #itshackademic

  10. @polymer #itshackademic

  11. @polymer #itshackademic

  12. @polymer #itshackademic

  13. <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
  14. What are Web Components?

  15. Custom Elements define new HTML/DOM elements

  16. None
  17. <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 @polymer #itshackademic
  18. 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); }); @polymer #itshackademic
  19. Templates native client-side templating

  20. <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 @polymer #itshackademic
  21. Shadow DOM DOM/CSS scoping

  22. <video src=“foo.webm” controls></video> @polymer #itshackademic

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

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

  25. HTML Imports loading web components

  26. @polymer #itshackademic

  27. @polymer #itshackademic

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

    install -g vulcanize
  29. grunt-vulcanize

  30. gulp-vulcanize

  31. 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
  32. @polymer #itshackademic

  33. @polymer #itshackademic

  34. @polymer #itshackademic

  35. @polymer #itshackademic

  36. Browser support Summer 2014

  37. None
  38. Polyfills Web Components with webcomponents.js * previously called platform.js *

  39. Adds syntactic “sugar” with polymer.js

  40. Browser support Summer 2014 (with Polymer)

  41. Browser support Summer 2014 (with Polymer)

  42. Sugaring: Custom Elements

  43. 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) }); @polymer #itshackademic
  44. document.registerElement(‘paper-tabs’, { prototype: Object.create(HTMLElement.prototype) }); vanilla polymer <polymer-element name=“paper-tabs”> …

    </polymer-element> usage <paper-tabs>…</paper-tabs> // document.createElement(‘paper-tabs’); @polymer #itshackademic
  45. 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) }); @polymer #itshackademic
  46. 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) }); @polymer #itshackademic
  47. 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’ }); @polymer #itshackademic
  48. 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’ }); @polymer #itshackademic
  49. 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’ }); @polymer #itshackademic
  50. 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’ }); @polymer #itshackademic
  51. Sugaring: Templates

  52. 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> @polymer #itshackademic
  53. 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> @polymer #itshackademic
  54. 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> @polymer #itshackademic
  55. Sugaring: Shadow DOM

  56. 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 @polymer #itshackademic
  57. 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 @polymer #itshackademic
  58. 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 @polymer #itshackademic
  59. Components

  60. <ul> <p> <h1>

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

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

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

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

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

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

    tabs or buttons MY APP @polymer #itshackademic
  67. <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 @polymer #itshackademic
  68. <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 @polymer #itshackademic
  69. 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>
  70. 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>
  71. 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>
  72. 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
  73. <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
  74. 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>
  75. <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>
  76. <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>
  77. None
  78. paper-elements

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

    a number!"> </paper-input> @polymer #itshackademic
  80. <paper-checkbox></paper-checkbox>

  81. <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>
  82. <paper-shadow z=“5” animated> <div class=“card”>...</div> </paper-shadow> A dynamic shadow for

    conveying z-depth and spatial relationships <paper-shadow> @polymer #itshackademic
  83. Styling

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

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

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

    ebidel.github.io/material-playground
  88. polymer-project.org/apps/topeka/

  89. None
  90. polymer-project.org

  91. We’re not alone

  92. Mozilla Brick

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

  94. <core-icon> <x-instagram> (not shown)

  95. Web Components can work together

  96. Not just browser makers

  97. <app-router> github.com/erikringsmuth/app-router my-site.com/order/:id <app-router> <!-- matches an exact path -->

    <app-route path="/home" import="/pages/home-page.html"></app-route> <!-- matches using a path variable --> <app-route path="/order/:id" import=“/pages/order-page.html"></app-route> </app-router>
  98. <page-er> github.com/addyosmani/page-er <page-er perpage="5" previous=“<< Previous" next=“Next >>"></page-er> var pager

    = document.querySelector("page-er"); document.addEventListener("polymer-ready", function() { pager.data = model.items; });
  99. <ajax-form> github.com/garstasio/ajax-form Full Name Country City Join newsletter <form is="ajax-form"

    action="my/form/handler"> <label>Full Name <input type="text" name=“full_name"> </label> … </form> √
  100. Apps

  101. polymer-project.org

  102. chromestatus.com

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

  104. None
  105. github.com/ForceDotComLabs/mobile-ui-elements github.com/ForceDotComLabs

  106. APIs

  107. APIs (as elements)

  108. I want to add a marker to a Google map.

    @polymer #itshackademic
  109. } </style> <div id="map"></div> <script src=“http://maps.googleapis.com/maps/api/js?callback=mapReady"> </script> <script> var marker

    = null; function getCurrentLocation(callback) { navigator.geolocation.watchPosition(callback); } function addMarker(opts, info) { var marker = new google.maps.Marker(opts); var infoWindow = new google.maps.InfoWindow({content: info}); google.maps.event.addListener(marker, 'click', function() { infoWindow.open(opts.map, marker); }); return marker; } function mapReady() { var container = document.querySelector('#map'); var map = new google.maps.Map(container, { zoom: 14, disableDefaultUI: true }); getCurrentLocation(function(pos) { var current = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude); map.setCenter(current); // Re-position marker or create new one. if (marker) { marker.setPosition(map.getCenter()); } else { marker = addMarker({ position: current, map: map, title: 'Your location' }, '<b>Your location</b>'); } So much code for one map marker! @polymer #itshackademic
  110. @polymer #itshackademic

  111. None
  112. None
  113. None
  114. None
  115. None
  116. googlewebcomponents.github.io github.com/GoogleWebComponents

  117. youtube.com/watch?v=eORqFaf_QzM

  118. Join the revolution

  119. Learn

  120. None
  121. polymer-project.org

  122. goo.gl/Ji3WdW

  123. Build

  124. YO POLYMER npm install -g generator-polymer

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

  126. None
  127. youtube.com/watch?v=2toYLLcoY14

  128. http://goo.gl/UjLvb2 Chrome Dev Editor

  129. Share!

  130. customelements.io

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

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

  133. <thank-you> +Rob Dodson @rob_dodson