View
109
Download
5
Category
Preview:
Citation preview
Web ComponentsWhat happens next is unbelievable
Design and Specification
Abstract intocomponents
Implement &Document
Plug & Play Component
Asset Driven DevelopmentBreak designs down into a toolkit of components / blocks / modules /
layouts
Easier to test and fix bugs
DRY - Don’t Repeat Yourself
Reusable *
* ish
ProblemsComponents can be influenced by context
Responsive Design
Documentation
Changing HTML
Tied to a back end technology or templating language
Process
Components can be influenced by contextConflicting styles / scripts
BEM - .block__element--modifier
Data behaviour - <button data-behaviour=”js-awesomeness”>
Would be nicer to “seal” components
Responsive DesignMedia 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
Responsive DesignMedia 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
Responsive DesignMedia 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
JS Polyfills
DocumentationStyleguide
More of a design thing
Asset LibraryFront End Frameworks - Bootstrap, Foundation
DocumentationStyleguide
More of a design thing
Asset LibraryFront 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
“Bootstrap for every client”Hundreds of tools claim to do this
Sturgeon’s Law - 90% are shit
2 we’ve trialled:
Tied to a back end or templating languagePHP
Concrete5
Symfony
Rails
There is a need for a pure front end - back end agnostic - solution
Web ComponentsWhat happens next is unbelievable
HTML Imports
4 new specifications
Shadow DOMCustom Elements
HTML Templates
HTML ImportsInclude and reuse a HTML Document in a HTML Document
Block renderingBetter to concatenate multiple import files
Vulcanise - npm build tool
async attribute
Don’t block parsing
Automatically de-duplicates imports from same URL
Not the same as partials - have to use JS to get the contents of an import
Accessing the content of an import with the link element’s .import propertywarnings.html index.html
Javascript within an importBehaves 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 orderindex.html
component.html
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
DOM-based, client-side templating
Allow you to declare chunks of reusable mark-up
Inert until activatedHidden 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
Declaring and activating a template Declare using the new <template> tag
Activate by copying a template’s .content with document.importNode()
Encapsulation
Hidden DOM within an element
Shadow DOM
<video>
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
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
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
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
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
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
HTML Imports
Shadow DOMCustom Elements
HTML Templates
Not quite!
HTML Imports
Shadow DOM
Custom ElementsHTML Templates
Supported
In development
Under consideration
Not interested
PolymerX-Tag BosonicSmall 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+
HTML Imports
Shadow DOMCustom Elements
HTML Templates
Recommended