Web Components in Firefox OS
by Wilson Page
What we'll cover
- Solving real problems with web-components
- Demo some FirefoxOS components
- Workflow and patterns
- What's next
What are Web Components for?
"A collection of low-level, framework agnostic APIs for creating portable UI pieces"
APIs remain out of reach
ðŸ˜
dom.webcomponents.enabled
Sharing UI in FirefoxOS
Core apps need to look related
Sharing common UI brings consistency
Previously we used simple CSS
But we ran into some problems …
- Users have to write exactly the right markup
- Styling can clash with external CSS
- Logic-less CSS: prevents rich interactions
- Difficult to update: Due to tailored implementations
Web Components solve many of these issues
- Structural markup bundled: not written by users
- Styling protected from external CSS
- Can come with JS logic as well as styling
- Implementation details hidden for simple updates
- Users get RTL and a11y out the box
A new approach
<gaia-text-input>
<gaia-button>
<gaia-dialog>
<gaia-switch>
<gaia-checkbox>
<gaia-slider>
<gaia-tabs>
<gaia-toast>
<gaia-header>
<gaia-picker-date>
<gaia-picker-time>
<gaia-fast-list>
- Each component has its own repo
- Easily Installable
- Versioned separately
- Tested separately
- Issues tracked separately
- Supports all module formats (UMD)
Modules
HTML Imports...?
document.registerElement('x-foo', {
prototype: {
createdCallback: function() {
this.createShadowRoot().innerHTML = `
title
`;
}
}
});'UMD'
;(function(define){define(function(require,exports,module){
var dependency = require('some-dependency');
...
module.exports = { exported: 'stuff' };
});})(typeof define=='function'&&define.amd?define
:(function(n,w){return typeof module=='object'?function(c){
c(require,exports,module);}:function(c){var m={exports:{}};c(function(n){
return w[n];},m.exports,m);w[n]=m.exports;};})('module-name',this));Theming
Powered by CSS Variables
.theme-settings {
--background: #f4f4f4;
--background-plus: #ffffff;
--background-minus: #858585;
--background-minus-minus: #a6a6a6;
--highlight-color: #00caf2;
--border-color: #e7e7e7;
}<html>
<head>
<link rel="stylesheet" href="gaia-theme.css">
</head>
<body class="theme-settings"></body>
</html>Testing
Unit tests
- Karma: Runs tests in real browsers
- Mocha: JS test runner
- SinonJS: Stubbing/mocking
- Chai: Assertions
Integration
- MarionetteJS: Drives the browser
- Mocha: Test runner
Accessibility
- MarionetteJS: Perform a11y checks
- Axe: Checks for a11y defects
CI via Travis
Tests run automatically
language: node_js
node_js:
- '0.10'
install:
- npm install
before_script:
- export DISPLAY=:99.0
- sh -e /etc/init.d/xvfb start
script:
- $CI_ACTION
env:
global:
- TEST_SUITE=unit
matrix:
- CI_ACTION="npm run test-lint"
- CI_ACTION="npm run test-unit"
- CI_ACTION="npm run test-integration"
Installing
- Dependencies flattened to a known directory
- Github is the sole registry: publish once
- Git tags as versions: version once
- Dependencies deduped
Typical workflow
- Submit a pull-request to a component's repo
- Reviewed by component owner
- Merged into `master` branch
- Owner stamps new version:
git tag v0.1.0 - Owner pushes tag to Github
- Component is updated to new version in Gaia
- New files checked-in to Gaia
What's next?
- Improve cross-browser support as platform stabilises
- Continue to replace old CSS components
- Increase test coverage
- Hand over ownership
- Create more components!