Rawnet Lightning Talk - Web Components
•Als PPTX, PDF herunterladen•
0 gefällt mir•202 views
Rawnet UI Developer Andy Farmer looks at Web Components and how they can help improve your site.
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Andere mochten auch
Andere mochten auch (20)
Ähnlich wie Rawnet Lightning Talk - Web Components
Ähnlich wie Rawnet Lightning Talk - Web Components (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (20)
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