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>Mycontent!</div>
</script>

or


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

Templates: Future


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

Templates: Example


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

var t = document.getElementById('my-template');
document.body.appendChild(t.content.cloneNode());

Custom Elements: create an Element


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

<awesome-element></awesome-element>

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>
    ...
</my-carousel>

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');
document.body.appendChild(myCarousel);

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

document.body.appendChild(el.cloneNode(true));

Why should I use Web Components?

  • Encapsulation
  • Reusability
  • Robustness
  • Expressiveness

Polymer vs. X-Tags!

Polymer - by Google


http://www.polymer-project.org/

X-Tags - by Mozilla



<X>

http://x-tags.org/

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-calendar></x-calendar>

Flipbox


<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">
</x-flipbox>
            

myflipBox.addEventListener("click", function(){
    flipBox.toggle();
});

More fun with Layout, Decks, cards and Tabbar!


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

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

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

http://mozbrick.github.io/docs.html

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

.. Bricks!

Later!

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())
                  .toString(16);
             }
        },
        methods: {
            colorful: function() {
                this.style.backgroundColor =
                  '#' + Math.round(0xFFFFFF * Math.random())
                  .toString(16);
            }
        }
    });
})();

Your very own brick!

My Brick!

The result

Mortar

Mozilla mortar

A collection of templates to kickstart app development

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

https://github.com/mozilla/mortar

Start stacking!

Go, stack your App. Now! ;)

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

Thank you!

Carsten Sandtner
@casarock