LOOK MOM, I'VE BRICKED
MY MOBILE (WEB)
UI COMPONENTS FOR MODERN WEB APPS
CarstenSandtner(@casarock)-FrontendRhein-Main06/2...
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
<...
TEMPLATES: FUTURE
<template>
<div><p>whoopwhoop</p></div>
</template>
TEMPLATES: EXAMPLE
<templateid="my-template">
<div>AwesomeTemplateText</div>
</template>
vart=document.getElementById('my-...
CUSTOM ELEMENTS: CREATE AN ELEMENT
varmyElement=document.registerElement('awesome-element');
//ordocument.createElement(.....
WHY CUSTOMS ELEMENTS?
Because everythingis an element!
Accordeons
Carousels
Sliders
...
EXAMPLE: I WANT A CAROUSEL
EXAMPLE: I WANT A CAROUSEL
Wouldn'titbe coolif...
<my-carouselid="myid">
<div>Slide1</div>
<div>Slide2</div>
...
</my-caro...
EXAMPLE: HOW ABOUT LOGIC?
varmyAwesomeCarousel=Object.create(HTMLElement.prototype);
myAwesomeCarousel.next=function(){
//...
HTML IMPORTS
We wantto reuse our Custom Elements (and more...), right?
<linkrel="import"href="plugin.html">
Includes allda...
WHY SHOULD I USE WEB COMPONENTS?
Encapsulation
Reusability
Robustness
Expressiveness
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!
“Brickis abundle of reusable UIcomponents
created to enable rapid developmentof cross-
browser and mobile-friendly HTML5 w...
COMPONENTS INCLUDED IN BRICK
appbar, calendar, deck, flipbox, layout, slider, tabbar,
toggle.
And could be extended byown ...
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 ...
FLIPBOX
<x-flipboxid="flipbox-custom">
<imgwidth="208"height="303"src="images/Card_back.png">
<imgwidth="208"height="303"s...
MORE FUN WITH LAYOUT, DECKS, CARDS AND
TABBAR!
<x-layout>
<x-appbar><h2>Superawesomeheadline!</h2></x-appbar>
<x-deckselec...
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 in...
.. 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=...
WHAT ABOUT OWN BRICKS?
Step 1: Register your Brick
(function(){
xtag.register('my-brick',{
lifecycle:{
created:function(){...
WHAT ABOUT OWN BRICKS?
Step 2: Add events and methods to your Brick
(function(){
xtag.register('my-brick',{
//...
events:{...
MY BRICK!
The result
I am abrick
MORTAR
MOZILLA MORTAR
Acollection of templates to kickstartapp development
app stub
privileged app stub
game stub
list-detailstub...
START STACKING!
Go, stack your App. Now!;)
Mozilladelivers the bricks ... ... and mortar
THANK YOU!
Carsten Sandtner
@casarock
Mozilla Brick - Frontend Rhein-Main June 2014
Upcoming SlideShare
Loading in...5
×

Mozilla Brick - Frontend Rhein-Main June 2014

3,019

Published on

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

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,019
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
3
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Mozilla Brick - Frontend Rhein-Main June 2014

  1. 1. LOOK MOM, I'VE BRICKED MY MOBILE (WEB) UI COMPONENTS FOR MODERN WEB APPS CarstenSandtner(@casarock)-FrontendRhein-Main06/2014
  2. 2. WHO AM I? Carsten Sandtner //@casarock Head of Developmentat//mediaman GmbH Mozillarep
  3. 3. WEB COMPONENTS Templates Custom Elements HTML Import Shadow Dom, ... and more ... Averyshortandbrieflook!
  4. 4. TEMPLATES: NOW or <scripttype="text/x-template"> </script> <div>Mycontent!</div> <divstyle="display:none"> Herebecontent </div>
  5. 5. TEMPLATES: FUTURE <template> <div><p>whoopwhoop</p></div> </template>
  6. 6. TEMPLATES: EXAMPLE <templateid="my-template"> <div>AwesomeTemplateText</div> </template> vart=document.getElementById('my-template'); document.body.appendChild(t.content.cloneNode());
  7. 7. CUSTOM ELEMENTS: CREATE AN ELEMENT varmyElement=document.registerElement('awesome-element'); //ordocument.createElement(..) <awesome-element></awesome-element>
  8. 8. WHY CUSTOMS ELEMENTS? Because everythingis an element! Accordeons Carousels Sliders ...
  9. 9. EXAMPLE: I WANT A CAROUSEL
  10. 10. EXAMPLE: I WANT A CAROUSEL Wouldn'titbe coolif... <my-carouselid="myid"> <div>Slide1</div> <div>Slide2</div> ... </my-carousel> Indeed -Butlogic??
  11. 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. 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. 13. WHY SHOULD I USE WEB COMPONENTS? Encapsulation Reusability Robustness Expressiveness
  14. 14. POLYMER VS. X-TAGS!
  15. 15. POLYMER - BY GOOGLE http://www.polymer-project.org/
  16. 16. X-TAGS - BY MOZILLA <X> http://x-tags.org/
  17. 17. WHO WINS?
  18. 18. AND HERE COMES BRICK!
  19. 19. “Brickis abundle of reusable UIcomponents created to enable rapid developmentof cross- browser and mobile-friendly HTML5 web applications.”
  20. 20. COMPONENTS INCLUDED IN BRICK appbar, calendar, deck, flipbox, layout, slider, tabbar, toggle. And could be extended byown components
  21. 21. 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>
  22. 22. 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(); });
  23. 23. 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>
  24. 24. MORE FUN WITH LAYOUT, DECKS, CARDS AND TABBAR! - CONT.
  25. 25. ... 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
  26. 26. .. AND EVEN MORE. OR BUILD YOUR OWN ... .. Bricks! Later!
  27. 27. 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> ...
  28. 28. WHAT ABOUT OWN BRICKS? Step 1: Register your Brick (function(){ xtag.register('my-brick',{ lifecycle:{ created:function(){ this.innerHTML='Iamabrick'; } } }); })();
  29. 29. 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!
  30. 30. MY BRICK! The result I am abrick
  31. 31. MORTAR
  32. 32. 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
  33. 33. START STACKING! Go, stack your App. Now!;) Mozilladelivers the bricks ... ... and mortar
  34. 34. THANK YOU! Carsten Sandtner @casarock
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×