Look mom, I've bricked my mobile (web)

UI Components for Modern Web Apps

Carsten Sandtner (@casarock) - Frontend Rhein-Main 06/2014

Who am I?

Carsten Sandtner // @casarock
Head of Development at //mediaman GmbH
Mozilla rep

Web Components

  • Templates
  • Custom Elements
  • HTML Import
  • Shadow Dom,
    ... and more ...
A very short and brief look!

Templates: Now

<script type="text/x-template">


<div style="display:none">
    Here be content

Templates: Future

    <div><p>whoop whoop</p></div>

Templates: Example

<template id="my-template">
    <div>Awesome Template Text</div>

var t = document.getElementById('my-template');

Custom Elements: create an Element

var myElement = document.registerElement('awesome-element');
// or document.createElement(..)


Why Customs Elements?

Because everything is an element!

  • Accordeons
  • Carousels
  • Sliders
  • ...

Example: I want a Carousel

Example: I want a Carousel

Wouldn't it be cool if...

<my-carousel id="myid">
    <div>Slide 1</div>
    <div>Slide 2</div>

Indeed - But logic??

Example: How about logic?

var myAwesomeCarousel = Object.create(HTMLElement.prototype);
myAwesomeCarousel.next = function() {
    // Code...
myAwesomeCarousel.previous = function() {
    // Code...

// Register carousel element with its default prototype
var MyCarousel = document.registerElement('my-carousel', {
    prototype: myAwesomeCarousel

// Instantiate a carousel and add to dom.
var myCarousel = document.createElement('my-carousel');


HTML Imports

We want to reuse our Custom Elements (and more...), right?

<link rel="import" href="plugin.html">
  • Includes all data for an element: Templates, scripts etc.
  • Is NOT(!) been rendered!
  • Dom property 'import' for accessing elements
  • Use standard query selectors for imported fragments

var link = document.querySelector('link[rel="import"]');
var content = link.import;
var el = content.querySelector('.someclass');


Why should I use Web Components?

  • Encapsulation
  • Reusability
  • Robustness
  • Expressiveness

Polymer vs. X-Tags!

Polymer - by Google


X-Tags - by Mozilla



Who wins?

and here comes BRICK!

“Brick is a bundle of reusable UI components created to enable rapid development of cross-browser and mobile-friendly HTML5 web applications.”

Components included in Brick

  • appbar
  • calendar
  • deck
  • flipbox
  • layout
  • slider
  • tabbar
  • toggle

And could be extended by own components

Demo: Calender



<x-flipbox id="flipbox-custom">
    <img width="208" height="303" src="images/Card_back.png">
    <img width="208" height="303" src="images/Card_front.png">

myflipBox.addEventListener("click", function(){

More fun with Layout, Decks, cards and Tabbar!

    <x-appbar><h2>Super awesome headline!</h2></x-appbar>
    <x-deck selected-index="0">
        <x-card id="card1">
            I'm Card 1!
        <x-card id="card2">
            I'm Card 2!
        <x-tabbar-tab target-selector="#card1">1</x-tabbar-tab>
        <x-tabbar-tab target-selector="#card2">2</x-tabbar-tab>

More fun with Layout, Decks, cards and Tabbar! - cont.

... and there is more (build in) ...


.. and even more. Or build your own ...

.. Bricks!


How to use

Download Brick: https://github.com/mozilla/brick/

Add CSS and JS to your project

<link rel="stylesheet" href="../lib/css/brick.min.css">

<script src="../lib/js/brick.min.js"></script>

What about own bricks?

Step 1: Register your Brick

(function() {
    xtag.register('my-brick', {
        lifecycle: {
            created: function() {
                this.innerHTML = 'I am a brick';

What about own bricks?

Step 2: Add events and methods to your Brick

(function() {
    xtag.register('my-brick', {
        // ...
        events: {
            'tap': function(e) {
                this.style.backgroundColor =
                  '#' + Math.round(0xFFFFFF * Math.random())
        methods: {
            colorful: function() {
                this.style.backgroundColor =
                  '#' + Math.round(0xFFFFFF * Math.random())

Your very own brick!

My Brick!

The result


Mozilla mortar

A collection of templates to kickstart app development

  • app stub
  • privileged app stub
  • game stub
  • list-detail stub
  • tabview stub
  • template-template


Start stacking!

Go, stack your App. Now! ;)

Mozilla delivers the bricks ... ... and mortar

Thank you!

Carsten Sandtner