Mozilla Brick - Frontend Rhein-Main June 2014

LOOK MOM, I'VE BRICKED
MY MOBILE (WEB)
UI COMPONENTS FOR MODERN WEB APPS
CarstenSandtner(@casarock)-FrontendRhein-Main06/2014

WHO AM I?
Carsten Sandtner //@casarock
Head of Developmentat//mediaman GmbH
Mozillarep

WEB COMPONENTS
Templates
Custom Elements
HTML Import
Shadow Dom,
... and more ...
Averyshortandbrieflook!

TEMPLATES: NOW
or
<scripttype="text/x-template">
</script>
<div>Mycontent!</div>
<divstyle="display:none">
Herebecontent
</div>

TEMPLATES: FUTURE
<template>
<div><p>whoopwhoop</p></div>
</template>

TEMPLATES: EXAMPLE
<templateid="my-template">
<div>AwesomeTemplateText</div>
</template>
vart=document.getElementById('my-template');
document.body.appendChild(t.content.cloneNode());

CUSTOM ELEMENTS: CREATE AN ELEMENT
varmyElement=document.registerElement('awesome-element');
//ordocument.createElement(..)
<awesome-element></awesome-element>

WHY CUSTOMS ELEMENTS?
Because everythingis an element!
Accordeons
Carousels
Sliders
...

EXAMPLE: I WANT A CAROUSEL
Wouldn'titbe coolif...
<my-carouselid="myid">
<div>Slide1</div>
<div>Slide2</div>
...
</my-carousel>
Indeed -Butlogic??

EXAMPLE: HOW ABOUT LOGIC?
varmyAwesomeCarousel=Object.create(HTMLElement.prototype);
myAwesomeCarousel.next=function(){
//Code...
};
myAwesomeCarousel.previous=function(){
//Code...
};
//Registercarouselelementwithitsdefaultprototype
varMyCarousel=document.registerElement('my-carousel',{
prototype:myAwesomeCarousel
});
//Instantiateacarouselandaddtodom.
varmyCarousel=document.createElement('my-carousel');
document.body.appendChild(myCarousel);

HTML IMPORTS
We wantto reuse our Custom Elements (and more...), right?
<linkrel="import"href="plugin.html">
Includes alldatafor an element: Templates, scripts etc.
Is NOT(!) been rendered!
Dom property'import'for accessingelements
Use standard queryselectors for imported fragments
varlink=document.querySelector('link[rel="import"]');
varcontent=link.import;
varel=content.querySelector('.someclass');
document.body.appendChild(el.cloneNode(true));

WHY SHOULD I USE WEB COMPONENTS?
Encapsulation
Reusability
Robustness
Expressiveness

Mozilla Brick - Frontend Rhein-Main June 2014

POLYMER - BY GOOGLE
http://www.polymer-project.org/

X-TAGS - BY MOZILLA
<X>
http://x-tags.org/

“Brickis abundle of reusable UIcomponents
created to enable rapid developmentof cross-
browser and mobile-friendly HTML5 web
applications.”

COMPONENTS INCLUDED IN BRICK
appbar, calendar, deck, flipbox, layout, slider, tabbar,
toggle.
And could be extended byown components

DEMO: CALENDER
July 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-flipboxid="flipbox-custom">
<imgwidth="208"height="303"src="images/Card_back.png">
<imgwidth="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>Superawesomeheadline!</h2></x-appbar>
<x-deckselected-index="0">
<x-cardid="card1">
I'mCard1!
</x-card>
<x-cardid="card2">
I'mCard2!
</x-card>
</x-deck>
<x-tabbar>
<x-tabbar-tabtarget-selector="#card1">1</x-tabbar-tab>
<x-tabbar-tabtarget-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) ...
Components
appbar
calendar
deck
flipbox
layout
slider
tabbar
toggle
Usage
Usage
To include Brick in your project, include your downloaded stylesheet and script
files 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 in
your HTML markup. (See individual component docs for details.)
Important: To run code relying on any of Brick's tags, make sure to wait until
the x-tags library's "DOMComponentsLoaded" event instead of just
window.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 USE
Download Brick: https://github.com/mozilla/brick/
Add CSS and JS to your project
...
<linkrel="stylesheet"href="../lib/css/brick.min.css">
...
...
<scriptsrc="../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='Iamabrick';
}
}
});
})();

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 veryown brick!

MY BRICK!
The result
I am abrick

MOZILLA MORTAR
Acollection of templates to kickstartapp development
app stub
privileged app stub
game stub
list-detailstub
tabview stub
template-template
https://github.com/mozilla/mortar

START STACKING!
Go, stack your App. Now!;)
Mozilladelivers the bricks ... ... and mortar

THANK YOU!
Carsten Sandtner
@casarock

Mozilla Brick - Frontend Rhein-Main June 2014

Related slideshows

More Related Content

Mozilla Brick - Frontend Rhein-Main June 2014