My slides of my talk about Mozilla Brick at Frontend Rhein-Main Usergroup.

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

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

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

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

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

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

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

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

9. EXAMPLE: I WANT A CAROUSEL

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

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

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

13. WHY SHOULD I USE WEB COMPONENTS?
Encapsulation
Reusability
Robustness
Expressiveness

15. POLYMER VS. X-TAGS!

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

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

18. WHO WINS?

19. AND HERE COMES BRICK!

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

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

22. 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>

23. 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();
});

24. 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>

25. MORE FUN WITH LAYOUT, DECKS, CARDS AND
TABBAR! - CONT.

26. ... 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

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

28. 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>
...

29. WHAT ABOUT OWN BRICKS?
Step 1: Register your Brick
(function(){
xtag.register('my-brick',{
lifecycle:{
created:function(){
this.innerHTML='Iamabrick';
}
}
});
})();

30. 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!

31. MY BRICK!
The result
I am abrick

32. MORTAR

33. 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

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

35. THANK YOU!
Carsten Sandtner
@casarock