In this article we explore 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.
The web components problem
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
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.
The web components standard
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 their own elements. Instead of writing a slider control and make it work after the browser already displayed the document, you define a slider element beforehand and allow it to 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 process already happens: if you for example add a
The idea of web components is simply to extend this functionality (also known as shadow DOM) to cater for a wider, extensible range of components.
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, powered by our XTags library (read more about x-tags on MDN). 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! <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.