$30 off During Our Annual Pro Sale. View Details »

DevFest2014-Zhuhai-Polymer

Zoom.Quiet
November 17, 2014

 DevFest2014-Zhuhai-Polymer

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

Zoom.Quiet

November 17, 2014
Tweet

More Decks by Zoom.Quiet

Other Decks in Technology

Transcript

  1. San Francisco, November 2014

    View Slide

  2. +Rob Dodson
    @rob_dodson
    #itshackademic
    @polymer

    View Slide

  3. Agenda
    Overview
    Components
    Join the revolution

    View Slide

  4. Web Components: Overview

    View Slide

  5. What problems are we solving?

    View Slide

  6. @polymer #itshackademic

    View Slide

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

    View Slide

  8. @polymer #itshackademic

    View Slide

  9. @polymer #itshackademic

    View Slide

  10. @polymer #itshackademic

    View Slide

  11. @polymer #itshackademic

    View Slide

  12. @polymer #itshackademic

    View Slide


  13. KNOWLEDGE
    HISTORY
    FOOD

    Less Code. Less confusion.
    Web Components

    View Slide

  14. What are Web Components?

    View Slide

  15. Custom Elements
    define new HTML/DOM elements

    View Slide

  16. View Slide


  17. Tab 1
    Tab 2
    Tab 3

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

    View Slide

  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

    View Slide

  19. Templates
    native client-side templating

    View Slide





  20. ...

    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

    View Slide

  21. Shadow DOM
    DOM/CSS scoping

    View Slide


  22. @polymer #itshackademic

    View Slide


  23. Actually Shadow DOM
    @polymer #itshackademic

    View Slide


  24. View Slide

  25. HTML Imports
    loading web components

    View Slide

  26. @polymer #itshackademic

    View Slide

  27. @polymer #itshackademic

    View Slide

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

    View Slide

  29. grunt-vulcanize

    View Slide

  30. gulp-vulcanize

    View Slide

  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

    View Slide

  32. @polymer #itshackademic

    View Slide

  33. @polymer #itshackademic

    View Slide

  34. @polymer #itshackademic

    View Slide

  35. @polymer #itshackademic

    View Slide

  36. Browser support
    Summer 2014

    View Slide

  37. View Slide

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

    View Slide

  39. Adds syntactic “sugar”
    with polymer.js

    View Slide

  40. Browser support
    Summer 2014 (with Polymer)

    View Slide

  41. Browser support
    Summer 2014 (with Polymer)

    View Slide

  42. Sugaring: Custom Elements

    View Slide

  43. vanilla
    polymer


    usage …
    // document.createElement(‘paper-tabs’);
    document.registerElement(‘paper-tabs’, {
    prototype: Object.create(HTMLElement.prototype)
    });
    @polymer #itshackademic

    View Slide

  44. document.registerElement(‘paper-tabs’, {
    prototype: Object.create(HTMLElement.prototype)
    });
    vanilla
    polymer


    usage …
    // document.createElement(‘paper-tabs’);
    @polymer #itshackademic

    View Slide

  45. vanilla
    polymer


    usage …
    // document.createElement(‘paper-tabs’);
    document.registerElement(‘paper-tabs’, {
    prototype: Object.create(HTMLElement.prototype)
    });
    @polymer #itshackademic

    View Slide

  46. vanilla
    polymer


    usage …
    // document.createElement(‘paper-tabs’);
    document.registerElement(‘paper-tabs’, {
    prototype: Object.create(HTMLElement.prototype)
    });
    @polymer #itshackademic

    View Slide

  47. vanilla
    polymer


    usage …
    // document.createElement(‘button’, ‘super-button’);
    document.registerElement(‘super-button’, {
    prototype: Object.create(HTMLButtonElement.prototype),
    extends: ‘button’
    });
    @polymer #itshackademic

    View Slide

  48. vanilla
    polymer


    usage …
    // document.createElement(‘button’, ‘super-button’);
    document.registerElement(‘super-button’, {
    prototype: Object.create(HTMLButtonElement.prototype),
    extends: ‘button’
    });
    @polymer #itshackademic

    View Slide

  49. vanilla
    polymer


    usage …
    // document.createElement(‘button’, ‘super-button’);
    document.registerElement(‘super-button’, {
    prototype: Object.create(HTMLButtonElement.prototype),
    extends: ‘button’
    });
    @polymer #itshackademic

    View Slide

  50. vanilla
    polymer


    usage …
    // document.createElement(‘button’, ‘super-button’);
    document.registerElement(‘super-button’, {
    prototype: Object.create(HTMLButtonElement.prototype),
    extends: ‘button’
    });
    @polymer #itshackademic

    View Slide

  51. Sugaring: Templates

    View Slide

  52. vanilla
    polymer




    {{user.name}}







    @polymer #itshackademic

    View Slide

  53. vanilla
    polymer




    {{user.name}}







    @polymer #itshackademic

    View Slide

  54. vanilla
    polymer




    {{user.name}}







    @polymer #itshackademic

    View Slide

  55. Sugaring: Shadow DOM

    View Slide

  56. var shadow = el.createShadowRoot();
    shadow.innerHTML = “h2 { color: red; }” +
    “I’m a profile-card”;
    vanilla



    I’m a profile-card


    polymer
    @polymer #itshackademic

    View Slide

  57. var shadow = el.createShadowRoot();
    shadow.innerHTML = “h2 { color: red; }” +
    “I’m a profile-card”;
    vanilla



    I’m a profile-card


    polymer
    @polymer #itshackademic

    View Slide

  58. var shadow = el.createShadowRoot();
    shadow.innerHTML = “h2 { color: red; }” +
    “I’m a profile-card”;
    vanilla



    I’m a profile-card


    polymer
    @polymer #itshackademic

    View Slide

  59. Components

    View Slide




  60. View Slide




  61. View Slide

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

    View Slide





  63. View Slide

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

    View Slide


  65. A basic container for controls
    like tabs or buttons
    MY APP
    @polymer #itshackademic

    View Slide

  66. href=“core-toolbar.html”>

    A basic container for controls
    like tabs or buttons
    MY APP
    @polymer #itshackademic

    View Slide


  67. MY APP

    href=“core-toolbar.html”>

    A basic container for controls
    like tabs or buttons
    MY APP
    @polymer #itshackademic

    View Slide




  68. MY APP

    href=“core-toolbar.html”>

    A basic container for controls
    like tabs or buttons
    MY APP
    @polymer #itshackademic

    View Slide

  69. A simple container with a header
    section and a content section
    MY APP




    MY APP



    View Slide

  70. A simple container with a header
    section and a content section
    MY APP




    MY APP



    View Slide

  71. A simple container with a header
    section and a content section
    MY APP




    MY APP



    View Slide

  72. A simple container with a header
    section and a content section





    MY APP



    MY APP

    View Slide





  73. MY APP




    Toolbar will scroll with the page

    View Slide

  74. A responsive container that
    combines a left- or right-side drawer
    panel and a main content area.


    Drawer panel...
    Main panel...

    View Slide


  75. Drawer panel...
    Main panel...

    A responsive container that
    combines a left- or right-side drawer
    panel and a main content area.

    View Slide


  76. Drawer panel...
    Main panel...

    A responsive container that
    combines a left- or right-side drawer
    panel and a main content area.

    View Slide

  77. View Slide

  78. paper-elements

    View Slide

  79. label="Type only numbers... (floating)"
    validate="^[0-9]*$"
    error="Input is not a number!">

    @polymer #itshackademic

    View Slide


  80. View Slide





  81. A reactive ink effect for indicating touch
    and mouse actions

    View Slide


  82. ...

    A dynamic shadow for conveying
    z-depth and spatial relationships

    @polymer #itshackademic

    View Slide

  83. Styling

    View Slide



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

    View Slide

  85. allows you to style nodes
    internal to an element’s
    shadow dom
    ::shadow
    paper-slider::shadow #sliderKnobInner {
    background-color: #f4b400;
    }


    @polymer #itshackademic

    View Slide

  86. html /deep/ paper-ripple {
    background-color: #E91E63;
    }
    styles will pierce all
    shadow boundaries
    /deep/
    @polymer #itshackademic

    View Slide

  87. With ::shadow and /deep/ you
    can apply sitewide themes
    source: ebidel.github.io/material-playground

    View Slide

  88. polymer-project.org/apps/topeka/

    View Slide

  89. View Slide

  90. polymer-project.org

    View Slide

  91. We’re not alone

    View Slide

  92. Mozilla Brick

    View Slide




  93. View Slide



  94. (not shown)

    View Slide

  95. Web Components
    can work together

    View Slide

  96. Not just browser makers

    View Slide


  97. github.com/erikringsmuth/app-router
    my-site.com/order/:id






    View Slide


  98. github.com/addyosmani/page-er
    >">
    var pager = document.querySelector("page-er");
    document.addEventListener("polymer-ready", function() {
    pager.data = model.items;
    });

    View Slide


  99. github.com/garstasio/ajax-form
    Full Name
    Country City
    Join newsletter

    Full Name





    View Slide

  100. Apps

    View Slide

  101. polymer-project.org

    View Slide

  102. chromestatus.com

    View Slide

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

    View Slide

  104. View Slide

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

    View Slide

  106. APIs

    View Slide

  107. APIs (as elements)

    View Slide

  108. I want to add a marker
    to a Google map.
    @polymer #itshackademic

    View Slide

  109. }


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

    View Slide

  110. @polymer #itshackademic

    View Slide

  111. View Slide

  112. View Slide

  113. View Slide

  114. View Slide

  115. View Slide

  116. googlewebcomponents.github.io
    github.com/GoogleWebComponents

    View Slide

  117. youtube.com/watch?v=eORqFaf_QzM

    View Slide

  118. Join the revolution

    View Slide

  119. Learn

    View Slide

  120. View Slide

  121. polymer-project.org

    View Slide

  122. goo.gl/Ji3WdW

    View Slide

  123. Build

    View Slide

  124. YO POLYMER
    npm install -g generator-polymer

    View Slide

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

    View Slide

  126. View Slide

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

    View Slide

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

    View Slide

  129. Share!

    View Slide

  130. customelements.io

    View Slide

  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

    View Slide

  132. EXPLORE

    View Slide


  133. +Rob Dodson
    @rob_dodson

    View Slide