More Related Content
Viewers also liked
Viewers also liked (11)
Similar to Brief history of web components
Similar to Brief history of web components (20)
Recently uploaded
Recently uploaded (20)
Brief history of web components
- 1. Yevgeniy Valeyev Front-end developer at Sytac valeyev.pro @yv_dev
- 2. Brief history of Web Components
- 3. Agenda Why do we need componentization? Additional componentization techniques Beginning HTML Components XBL Web Components Pros & Cons
- 4. Why do we need components? Isolation for different parts of an application Complexity reduction Hides details of implementation Reusability
- 5. Additional componentization techniques ● Isolation for styles ● Isolation for javascript ○ Module pattern ○ Workers ● Iframes ○ Security and risks ○ Iframe seamless [proposed]
- 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
- 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
- 10. XBL by Mozilla
- 11. Differences between XBL and HTC VS. XML HTML Gecko Runtime Environment (GRE) ActiveX/ Internet Explorer Multiple bindings One component per file
- 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. 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. 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. Examples of Web Components Let’s see some code . . .
- 16. Custom elements Name has to contain a dash
- 19. Templates (example)Can’t be ‘polyfilled’
- 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. 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. Cons of Web Components Cross-browser support ? Could cause styles duplication
- 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
Editor's Notes
- Web Components is trending technology these days and of course it’s also very useful. It consists of set of technologies which are supported partially or fully in modern browsers. This technology provides you native ability for componentization, and creating, for instance some functional bricks/widgets which will be completely reusable, so you could create collections of reusable widgets. But the decision to create this technologie did not come out of nothing, long time ago , by the standards of the web of course , appeared a need to isolate different parts of the application, like isolating styles or javascript functionality . Isolation helps reduce complexity of the application and also allows to hide details of the implementation so this logic become more reusable. Real need for isolation appeared when become an era of single page application. So needed to isolate pieces of your application to reduce complexity of such an application.
- _ Js: workers no UI access _ Iframe: risk of xss; seamless can’t allow partial styles; iframes limits dev. With creating APIs;
- It used a declarative model for attaching events and APIs to a host element (with isolation in mind) and parsed components into a “viewlink” (a “Shadow DOM”)
- _ 1998 from IE5.5 till IE10; _ JScript (ECMA 262) or VBScript, or other third party which work with ActiveX ----------------------------------------- <PUBLIC:COMPONENT> <PUBLIC:PROPERTY NAME="testColor" /> <PUBLIC:ATTACH EVENT="onmouseover" ONEVENT="onOver()" /> <SCRIPT LANGUAGE="JScript"> function onOver() { // … do stuff } </SCRIPT> </PUBLIC:COMPONENT> --------------------------------------------- <body> <ul> <li testcolor=”red” style="behavior:url(test.htc)">Foo Foo Foo</li> </ul> </body>
- A declarative binding language with two binding flavors (similar to Microsoft’s HTML Components), XBL supported the additional features of host content model distribution and content generation.
- _ XBL (XML Binding Language) (2001) , XBL2 (2007), for XUL user-interface language _ March, 2007 _ Gecko layout engine is the only implementation _ abandoned by the W3C in 2012 #test-component { -moz-binding: url("my-component-binding.xml#my-component"); . . . }
- _ <children> accept children ) _ you can define multiple bindings per XML file <?xml version="1.0"?> <bindings xmlns="http://www.mozilla.org/xbl" xmlns:html="http://www.w3.org/1999/xhtml"> <binding id="my-component" applyauthorstyles="true"> <content> <html:span style="/* some CSS */"> <children/> </html:span> </content> <implementation> <constructor> ... </constructor> <method name=”doSomething”> <body> … </body> </method> <property name=”status” onset=”. . .” onget=”. . .” /> <implementation> </binding> </bindings>
- _ Mentionings of Web Components - https://www.w3.org/wiki/Webapps/Meetings#Web_Components _ v0 v1 - http://stackoverflow.com/questions/40323180/what-are-the-differences-between-custom-elements-v0-and-v1 _ can I use - http://caniuse.com/#search=web%20components _ http://www.2ality.com/2015/08/web-component-status.html
- _ let by Google, used XBL ideas of Mozilla but broken monolithic to blocks. v0-v1 _ custom elements - https://jsbin.com/cimepeh/edit?html,js,output _ templates - https://jsbin.com/visuqo/edit?html,output , doesn’t load source in template (better than script because DOM, better then hidden element because don’t load early) _ shadow dom - https://jsbin.com/yaxegon/edit?html,js,console,output ; element can be registered only once; _ styling - https://jsbin.com/feliyej/edit?html,css,js,output WC XSS ????
- _ shadow dom - https://jsbin.com/yaxegon/edit?html,js,console,output ; element can be registered only once; _ styling - https://jsbin.com/feliyej/edit?html,css,js,output
- _ XBL on Wikipedia _ video 2015 - are we there?