LOOK MOM, I'VE BRICKEDMY MOBILE (WEB)

UI COMPONENTS FOR MODERN WEB APPSCarsten Sandtner (@casarock) - Frontend Rhein-Main 06/2014

WHO AM I?Carsten Sandtner // @casarock

Head of Development at //mediaman GmbHMozilla rep

WEB COMPONENTSTemplatesCustom ElementsHTML ImportShadow Dom, ... and more ...

A very short and brief look!

TEMPLATES: NOW

or

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

</script> <div>Mycontent!</div>

<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 ELEMENTvar myElement = document.registerElement('awesome-element');// or document.createElement(..)

<awesome-element></awesome-element>

WHY CUSTOMS ELEMENTS?Because everything is an element!

AccordeonsCarouselsSliders...

EXAMPLE: I WANT A CAROUSEL

EXAMPLE: I WANT A CAROUSELWouldn'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 prototypevar 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 IMPORTSWe 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 elementsUse 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?EncapsulationReusabilityRobustnessExpressiveness

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 componentscreated to enable rapid development of cross-

browser and mobile-friendly HTML5 webapplications.”

COMPONENTS INCLUDED IN BRICKappbar, calendar, deck, flipbox, layout, slider, tabbar,toggle.

And could be extended by own components

DEMO: CALENDERJuly 2014

Sun Mon Tue Wed Thu Fri Sat

29 30 1 2 3 4 5

6 7 8 9 10 11 12

13 14 15 16 17 18 19

20 21 22 23 24 25 26

27 28 29 30 31 1 2

<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 ANDTABBAR!

<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 ANDTABBAR! - CONT.

... AND THERE IS MORE (BUILD IN) ...Components

appbar

calendar

deck

flipbox

layout

slider

tabbar

toggle

Usage UsageTo include Brick in your project, include your downloaded stylesheet and scriptfiles in your project's page like normal:

<link rel="stylesheet" type="text/css" href="brick-1.0.1.css"/><script type="text/javascript" src="brick-1.0.1.js"></script>

Using any of Brick's components is as simple as including the respective tag inyour HTML markup. (See individual component docs for details.)

Important: To run code relying on any of Brick's tags, make sure to wait untilthe x-tags library's "DOMComponentsLoaded" event instead of justwindow.onload:

document.addEventListener('DOMComponentsLoaded', function(){ // run code here...});

appbar View Demo » (demos/x-tag-http://mozbrick.github.io/docs.html

.. AND EVEN MORE. OR BUILD YOUR OWN ..... Bricks!

Later!

HOW TO USEDownload 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

I am a brick

MORTAR

MOZILLA MORTARA collection of templates to kickstart app development

app stubprivileged app stubgame stublist-detail stubtabview stubtemplate-template

https://github.com/mozilla/mortar

START STACKING!Go, stack your App. Now! ;)

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

THANK YOU!Carsten Sandtner

@casarock