DevFest2014-Zhuhai-Polymer

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

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