follow me on twitter

follow me on twitter.

Tuesday, September 18, 2012


Browser technology advanced a lot in recent years. The hype about HTML5 spotlighted how much browsers improved. Still, HTML5 is a low level technology compared to other UI toolkits common in languages like .NET, Java and Flex. These are much more component based providing big building blocks for developers to assemble applications quickly. Sure, there is extjs and several others libs providing equally rich component sets made on top of low-level HTML/JavaScript/CSS.

Anyway, with the Web Components spec currently in the works of standard bodies and browser makers, HTML5 is going to take a next step towards a full-fledged RIA platform. Web Components roughly includes templates, decorators and custom tags. Rather a technical implication than a feature is the shadow DOM which divides the DOM in initial content and shadow elements.

For custom elements there is already a working implementation available. At Mozilla provides an polyfill in JavaScript which is on standards track. The strategy is obvious: create a specification of a feature, provide polyfill implementation for early use which finally can be replaced by a native implementation. Where this is possible, this is a good plan! It also helps to get early feedback on something like a 'reference implementation'. So how does this x-tag thingy work in use? It's pretty simple. See how to create a map:

   <link rel="stylesheet" href="/x-tags/map/map.css"/>
   <script src="/x-tags/x-tag.js"> </script>
   <script src="/x-tags/map/map.js"> </script>   
      #detail-map {
          box-sizing: border-box;
          width: 100%;
          height: 480px;
      x-map {
          border: 1px solid #black;
    <x-map id="detail-map" data-key="xxx"></x-map>

The code samples shows how to include the xtag library providing support for all browsers including IE9 and better (so it completely safe for the mobile web). The map.js script registers a custom element and defines form and behavior. Once registered, instances of the element are recognized in the DOM and initialized accordingly. The web component spec defines a couple of life cycle events for custom elements (like created, inserted or attributeChanged). This way logic shipped with a custom element can be hooked in and do its augmenting work.

These technical details are basically interesting for component or framework developers only. An application developer does not have to fiddle around often with these details. More often he is interested in a set of components to quickly wire up an application. That's what x-tags is meant for. At you will find a JavaScript implementation of x-tag which ships with a bunch of nice components. I built a first FirefoxOS application with these and found them very handy. There is an x-slidebox and an x-flipbox element with which I quickly was able to construct a basic navigation behavior for my application in a declarative way.

        <x-map id="map" data-key="xxx"></x-map>
      <x-flipbox class=" x-flip-direction-right">
<div>Front side</div>
<div>Back side</div>

Here again we have to include the JavaScript and CSS files in the header or at the end of the document:

<link rel="stylesheet" type="text/css" href="/x-tags/map/map.css"/>
<link rel="stylesheet" type="text/css" href="/x-tags/slidebox/slidebox.css"/>
<link rel="stylesheet" type="text/css" href="/x-tags/flipbox/flipbox.css"/>
<script src="/x-tags/x-tag.js"> </script>
<script src="/x-tags/slidebox/slidebox.js"> </script>
<script src="/x-tags/map/map.js"> </script>
<script src="/x-tags/flipbox/flipbox.js"> </script>

All in all x-tags or better custom elements are a promising feature of HTML5 to make development of large applications and library integration more convenient. Thanks to JavaScript polyfills, it can be used much earlier than before all browser support it natively. I'm quite sure JavaScript libraries will jump on that train once available because it is easy to do and it offers a nice way to integrate third-party behavior in a declarative and semantic way.

See a short slide deck about Mozillas x-tag polyfill or jump to the demo page.

Sunday, September 16, 2012

Developing and deploying a FirefoxOS application

At the MozillaCamp2012 in Warsaw I came upon the x-tag implementation of Mozilla. Eager to try some x-tags and the Mozilla implementation I started a first FirefoxOS application. While I currently have no hardware device on which I can run b2g applications, we can find other ways.

While having a hardware device is essential to develop and test an application, it is a nice asset of a platform to have other ways to run an application. While developing a FirefoxOS application, the turnaround can be extremely quick for a great part of the app. When e.g. it comes to fiddle around with the UI to make it beautiful and shiny it's a bless to be able to simply reload the app in a browser and having all the beloved development tools available for debugging, adjusting styles and the like. Once it fits after a dozen or so development cycles, it can be deployed and tested on the device again.

For FirefoxOS aka b2g aka boot2gecko applications there are many ways to be run while development:
While reloading the app in the browser is the fastest, browsers lacks decent support for Web APIs so far. Anyway, having these three ways available boosts development in many regards.

Possible productive deployment platforms are:
  • a mobile phone device running FirefoxOS (not commercially available yet)
  • a mobile tablet device  running FirefoxOS (same as phone)
  • a sandboxed browser (Web API support required)
  • a desktop application (e.g. deployed via FirefoxAurora)
All ways have their own appeal and taken them all together with a single app is great.

Mozilla provides a product line demonstrating the ability of doing this right now. As it is fully based on standards or standard proposal it is more than a proprietary FirefoxOS or Mozilla application. It's a convincing proposal on how web application technology can be leveraged on every platform with a similar degree of integration into the hosting device or platform as native counterparts or even run directly on a mobile and web enabled linux kernel like b2g. There might be never a full "write-once, run-everywhere" for high-class, high-fidelity apps, but given support for standardized, installable HTML5 apps on desktop and mobile is a great asset, pushing competitors further in many regards.

See this YouTube video with the screencast on how I deployed and run an web application in a web browser, the firefoxOS phone device emulator and deployed as a desktop application on OSX: