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.

Brief history of web components


Published on

Web Components technology is trending these days. It allows to build component-based applications using native support of modern browsers. But it didn't appear out of nowhere, it has own difficult history of successes and fails.

Published in: Software
  • Login to see the comments

Brief history of web components

  1. 1. Yevgeniy Valeyev Front-end developer at Sytac @yv_dev
  2. 2. Brief history of Web Components
  3. 3. Agenda Why do we need componentization? Additional componentization techniques Beginning HTML Components XBL Web Components Pros & Cons
  4. 4. Why do we need components? Isolation for different parts of an application Complexity reduction Hides details of implementation Reusability
  5. 5. Additional componentization techniques ● Isolation for styles ● Isolation for javascript ○ Module pattern ○ Workers ● Iframes ○ Security and risks ○ Iframe seamless [proposed]
  6. 6. Beginning. HTML Components by Microsoft 1998 - Microsoft proposed HTML Components which were supported in IE 5.5 You could write them in JScript (ECMA 262) or VBScript (Visual Basic Script) Required Microsoft ActiveX Scripting interfaces
  7. 7. HTML Component (.htc)
  8. 8. XBL by Mozilla 2001 - Mozilla introduces XBL 2007 - Release of XBL 2 XBL was an addition to Mozilla’s XUL And was supported by all products of Mozilla
  9. 9. XBL by Mozilla
  10. 10. XBL by Mozilla
  11. 11. Differences between XBL and HTC VS. XML HTML Gecko Runtime Environment (GRE) ActiveX/ Internet Explorer Multiple bindings One component per file
  12. 12. Success of first attempts 2007 - W3C released Candidate Recommendation of XBL 2 2011 - HTML Components officially deprecated in IE 10 2012 - Work on XBL 2 was abandoned. The specification was not implemented by any other browser
  13. 13. Next attempt by Google 2013 - first mentioning of Web Components, version 0 Supported only in Chrome and Opera with enabled flag Was based on ideas described in XBL 2016 - added official support of v1 in Chrome and Opera 2014 - added official support of v0 in Chrome and Opera 2015 - several meetings to discuss what goes to v1 and what to further versions
  14. 14. Web Components ● Custom elements ○ `is` attribute // <button is=”my-custom-button”>Test</button> ● Shadow DOM ○ CSS Scoping // :host, :host-context, ::slotted ● Templates ● HTML Imports // <link rel="import" href="/imports/test.html">
  15. 15. Examples of Web Components Let’s see some code . . .
  16. 16. Custom elements Name has to contain a dash
  17. 17. Custom Elements reactions
  18. 18. Shadow DOM Styling &encapsulation
  19. 19. Templates (example)Can’t be ‘polyfilled’
  20. 20. Benefits of Shadow DOM ● Styles encapsulation ● It could be an alternative to iframe, but Shadow DOM is a part of your document Benefits of Custom elements ● Logic encapsulation within HTML element ● Semantic markup
  21. 21. Why Template is good ● Content of a template is parsed but not executed until we inject it in a DOM ● We work directly with DOM Why HTML imports are good ● Allows import of other HTML files / injecting Web Components
  22. 22. Cons of Web Components Cross-browser support ? Could cause styles duplication
  23. 23. Links XUL & XBL consequences for Mozilla XBL component example XBL on MDN HTML Components example HTC on W3C HTC vs XBL, book p.206 Mentions of Web Components in the past Browsers support for v1 and v0 Custom elements v1 and v0 Templates example Custom elements example Styling example Shadow DOM disadvantage
  24. 24. Yevgeniy Valeyev @yv_dev