Download to read offline
![<paper-input floatinglabel
label="Type only numbers... (floating)"
validate="^[0-9]*$"
error="Input is not a number!">
</paper-input>
@polyme #itshackademic](https://image.slidesharecdn.com/polytechnicspeakerdeckoluwadamilare-151028143306-lva1-app6891/75/Polytechnic-speaker-deck-oluwadamilare-76-2048.jpg)
![{
"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](https://image.slidesharecdn.com/polytechnicspeakerdeckoluwadamilare-151028143306-lva1-app6891/75/Polytechnic-speaker-deck-oluwadamilare-126-2048.jpg)
More Related Content
![#1 HTML [know-how]](https://cdn.slidesharecdn.com/ss_thumbnails/html-know-how-180508193902-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Polytechnic speaker deck oluwadamilare
Polytechnic speaker deck oluwadamilare
- 1. GDG UI Devfest,November 2014
- 2.
- 3.
- 4.
- 5. What problems arewe solving?
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14. What are WebComponents?
- 15. Custom Elements define newHTML/DOM elements
- 17. <paper-tabs selected=“1”> <paper-tab>Tab 1</paper-tab> <paper-tab>Tab2</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
- 18. declarative, readable meaningful HTML common way toextend → reusable Custom Elements define new HTML var tabs = document.querySelector('paper-tabs'); tabs.addEventListener('core-activate', function() { console.log(this.selected); }); @polyme #itshackademic
- 19.
- 20. <template> <div class=“comment”> <img src=“image.png”> </div> <script>...</script> </template> useDOM 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
- 21.
- 22. <video src=“foo.webm” controls></video> @polyme#itshackademic
- 23. <video src=“foo.webm” controls></video> ActuallyShadow DOM @polyme #itshackademic
- 24.
- 25. HTML Imports loading webcomponents
- 26.
- 27.
- 28. Custom Elements Create newHTML 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
- 29.
- 30.
- 31.
- 32.
- 33.
- 35. Polyfills Web Components withplatform.js
- 36. Adds syntactic “sugar” withpolymer.js
- 37. Browser support Summer 2014(with Polymer)
- 38. Browser support Summer 2014(with Polymer)
- 39.
- 40. 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
- 41. document.registerElement(‘paper-tabs’, { prototype: Object.create(HTMLElement.prototype) }); vanill a polym er <polymer-elementname=“paper-tabs”> … </polymer-element> usag e <paper-tabs>…</paper-tabs> // document.createElement(‘paper-tabs’); @polyme #itshackademic
- 42. 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
- 43. 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
- 44. vanill a polym er <polymer-element name=“super-button” extends=“button”> … </polymer-element> usag e <buttonis=“super-button”>…</button> // document.createElement(‘button’, ‘super-button’); document.registerElement(‘super-button’, { prototype: Object.create(HTMLButtonElement.prototype), extends: ‘button’ }); @polyme #itshackademic
- 45. vanill a polym er <polymer-element name=“super-button” extends=“button”> … </polymer-element> usag e <buttonis=“super-button”>…</button> // document.createElement(‘button’, ‘super-button’); document.registerElement(‘super-button’, { prototype: Object.create(HTMLButtonElement.prototype), extends: ‘button’ }); @polyme #itshackademic
- 46. vanill a polym er <polymer-element name=“super-button” extends=“button”> … </polymer-element> usag e <buttonis=“super-button”>…</button> // document.createElement(‘button’, ‘super-button’); document.registerElement(‘super-button’, { prototype: Object.create(HTMLButtonElement.prototype), extends: ‘button’ }); @polyme #itshackademic
- 47. vanill a polym er <polymer-element name=“super-button” extends=“button”> … </polymer-element> usag e <buttonis=“super-button”>…</button> // document.createElement(‘button’, ‘super-button’); document.registerElement(‘super-button’, { prototype: Object.create(HTMLButtonElement.prototype), extends: ‘button’ }); @polyme #itshackademic
- 48.
- 49. vanill a polym er <polymer-element name=“user-list” noscript> <template> <ul> <templaterepeat=“{{user, i in users}}”> <li>{{user.name}}</li> </template> </ul> </template> </polymer-element> <template> … </template> @polyme #itshackademic
- 50. vanill a polym er <polymer-element name=“user-list” noscript> <template> <ul> <templaterepeat=“{{user, i in users}}”> <li>{{user.name}}</li> </template> </ul> </template> </polymer-element> <template> … </template> @polyme #itshackademic
- 51. vanill a polym er <polymer-element name=“user-list” noscript> <template> <ul> <templaterepeat=“{{user, i in users}}”> <li>{{user.name}}</li> </template> </ul> </template> </polymer-element> <template> … </template> @polyme #itshackademic
- 52.
- 53. 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
- 54. 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
- 55. 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
- 56.
- 57.
- 58.
- 59. What if wedesigned HTML for the mobile web?
- 60.
- 61.
- 62. <core- toolbar> A basic containerfor controls like tabs or buttons MY APP @polyme #itshackademic
- 63. <link rel=“import” href=“core-toolbar.html”> <core- toolbar> A basiccontainer for controls like tabs or buttons MY APP @polyme #itshackademic
- 64. <core-toolbar> <div>MY APP</div> </core-toolbar> <link rel=“import” href=“core-toolbar.html”> <core- toolbar> Abasic container for controls like tabs or buttons MY APP @polyme #itshackademic
- 65. <core-toolbar> <core-icon-button icon=“menu”> </core-icon-button> <div>MY APP</div> </core-toolbar> <linkrel=“import” href=“core-toolbar.html”> <core- toolbar> A basic container for controls like tabs or buttons MY APP @polyme #itshackademic
- 66. A simple containerwith 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>
- 67. A simple containerwith 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>
- 68. A simple containerwith 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>
- 69. A simple containerwith 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
- 70. <core-header-panel mode=“scroll" flex> <core-toolbar> <core-icon-buttonicon=“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
- 71. A responsive containerthat 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>
- 72. <core-drawer-panel> <div drawer> Drawerpanel... </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>
- 73. <core-drawer-panel> <div drawer> Drawerpanel... </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>
- 75.
- 76. <paper-input floatinglabel label="Type onlynumbers... (floating)" validate="^[0-9]*$" error="Input is not a number!"> </paper-input> @polyme #itshackademic
- 77.
- 78. <div class=“card”> <img src=“science.svg”> <paper-ripplefit></paper-ripple> </div> A reactive ink effect for indicating touch and mouse actions <paper- ripple>
- 79. <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
- 80.
- 81. <paper-slider min=“0” max=“100”> </paper-slider> allowsyou to style nodes internal to an element’s shadow dom ::shado w @polyme #itshackademic
- 82. allows you tostyle nodes internal to an element’s shadow dom ::shado w paper-slider::shadow #sliderKnobInner { background-color: #f4b400; } <paper-slider min=“0” max=“100”> </paper-slider> @polyme #itshackademic
- 83. html /deep/ paper-ripple{ background-color: #E91E63; } styles will pierce all shadow boundaries /deep/ @polyme #itshackademic
- 84. With ::shadow and/deep/ you can apply sitewide themes source: ebidel.github.io/material-playground
- 85.
- 87.
- 88.
- 89.
- 90.
- 91.
- 92. Web Components can worktogether
- 93. Not just browsermakers
- 94. <app-router> github.com/erikringsmuth/app-router my-site.com/order/:id <app-router> <!-- matches anexact 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>
- 95. <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; });
- 96. <ajax- form>github.com/garstasio/ajax-form Full Name Country City Joinnewsletter <form is="ajax-form" action="my/form/handler"> <label>Full Name <input type="text" name=“full_name"> </label> … </form> √
- 97.
- 98.
- 99.
- 100.
- 102.
- 103.
- 104.
- 105. I want toadd a marker to a Google map. @polyme #itshackademic
- 106. height: 400px; } </style> <div id="map"></div> <scriptsrc=“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! @polyme #itshackademic
- 107.
- 113.
- 114.
- 115.
- 116.
- 118.
- 119.
- 120.
- 122.
- 123.
- 124.
- 125.
- 126. { "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
- 127.
- 128.