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