Mozilla Brick - Frontend Rhein-Main June 2014
-
Upload
carsten-sandtner -
Category
Technology
-
view
1.755 -
download
0
description
Transcript of Mozilla Brick - Frontend Rhein-Main June 2014
![Page 1: Mozilla Brick - Frontend Rhein-Main June 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/5484ff41b4795984178b48c7/html5/thumbnails/1.jpg)
LOOK MOM, I'VE BRICKEDMY MOBILE (WEB)
UI COMPONENTS FOR MODERN WEB APPSCarsten Sandtner (@casarock) - Frontend Rhein-Main 06/2014
![Page 2: Mozilla Brick - Frontend Rhein-Main June 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/5484ff41b4795984178b48c7/html5/thumbnails/2.jpg)
WHO AM I?Carsten Sandtner // @casarock
Head of Development at //mediaman GmbHMozilla rep
![Page 3: Mozilla Brick - Frontend Rhein-Main June 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/5484ff41b4795984178b48c7/html5/thumbnails/3.jpg)
WEB COMPONENTSTemplatesCustom ElementsHTML ImportShadow Dom, ... and more ...
A very short and brief look!
![Page 4: Mozilla Brick - Frontend Rhein-Main June 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/5484ff41b4795984178b48c7/html5/thumbnails/4.jpg)
TEMPLATES: NOW
or
<script type="text/x-template">
</script> <div>Mycontent!</div>
<div style="display:none"> Here be content</div>
![Page 5: Mozilla Brick - Frontend Rhein-Main June 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/5484ff41b4795984178b48c7/html5/thumbnails/5.jpg)
TEMPLATES: FUTURE<template> <div><p>whoop whoop</p></div></template>
![Page 6: Mozilla Brick - Frontend Rhein-Main June 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/5484ff41b4795984178b48c7/html5/thumbnails/6.jpg)
TEMPLATES: EXAMPLE<template id="my-template"> <div>Awesome Template Text</div></template>
var t = document.getElementById('my-template');document.body.appendChild(t.content.cloneNode());
![Page 7: Mozilla Brick - Frontend Rhein-Main June 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/5484ff41b4795984178b48c7/html5/thumbnails/7.jpg)
CUSTOM ELEMENTS: CREATE AN ELEMENTvar myElement = document.registerElement('awesome-element');// or document.createElement(..)
<awesome-element></awesome-element>
![Page 8: Mozilla Brick - Frontend Rhein-Main June 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/5484ff41b4795984178b48c7/html5/thumbnails/8.jpg)
WHY CUSTOMS ELEMENTS?Because everything is an element!
AccordeonsCarouselsSliders...
![Page 9: Mozilla Brick - Frontend Rhein-Main June 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/5484ff41b4795984178b48c7/html5/thumbnails/9.jpg)
EXAMPLE: I WANT A CAROUSEL
![Page 10: Mozilla Brick - Frontend Rhein-Main June 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/5484ff41b4795984178b48c7/html5/thumbnails/10.jpg)
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??
![Page 11: Mozilla Brick - Frontend Rhein-Main June 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/5484ff41b4795984178b48c7/html5/thumbnails/11.jpg)
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);
![Page 12: Mozilla Brick - Frontend Rhein-Main June 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/5484ff41b4795984178b48c7/html5/thumbnails/12.jpg)
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));
![Page 13: Mozilla Brick - Frontend Rhein-Main June 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/5484ff41b4795984178b48c7/html5/thumbnails/13.jpg)
WHY SHOULD I USE WEB COMPONENTS?EncapsulationReusabilityRobustnessExpressiveness
![Page 14: Mozilla Brick - Frontend Rhein-Main June 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/5484ff41b4795984178b48c7/html5/thumbnails/14.jpg)
![Page 15: Mozilla Brick - Frontend Rhein-Main June 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/5484ff41b4795984178b48c7/html5/thumbnails/15.jpg)
POLYMER VS. X-TAGS!
![Page 18: Mozilla Brick - Frontend Rhein-Main June 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/5484ff41b4795984178b48c7/html5/thumbnails/18.jpg)
WHO WINS?
![Page 19: Mozilla Brick - Frontend Rhein-Main June 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/5484ff41b4795984178b48c7/html5/thumbnails/19.jpg)
AND HERE COMES BRICK!
![Page 20: Mozilla Brick - Frontend Rhein-Main June 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/5484ff41b4795984178b48c7/html5/thumbnails/20.jpg)
“Brick is a bundle of reusable UI componentscreated to enable rapid development of cross-
browser and mobile-friendly HTML5 webapplications.”
![Page 21: Mozilla Brick - Frontend Rhein-Main June 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/5484ff41b4795984178b48c7/html5/thumbnails/21.jpg)
COMPONENTS INCLUDED IN BRICKappbar, calendar, deck, flipbox, layout, slider, tabbar,toggle.
And could be extended by own components
![Page 22: Mozilla Brick - Frontend Rhein-Main June 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/5484ff41b4795984178b48c7/html5/thumbnails/22.jpg)
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>
![Page 23: Mozilla Brick - Frontend Rhein-Main June 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/5484ff41b4795984178b48c7/html5/thumbnails/23.jpg)
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();});
![Page 24: Mozilla Brick - Frontend Rhein-Main June 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/5484ff41b4795984178b48c7/html5/thumbnails/24.jpg)
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>
![Page 25: Mozilla Brick - Frontend Rhein-Main June 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/5484ff41b4795984178b48c7/html5/thumbnails/25.jpg)
MORE FUN WITH LAYOUT, DECKS, CARDS ANDTABBAR! - CONT.
![Page 26: Mozilla Brick - Frontend Rhein-Main June 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/5484ff41b4795984178b48c7/html5/thumbnails/26.jpg)
... 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
![Page 27: Mozilla Brick - Frontend Rhein-Main June 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/5484ff41b4795984178b48c7/html5/thumbnails/27.jpg)
.. AND EVEN MORE. OR BUILD YOUR OWN ..... Bricks!
Later!
![Page 28: Mozilla Brick - Frontend Rhein-Main June 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/5484ff41b4795984178b48c7/html5/thumbnails/28.jpg)
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>...
![Page 29: Mozilla Brick - Frontend Rhein-Main June 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/5484ff41b4795984178b48c7/html5/thumbnails/29.jpg)
WHAT ABOUT OWN BRICKS?Step 1: Register your Brick
(function() { xtag.register('my-brick', { lifecycle: { created: function() { this.innerHTML = 'I am a brick'; } } });})();
![Page 30: Mozilla Brick - Frontend Rhein-Main June 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/5484ff41b4795984178b48c7/html5/thumbnails/30.jpg)
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!
![Page 31: Mozilla Brick - Frontend Rhein-Main June 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/5484ff41b4795984178b48c7/html5/thumbnails/31.jpg)
MY BRICK!The result
I am a brick
![Page 32: Mozilla Brick - Frontend Rhein-Main June 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/5484ff41b4795984178b48c7/html5/thumbnails/32.jpg)
MORTAR
![Page 33: Mozilla Brick - Frontend Rhein-Main June 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/5484ff41b4795984178b48c7/html5/thumbnails/33.jpg)
MOZILLA MORTARA collection of templates to kickstart app development
app stubprivileged app stubgame stublist-detail stubtabview stubtemplate-template
https://github.com/mozilla/mortar
![Page 34: Mozilla Brick - Frontend Rhein-Main June 2014](https://reader033.fdocuments.us/reader033/viewer/2022051514/5484ff41b4795984178b48c7/html5/thumbnails/34.jpg)
START STACKING!Go, stack your App. Now! ;)
Mozilla delivers the bricks ... ... and mortar