In this edition of “Firefox OS: The platform HTML5 deserves” (the previous six videos are published here), Mozilla’s Principal Evangelist Chris Heilmann (@codepo8) grilled Mozilla’s “Senior HTML5 Engineer Angle Bracket Coordinator” Matthew Claypotch (@potch) about the exciting new possibilities of Web Components for Web App developers and how Mozilla’s Brick library, a collection of custom elements to build applications with, can help with the transition. You can watch the interview on YouTube.
The Why of Web components
This is a great workaround but the issue is that we add on top of the functionality of browsers instead of extending the way they already function. In other words, a browser needs to display HTML and does a great job doing that at least 60 frames per second. We then add our own widget functionality on top of that and animate and change the display without notifying the browser. We constantly juggle the performance of the browser and our own code on top of it. This leads to laggy interfaces, battery drain and flickering.
Firefox OS, being targeted at low end devices can benefit a lot from widgets that are part of the rendering flow, which is why Mozilla created Mozilla Brick, a collection of custom elements to build applications with. Earlier we introduced the concept using a library called XTags, which powers Brick. Using Brick, it is very simple to create for example a deck based application layout using the following markup:
<x-deck selected-index="0"> <x-card> 0<span>I'm the first card!</span> </x-card> <x-card> 1 <span> These cards can contain any markup!<br /> <img src="../../site/img/grounds_keeping_it_real_s3.gif"> <img src="../../site/img/grounds_keeping_it_real_s1.gif"> <img src="../../site/img/grounds_keeping_it_real_s2.gif"> </span> </x-card> <x-card> 2 <img src="../../site/img/thumbs_up.gif"> </x-card> </x-deck>
The resulting app consists of three decks that can be animated into another without having to do anything but call a
Web Components are a huge topic right now and many libraries and frameworks appear each week. We hope that by using Brick we can enable developers to build very responsive apps for Firefox OS quickly and cleanly and leave the pain of making your app perform really well up to the OS.
About Chris Heilmann
Evangelist for HTML5 and open web. Let's fix this!