Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
4 puchnina.pptx
Next
Download to read offline and view in fullscreen.

0

Share

Download to read offline

Michael North "The Road to Native Web Components"

Download to read offline

One of the major challenges of building rich applications for the web, is that our foundation (JavaScript in the browser) is a document viewer, not an application platform. In fact, if you show a mobile or desktop app developer the primitives that we web developers are given to start with, the typical reaction is that we’re missing many important building blocks.
All of the tools we rely on like Angular 2, React, Ember, Polymer, etc... are, essentially, shims and hacks that we make use of while we wait for things like the W3C Web Component spec to be completed and implemented in browsers. As it becomes more feasible to build on the standards instead of a framework, it'll become useful for developers to have awareness of what those standards are, what’s missing from the official spec, and how well of a job our favorite libraries do with establishing alignment.
We’ll take a close look at the W3C component spec, and compare it to the concept of a Component in the React.js library, the and the Ember.js 2 and Angular 2 frameworks. We’ll try to do a few things using native web components, involving rendering and styling an encapsulated piece of interactive UI. Along the way, we will highlight the things that we’re waiting in the W3C spec. We'll be left with a clear roadmap of when we can start decoupling our apps from a specific third party tool and rely on “Native Web Components” in production.

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • Be the first to like this

Michael North "The Road to Native Web Components"

  1. 1. Mike North CTO Levanto Financial The Road to Native Web Components
  2. 2. INTRODUCTION WHO’S THIS GUY? ▸ CTO Levanto Financial ▸ frontendmasters.com instructor ▸ Product Guy ▸ I do a lot of JavaScript OSS stuff ▸ I work with Ember & React a lot
  3. 3. DOCUMENT VIEWER DOCUMENT
  4. 4. INTRO DO YOU USE WEB COMPONENTS? (YES)
  5. 5. INTRO THE W3C WEB COMPONENT SPEC HTML IMPORTS HTML TEMPLATES CUSTOM ELEMENTS SHADOW DOM
  6. 6. INTRO THE W3C WEB COMPONENT SPEC HTML IMPORTS ▸ require() for HTML ▸ onload, onerror events ▸ can bring in css/html/js ▸ closure-like js characteristics
  7. 7. INTRO THE W3C WEB COMPONENT SPEC CUSTOM ELEMENTS ▸ Custom HTML vocab ▸ Life-cycle ▸ Extensibility ▸ Interoperability (we hope?)
  8. 8. INTRO THE W3C WEB COMPONENT SPEC HTML TEMPLATES ▸ Inert HTML in the DOM ▸ Defer loading / rendering ▸ Think: handlebars/jade/etc…
  9. 9. INTRO THE W3C WEB COMPONENT SPEC SHADOW DOM ▸ CSS Encapsulation ▸ DOM encapsulation ▸ Each component has own subtree w/in parent page
  10. 10. INTRO THE W3C WEB COMPONENT SPEC HTML IMPORTS HTML TEMPLATES CUSTOM ELEMENTS SHADOW DOM
  11. 11. HTML TEMPLATES
  12. 12. <!DOCTYPE html> <html> <head></head> <body> <template id="something"> <div class="frame"> <h3 class="title">I am a title</h3> <p class="body">I am the body</p> </div> </template> </body> </html>
  13. 13. <template id="something"> <div class="frame"> <h3 class="title">I am a title</h3> <p class="body">I am the body</p> </div> </template>
  14. 14. <template id="something"> <!-- Some style --> <style type="text/css"> .title { font-size: 24px; } </style> <!-- Some behavior --> <script type="text/javascript"> </script> <!-- Some structure and content --> <div class="frame"> <h3 class="title">I am a title</h3> <p class="body">I am the body</p> </div> </template>
  15. 15. // Grab the template var tmpl = document.querySelector(‘#something'); Add the cloned document fragment to the DOM document.body.appendChild( // Clone the template's document fragment document.importNode(tmpl.content, true) );
  16. 16. // Grab the template var tmpl = document.querySelector(‘#something'); Add the cloned document fragment to the DOM document.body.appendChild( // Clone the template's document fragment document.importNode(tmpl.content, true) );
  17. 17. http://codepen.io/TrueNorth/pen/xbyVgL?editors=101
  18. 18. HOW DO FRAMEWORKS HANDLE THIS?
  19. 19. define('examples/templates/index', ['exports'], function (exports) { 'use strict'; exports['default'] = Ember.HTMLBars.template((function() { return { ... buildFragment: function buildFragment(dom) { var el0 = dom.createDocumentFragment(); var el1 = dom.createTextNode("Hello, "); dom.appendChild(el0, el1); var el1 = dom.createElement("strong"); var el2 = dom.createComment(""); dom.appendChild(el1, el2); var el2 = dom.createTextNode(" "); dom.appendChild(el1, el2); var el2 = dom.createComment(""); dom.appendChild(el1, el2); dom.appendChild(el0, el1); var el1 = dom.createTextNode("!"); dom.appendChild(el0, el1); return el0; }, buildRenderNodes: function buildRenderNodes(dom, fragment, contextualElement) { var element0 = dom.childAt(fragment, [1]); var morphs = new Array(2); morphs[0] = dom.createMorphAt(element0,0,0); morphs[1] = dom.createMorphAt(element0,2,2); return morphs; }, statements: [ ["content","firstName",["loc",[null,[1,15],[1,28]]]], ["content","lastName",["loc",[null,[1,29],[1,41]]]] ], ... }; }())); });
  20. 20. LAZY LOADING Lazy engines, JIT template compiler Webpack chunking Webpack chunking
  21. 21. SHADOW DOM
  22. 22. APPLICATION DOM COMPONENT SHADOW DOM
  23. 23. SHADOW DOM ENCAPSULATION http://codepen.io/mike-north/pen/OPBNmq?editors=101
  24. 24. SHADOW DOM CSS ENCAPSULATION ▸ CSS rules do not usually pierce shadow roots ▸ CSS defined inside the shadow root only affects that DOM ▸ :host pseudo-selector for component boundary ▸ ::shadow penetrates shadow roots ▸ /deep/ is deprecated // Inside shadow root :host { border: 1px solid red; } :host(.hover) { border: 1px solid blue; } // Outside shadow root #my-thing::shadow p { color: green; }
  25. 25. HOW DO FRAMEWORKS HANDLE THIS?
  26. 26. CSS ENCAPSULATION ember-css-modules ember-component-css “component styles” react-css-modules
  27. 27. SHADOW DOM CONTENT PROJECTION
  28. 28. <textarea name="comment" id="" cols="30" > This is the content of my textarea </textarea> SHADOW DOM CONTENT PROJECTION
  29. 29. http://codepen.io/mike-north/pen/emPZMv?editors=1000
  30. 30. CONTENT PROJECTION {{yield}} 2.x <ng-content>, 1.x ng-transclude this.props.children
  31. 31. HTML IMPORTS
  32. 32. <link rel="import" href="myfile.html" />
  33. 33. <link rel="import" href="myfile.html" /> // Get document fragment of an import var content = document .querySelector('link[rel="import"]') .import;
  34. 34. <link rel="import" href="myfile.html" /> // Get document fragment of an import var content = document .querySelector('link[rel="import"]') .import; // From a <script> included with the import, // access imported DOM var $abc = document .currentScript .ownerDocument .querySelector('.abc');
  35. 35. HOW DO FRAMEWORKS HANDLE THIS?
  36. 36. IMPORTING COMPONENTS import MyComponent from 'my-component';
  37. 37. CUSTOM ELEMENTS
  38. 38. CUSTOM ELEMENTS WHY IS THIS IMPORTANT ▸ Composable building blocks ▸ Life-cycle ▸ Extensibility ▸ Alignment of HTML with mental model of your UI
  39. 39. CUSTOM ELEMENTS REGISTERING // Extend a DOM element prototype var MegaButtonProto = Object.create(HTMLButtonElement.prototype);
  40. 40. CUSTOM ELEMENTS REGISTERING // Extend a DOM element prototype var MegaButtonProto = Object.create(HTMLButtonElement.prototype); // Register your new element type var MegaButton = document.registerElement("mega-button", { prototype: MegaButtonProto, extends: "button" });
  41. 41. CUSTOM ELEMENTS ADDING A TEMPLATE // Template var infoBoxTemplate = document.querySelector('#info-pane-template'); // Extend a DOM element var InfoBoxProto = Object.create(HTMLElement.prototype, { createdCallback: { value: function() { // Create the shadow root this.createShadowRoot().appendChild( // Add the template to the shadow root document.importNode(infoBoxTemplate.content, true) ); } } });
  42. 42. CUSTOM ELEMENTS ADDING A TEMPLATE // Template var infoBoxTemplate = document.querySelector('#info-pane-template'); // Extend a DOM element var InfoBoxProto = Object.create(HTMLElement.prototype, { createdCallback: { value: function() { // Create the shadow root this.createShadowRoot().appendChild( // Add the template to the shadow root document.importNode(infoBoxTemplate.content, true) ); } } });
  43. 43. // Template var infoBoxTemplate = document.querySelector('#info-pane-template'); // Extend a DOM element var InfoBoxProto = Object.create(HTMLElement.prototype, { createdCallback: { value: function() { // Create the shadow root this.createShadowRoot().appendChild( // Add the template to the shadow root document.importNode(infoBoxTemplate.content, true) ); } } }); CUSTOM ELEMENTS ADDING A TEMPLATE
  44. 44. HOW DO FRAMEWORKS HANDLE THIS?
  45. 45. CUSTOM ELEMENTS Ember.Component @Component React.Component
  46. 46. DEMO
  47. 47. DEMO •Starting Point: http://codepen.io/TrueNorth/pen/PwdLrj •Componentized: http://codepen.io/TrueNorth/pen/xbyqME •HTML Importified: http://codepen.io/TrueNorth/pen/ogawLm
  48. 48. THANKS! michael.l.north@gmail.com @MICHAELLNORTH

One of the major challenges of building rich applications for the web, is that our foundation (JavaScript in the browser) is a document viewer, not an application platform. In fact, if you show a mobile or desktop app developer the primitives that we web developers are given to start with, the typical reaction is that we’re missing many important building blocks. All of the tools we rely on like Angular 2, React, Ember, Polymer, etc... are, essentially, shims and hacks that we make use of while we wait for things like the W3C Web Component spec to be completed and implemented in browsers. As it becomes more feasible to build on the standards instead of a framework, it'll become useful for developers to have awareness of what those standards are, what’s missing from the official spec, and how well of a job our favorite libraries do with establishing alignment. We’ll take a close look at the W3C component spec, and compare it to the concept of a Component in the React.js library, the and the Ember.js 2 and Angular 2 frameworks. We’ll try to do a few things using native web components, involving rendering and styling an encapsulated piece of interactive UI. Along the way, we will highlight the things that we’re waiting in the W3C spec. We'll be left with a clear roadmap of when we can start decoupling our apps from a specific third party tool and rely on “Native Web Components” in production.

Views

Total views

389

On Slideshare

0

From embeds

0

Number of embeds

170

Actions

Downloads

5

Shares

0

Comments

0

Likes

0

×