Your SlideShare is downloading. ×
0
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014
Mozilla Brick - Frontend Rhein-Main June 2014
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Mozilla Brick - Frontend Rhein-Main June 2014

2,967

Published on

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

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

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

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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
  • 14. POLYMER VS. X-TAGS!
  • 15. POLYMER - BY GOOGLE http://www.polymer-project.org/
  • 16. X-TAGS - BY MOZILLA <X> http://x-tags.org/
  • 17. WHO WINS?
  • 18. AND HERE COMES BRICK!
  • 19. “Brickis abundle of reusable UIcomponents created to enable rapid developmentof cross- browser and mobile-friendly HTML5 web applications.”
  • 20. COMPONENTS INCLUDED IN BRICK appbar, calendar, deck, flipbox, layout, slider, tabbar, toggle. And could be extended byown components
  • 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. 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. 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. MORE FUN WITH LAYOUT, DECKS, CARDS AND TABBAR! - CONT.
  • 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. .. AND EVEN MORE. OR BUILD YOUR OWN ... .. Bricks! Later!
  • 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. WHAT ABOUT OWN BRICKS? Step 1: Register your Brick (function(){ xtag.register('my-brick',{ lifecycle:{ created:function(){ this.innerHTML='Iamabrick'; } } }); })();
  • 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. MY BRICK! The result I am abrick
  • 31. MORTAR
  • 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. START STACKING! Go, stack your App. Now!;) Mozilladelivers the bricks ... ... and mortar
  • 34. THANK YOU! Carsten Sandtner @casarock

×