Rawnet Lightning Talk - Web Components
•Download as PPTX, PDF•
0 likes•202 views
Web Components allow developers to create reusable custom elements that encapsulate HTML, CSS, and JavaScript. They include four specifications: HTML Imports for including and reusing HTML documents; Shadow DOM for encapsulating styles and scripts; Custom Elements for defining new types of HTML elements; and HTML Templates for declaring chunks of reusable markup. These specifications enable more modular and reusable component-based web development.
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to Rawnet Lightning Talk - Web Components
Similar to Rawnet Lightning Talk - Web Components (20)
Recently uploaded
Recently uploaded (13)
Rawnet Lightning Talk - Web Components
- 1. Web Components What happens next is unbelievable
- 5. Design and Specification Abstract into components Implement & Document Plug & Play Component
- 6. Asset Driven Development Break designs down into a toolkit of components / blocks / modules / layouts Easier to test and fix bugs DRY - Don’t Repeat Yourself Reusable * * ish
- 7. Problems Components can be influenced by context Responsive Design Documentation Changing HTML Tied to a back end technology or templating language Process
- 8. Components can be influenced by context Conflicting styles / scripts BEM - .block__element--modifier Data behaviour - <button data-behaviour=”js-awesomeness”> Would be nicer to “seal” components
- 9. Responsive Design Media queries are limited Based on viewport Step in the right direction Only really useful for page-level layouts Very rarely want a component to be influenced by viewport Brittle
- 11. Responsive Design Media queries are limited Based on viewport Step in the right direction Only really useful for page-level layouts Very rarely want a component to be influenced by viewport Brittle Element / Container queries
- 13. Responsive Design Media queries are limited Based on viewport Step in the right direction Only really useful for page-level layouts Very rarely want a component to be influenced by viewport Brittle Element / Container queries No CSS Specification Use Cases & Requirements Document Responsive Images Community Group In draft Main cause for contention is how to handle circularity Long way off
- 14. Documentation Styleguide More of a design thing Asset Library Front End Frameworks - Bootstrap, Foundation
- 16. Documentation Styleguide More of a design thing Asset Library Front End Frameworks - Bootstrap, Foundation Copy & pasting HTML What if HTML changes? “Bootstrap for every client” Writing decent documentation is time consuming Dealing with changes / keeping up to date Ideal situation is to automate as much of the process as possible
- 17. “Bootstrap for every client” Hundreds of tools claim to do this Sturgeon’s Law - 90% are shit 2 we’ve trialled:
- 18. Tied to a back end or templating language PHP Concrete5 Symfony Rails There is a need for a pure front end - back end agnostic - solution
- 19. Web Components What happens next is unbelievable
- 20. HTML Imports 4 new specifications Shadow DOMCustom Elements HTML Templates
- 21. HTML Imports Include and reuse a HTML Document in a HTML Document Block rendering Better to concatenate multiple import files Vulcanise - npm build tool async attribute Don’t block parsing
- 22. Accessing the content of an import with the link element’s .import property warnings.html index.html
- 23. Javascript within an import Behaves just like a script tag with a defer attribute Executes in the context of the importing document JS within an import can access it’s own DOM and/or the DOM of the page that’s importing it Scripts are executed in order index.html component.html
- 24. Allows you to bundle HTML/CSS/JS together into re-usable packages Code organisation Manage dependencies with automatic de-deduplication Parallel HTML parsing HTML Imports
- 25. DOM-based, client-side templating Allow you to declare chunks of reusable mark-up Inert until activated Hidden DOM that doesn’t render Scripts don’t run, images don’t load, etc document.getElementById() won’t return child nodes of a template Can be placed anywhere within <head> or <body> HTML Templates
- 26. Declaring and activating a template Declare using the new <template> tag Activate by copying a template’s .content with document.importNode()
- 27. Encapsulation Hidden DOM within an element Shadow DOM
- 28. <video>
- 29. Adds a new type of node than can be associated with an element This node is called a shadow root An element that has a shadow root is called a shadow host Create Shadow DOM by invoking .createShadowRoot() on a DOM node Shadow DOM
- 30. Allows developers to extend the DOM and create new elements We can be more expressive and give more meaning to our mark up Bundle functionality together into a single tag Extend the API of existing elements Custom Elements
- 32. Allows developers to extend the DOM and create new elements Custom Elements We can be more expressive and give more meaning to our mark up Bundle functionality together into a single tag Extend the API of existing elements
- 33. Elements are created using document.registerElement(tag-name, prototype) Tag names must contain a dash prototype argument is optional; custom elements inherit from HTMLELement by default Calling document.registerElement() tells the browser about your new element and returns a constructor that can be used to create instances of your element Registering a new element
- 34. To extend a native HTML element create a new element that inherits the prototype of the element you want to extend Extending an existing element
- 35. GitHub example time is used as base element datetime attribute provides an absolute date/time relative-time is specified as type extension TextContent shows the relative date/time
- 36. HTML Imports Shadow DOMCustom Elements HTML Templates
- 37. Not quite!
- 39. HTML Imports Shadow DOM Custom Elements HTML Templates Supported In development Under consideration Not interested
- 40. PolymerX-Tag Bosonic Small library for creating custom elements IE9+ All web components specs Adds features like two-way data binding and property observation Large library of pre-built components IE10+ All web components specs Includes a handful of basic elements like tabs IE9+
- 41. HTML Imports Shadow DOMCustom Elements HTML Templates