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


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-button Settings


Alert Confirm
Prompt Action


  • <gaia-checkbox>

  • <gaia-slider>


    Item 1 Item 2 Item 3 Item 4 Item 5


    Let's toast





    • Each component has its own repo
    • Easily Installable
    • Versioned separately
    • Tested separately
    • Issues tracked separately
    • Supports all module formats (UMD)


    HTML Imports...?

    document.registerElement('x-foo', {
      prototype: {
        createdCallback: function() {
          this.createShadowRoot().innerHTML = `


    `; } } });


    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));


    Powered by CSS Variables

    .theme-settings {
      --background: #f4f4f4;
      --background-plus: #ffffff;
      --background-minus: #858585;
      --background-minus-minus: #a6a6a6;
      --highlight-color: #00caf2;
      --border-color: #e7e7e7;
        <link rel="stylesheet" href="gaia-theme.css">
      <body class="theme-settings"></body>


    Unit tests

    • Karma: Runs tests in real browsers
    • Mocha: JS test runner
    • SinonJS: Stubbing/mocking
    • Chai: Assertions


    • MarionetteJS: Drives the browser
    • Mocha: Test runner


    • MarionetteJS: Perform a11y checks
    • Axe: Checks for a11y defects

    CI via Travis

    Tests run automatically

    language: node_js
      - '0.10'
      - npm install
      - export DISPLAY=:99.0
      - sh -e /etc/init.d/xvfb start
      - $CI_ACTION
        - TEST_SUITE=unit
        - CI_ACTION="npm run test-lint"
        - CI_ACTION="npm run test-unit"
        - CI_ACTION="npm run test-integration"


    • Dependencies flattened to a known directory
    • Github is the sole registry: publish once
    • Git tags as versions: version once
    • Dependencies deduped

    Typical workflow

    1. Submit a pull-request to a component's repo
    2. Reviewed by component owner
    3. Merged into `master` branch
    4. Owner stamps new version: git tag v0.1.0
    5. Owner pushes tag to Github
    6. Component is updated to new version in Gaia
    7. 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!


    No SIM card is present Are you sure you want to delete this contact? Device name

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu mollis tortor. Lab mit dior tempor incidentunt ut et dolore magna...