Firefox OS Development: Web Components and Mozilla Brick

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

There is a problem with the Web as a platform for applications: HTML, the language that makes it easy to mark up documents and give them meaning doesn’t have enough elements to build applications. There are quite a few new elements in the HTML5 spec, but their support is sketchy across browsers and there are still a lot of widgets missing that other platforms like Flex or iOS give developers out-of-the-box. As a result, developers build their own “widgets” like menu bars, slider controls and calendars using non-semantic HTML (mostly DIV elements) and make them interactive using JavaScript and theme-able using CSS.

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.

To work around that problem a few companies and standards body members are working on the Web Components specification which allows developers to extend the browser’s understanding of markup with own elements. Instead of writing a slider control and make it work after the browser already displayed the document, you define a slider element and become part of the normal display flow. This means our widgets get more responsive, don’t work against the browser’s rendering flow and all in all perform better. Especially on low spec mobile devices this is a massive win. The whole thing already happens: if you for example add a video element to the document you see a video controller with a timed slider bar, a play button and volume controls. All of these are HTML, CSS and JavaScript and you can even see them in the debugging tools:

Anatomy of a video element

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 deck.shuffleNext(); function.

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.

View full post on Mozilla Hacks – the Web developer blog

4 thoughts on “Firefox OS Development: Web Components and Mozilla Brick

  1. pd

    Not having to turn on the display of psuedo element styles from a submenu, as is the case in Firebug, is an improvement. Responsive design tools are an improvement that Firebug does not yet have.

    For all those Firebug users out there, whom Mozilla appears to have shifted focus away from, please, for the love of the open web, look into this bug:

    https://bugzilla.mozilla.org/show_bug.cgi?id=815603

    as a matter of priority. After all, people have been using Firebug for years. Mozilla encourages people to support the open web and thus Firefox. Developers are the ones who ensure standards are followed, we’ve been punching away at keyboards and clicking Firebug tabs for years in an attempt to build your open web. We deserve a functional Firebug.

  2. Chris Heilmann

    Hello Ivan,

    currently there is no drive to make web component based solutions backwards compatible with older versions of Internet Explorer, mainly because the architecture of that browser was incompatible with the agreed standards the whole idea of web components is built on. I understand your frustration and the best way to work around is let the bricks fallback to a simpler interface. A deck for example could be a list with anchors to jump to.

    Support for older IE is a massive overhead in testing any new app and in most cases the effort is not justified looking at the amount of users. In your case there is a company policy reason not to upgrade, but the sad truth is that it is simply dangerous to run outdated software of any kind on computers connected to the web. Old Internet Explorer is not only a nuisance for web developers, it is a very interesting attack vector for crackers and malware distributors. Even Microsoft has given up on IE6 (http://www.ie6countdown.com/).

  3. Ivan Dejanovic

    I just ran couple of demos from Bricks web site and they look very nice.

    What I noticed in the article that X-Tags are foundation for Brick, if I understood the article correctly. So I went to X-Tag site and saw the browsers that are supported. What caught my attention was IE9+ compatible.

    I tried Brick demos in IE8 the default browser on my company provided computer, the one I use for work, and found they don’t work.

    As a developer I have latest Firefox and Chrome installed on my work computer but all non developers in the company I work for, it is a large international US owned company, have only IE8. We had clients, international financial institutions, that had an explicit request that products we deliver to them must work in IE7.

    I am not sure what is the current market share of each IE version, but I now a lot of companies are slow to adopt new version. Is there any plan of making X-Tag and Brick work on IE8 and lower version? There are still users that at work at least have to work with browsers installed by the company and who can not change or upgrade them.

    Thanks for the great presentation and please keep working on Brick. It seems promising.

Leave a Reply