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.

Web component driven development


Published on

Session I delivered in InnoNegev Meetup.

Published in: Software
  • Be the first to comment

Web component driven development

  1. 1. WEB COMPONENTS DRIVEN DEVELOPMENT Gil Fink CEO and Senior Consultant, sparXys @gilfink
  2. 2. About Me • sparXys CEO and senior consultant • Microsoft MVP in the last 8 years • Pro Single Page Application Development (Apress) co-author • 4 Microsoft Official Courses (MOCs) co-author • GDG Rishon and AngularUP co-organizer
  3. 3. Agenda • Components? • Components Architecture • HTML5 Web Components
  4. 4. Component Definition • A component is o Independent software unit o Can be composed with other components
  5. 5. Component Characteristics • Independent o A component should be independent • Composable o All external interactions must take place through publicly defined interfaces (API) • Deployable o Self-contained and must be able to operate as a stand-alone entity
  6. 6. Components Architecture
  7. 7. Typical Web Page
  8. 8. Breaking The Page into Components Header + Toolbar About Main Section What’s new Schedule Summary Recent list
  9. 9. From Design to Implementation Main Section Schedule Summary Recent list Component Child Component Child Component Child Component <main-section> <schedule> <summary> <recent-list>
  10. 10. Components Tree <main-section> <schedule> <summary> <recent-list> <main-section> <schedule> <summary> <recent-list>
  11. 11. Component Types • Stateless • Stateful • Routed
  12. 12. Stateless Components • Define inputs and outputs • Data enters via property binding (input) • Data leaves via events (output) • Stateless/dumb/presentational <schedule> <summary> <recent-list>
  13. 13. Stateful Components • Communicate with services and states • Don’t directly mutate states • Render child components • Stateful/smart/container <main-section>
  14. 14. Routed Components • Same as stateful component • Includes a route definition bound to the component <Route> <about> <main-section> <whats-new>
  15. 15. Data Flow
  16. 16. Two Way Binding • Automatic synchronization of data between the model and component’s view • The view is a projection of the model at all times Model Component Change in Model updates the component’s view Change in component’s view updates the Model
  17. 17. Frameworks/Libraries • Most of the MVW frameworks include two way binding o Angular 1 o Angular 2 (not out of the box) o KnockoutJS o And many more
  18. 18. Flux
  19. 19. Libraries • Libraries that leverages the Flux pattern: o Facebook’s Flux: o Redux: o Reflux: o Alt: o And many more
  20. 20. Mediator/Event Aggregator Angularlodash postal.js …Core Libraries Application Core Facade Pub / Sub … Component HTML / CSS / JavaScript Component HTML / CSS / JavaScript Component HTML / CSS / JavaScript
  21. 21. Mediator/Event Aggregator – Cont. • Promotes loose coupling of components • Allow components to broadcast or listen to notifications from other components • Notifications can be handled by any number of components at once
  22. 22. Frameworks/Libraries • Framework that leverages the proposed solution: o Most of the MVW frameworks include ways to apply this architecture (AngularJS, Ember and Backbone for example) o Aura: o And many more
  23. 23. HTML5 Web Components
  24. 24. HTML5 Web Components • A set of standards designed to componentize the web • Some general goals: Code Reuse Encapsulation Separation of Concerns Composition Theming Expressive Semantic
  25. 25. The Web Components Standards •Reusable DOM fragmentsTemplates •Load HTML declarativelyImports •DOM encapsulationShadow DOM •Create your own elements Custom Elements
  26. 26. Setting The Environment • Browsers have only partial support for Web Components o So we use the webcomponents.js Polyfill for Web Components • Download: o o Or install using your favorite package manager (Nuget/Bower/npm) • Make sure the Polyfill script runs first
  27. 27. Let’s Drill Down
  28. 28. Templates • A new HTML element – template • Can be used to instantiate document fragments • Can wrap HTML, style tags and script tags • No data binding support <template id=”myTemplate”> <div> … </div> </template>
  29. 29. Cloning a Template • Select the template and extract its content o Use the importNode function to get the cloned content • Only when the clone is appended to the DOM o The style and JavaScript are executed o Resources like images are retrieved from the server var template = document.querySelector(‘#myTemplate’); var clone = document.importNode(template.content, true);
  30. 30. Templates Demo
  31. 31. Imports • Load additional HTML documents o Without using Ajax • A new type of link tag • Use the rel attribute with the import type: <link rel=”import” href=”myImport.html”>
  32. 32. Imports and Bundling • Enable to bundle a full component into one HTML file o The HTML can include scripts and CSS styles • The whole bundle can be retrieved in a single call
  33. 33. Imports and The DOM • Importing a document doesn’t include it into the DOM o It will parse it in memory and load all the additional resources • Use the import property of the link tag: var content = document.querySelector(‘link[rel=”import”]’).import;
  34. 34. Imports Demo
  35. 35. Import Additional Notes • Scripts running inside the import can reference the containing document by calling document.currentScript.ownerDocument • CORS constraints apply to documents imported from other domains
  36. 36. Shadow DOM • Encapsulate DOM parts o The browser will know how to present those parts o The browser won’t show the encapsulated parts in the source code • Creates a boundary between the component and its user
  37. 37. The Problems Shadow DOM Tries to Solve • Encapsulation of components/widgets • Style leakage o Leaks from one component to another o Leaks from imported 3th party library/framework • Global DOM o id or class attributes all over the place
  38. 38. Shadow DOM in The Browser <video src="media/myVideo.mp4" controls></video> <input type="date">
  39. 39. Shadow DOM – Cont. • Use the createShadowRoot function to wrap an element as a shadow DOM: var host = document.querySelector(‘#shadowDOMHost’); var root = host.createShadowRoot(); root.innerHTML = ‘<div>Lurking in the shadows</div>’;
  40. 40. Styling Shadow DOM • :host and :host() pseudo-class • ::content pseudo-element <div name="myElement"> <style> :host { border: 1px solid lightgray; } </style> <template>...</template> </div>
  41. 41. Shadow DOM Demo
  42. 42. Custom Elements • Enable to extend or to create custom HTML elements o The new element must inherit from HTMLElement • Create a custom element using the registerElement function: • Extend an existing element: var myElement = document.registerElement(‘my-element’); var myInput = document.registerElement(‘my-input’, { prototype: Object.create(HTMLInputElement.prototype), extends: ‘input’ });
  43. 43. Custom Elements – Naming • You can create named elements (almost) any way you want: o Same naming rules as other HTML tags o There must be a dash (“-”) in the name • To future-proof the name against the HTML standard • To avoid naming collisions
  44. 44. Custom Elements – Usage • Use the element in your DOM: or use the createElement function: <my-input></my-input> var elm = document.createElement(‘my-input’);
  45. 45. Custom Element Callbacks • Custom elements have life cycle events: • createdCallback o Called when an instance is created • attachedCallback o Called when an instance is added to DOM subtree • detachedCallback o Called when an instance is removed from a DOM subtree • attributeChangedCallback o Called after an attribute value changes
  46. 46. Custom Elements Demo
  47. 47. The Current State of Web Components • Still W3C Working Drafts • Browser support: • Main libraries: Polymer X-Tag
  48. 48. Summary • Component Driven Development enables you to create web applications more efficiently • HTML5 Web Components are emerging standards that enables: • Encapsulation • Separation of Concerns • Element portability • And more • Taking the web one step forward!
  49. 49. Resources • • My Blog – • Follow me on Twitter – @gilfink
  50. 50. Thank You!