Speed Up App Development with X-Tag and Web Components

In the last few years we’ve witnessed an evolution in what ‘app’ means to both developers and consumers. The word app evokes the idea of a rich, task-oriented user experience with highly optimized user interface that responds to its environment and can be used on an array of common devices. In order to make development of rich app experiences easier, native platforms have generated many of their own controls and components that Just Work™.

For other native technology stacks, extensible components are all but assumed – not so much for the web. Soon, that all changes. We are on the verge of a declarative renaissance that will dramatically advance app development for the web platform, and Web Components will drive it.

X-Tag and Web Components offer features that obliterate the status quo for layout, UI, and widget development – here’s a few notable Web Component features:

  • Create real custom elements the browser understands
  • Stop the instantiation madness: $$(‘button.super’).initSuperButton()
  • Remove unmanageable HTML widget guts from your app’s view files
  • Work with sharable components, based on standard technologies

Meet the Web Components Family

Web Components is a group of W3C specifications, quickly moving toward standardization, that provide a robust HTML component model. You should not assume the following specs are implemented in your browser of choice. While these specifications are in various stages of implementation across browsers, you can use X-Tag (with either Mozilla or Google’s prollyfill) today to create custom elements that work well in recent version of Firefox, Chrome, Safari, and stock mobile browsers. X-Tag is a powerful sugar library primarily focused on wrapping and enhancing one of the draft-state Web Component specs: Custom Elements (document.register). We’ll get to X-Tag shortly – but for now, let’s quickly review the key features of each spec:

Custom Elements

Custom Elements provides you a way to create new elements for use in your environment. There are two ways to declare a new custom element, the imperative DOM API – document.register(), and the declarative HTML tag – (whose DOM constructor is HTMLElementElement). After declaration, new custom elements can be created in the same ways native elements are, such as document.createElement, presences in original source (the markup of a page), and innerHTML, etc.

Here’s an example of what a custom element registration looks like in both the declarative and imperative styles:

document.register('x-foo', {
  prototype: Object.create(HTMLElement.prototype, {
    readyCallback: {
      value: function(){
        // do stuff here when your element is created
        this.innerHTML = '<div>Barrrr me matey!</div>';
      }
    },
    bar: {
      get: function() { return 'bar'; },
    },
    // add more properties to your custom prototype
    // ...
  })
});
<element name="x-foo">
  <script>
    if (this !== window) {
      this.register({
        prototype: {
          readyCallback: {
            value: function(){
              // do stuff here when your element is created
              this.innerHTML = '<div>Barrrr me matey!</div>';
            }
          },
          bar: {
            get: function() { return 'bar'; },
          }
        }
      });
    }
  </script>
</element>

Shadow DOM

The Shadow DOM allows you to encapsulate structural and supporting elements within components. Elements within nodes remain visible for purposes of display UI (depending on the type of element and your styles), but are hidden from the rest of your application code, unless you explicitly cross the shadow boundary.

HTML Templates

HTML Templates bring simple DOM templating and markup reuse to the web platform – which are often shimmed today using the HTMLScriptElement + DocumentFragment hack-pattern.

HTML Imports

HTML Imports are external HTML documents that contain declarative component definitions. HTML component documents can by imported using the link element with the rel attribute value import. Imported resources may themselves contain additional sub-imports, which the browser then retrieves and performs automatic dependency resolution upon.

Web Components + X-Tag = WINNING

Mozilla’s X-Tag library enhances the imperative (JavaScript) route for creating custom elements. X-Tag’s primary interface is the xtag.register() method – it wraps the soon-to-be standard document.register() DOM API with features and functionality that make development of amazing custom elements effortless.

Creating a Custom Element

Here’s a quick example of what registering a custom element looks like using X-Tag:

xtag.register('x-pirate', {
  lifecycle: {
    ready: function(){
      this.innerHTML = '<blockquote>' +
                         '<img src="pirate-1.png"/>Barrr me matey!' +
                       '</blockquote>';
    }
  },
  accessors: {
    src: {
      // X-Tag's attribute sugar relays any value passed to the src
      // setter on to the src attribute of our <x-pirate> and its
      // <img> element (specified by CSS selector), and vice versa.
      attribute: { selector: 'img' },
      set: function(){
        // When a <x-pirate>'s src attribute/setter is changed, we
        // stop everything to announce the arrival of a new pirate.
        // Ex: doc.querySelector('x-pirate').src = 'pirate-2.png';
        alert("There's a new captain on deck ye scurvy dogs!");
      }
    }
  },
  events: {
    // This is an example of X-Tag's event and pseudo systems. The
    // "tap" custom event handles the dance between click and touch,
    // the ":delegate(img)" pseudo ensures our function is only
    // called when tapping the <img> inside our <x-pirate>.
    'tap:delegate(blockquote > img)': function(){
      alert("A pirate's life for me!");
    }
  }
});

To the Democave Batman!

We’re actively working on a custom element UI toolkit and style pack that will make development of app interfaces a breeze. It’s still in very early stages, but we have a few demos for you.

Get the Code

Head over to X-Tags.org and grab the code to develop custom elements of your own. After you get the hang of things, start contributing to our open source effort!

About Daniel Buchner

I'm a Product Manager at Mozilla and have an unhealthy love for building Open Web tech. I also dig economics, fast cars, classic rock and the Seattle Seahawks.

More articles by Daniel Buchner…

About Robert Nyman [Editor emeritus]

Technical Evangelist & Editor of Mozilla Hacks. Gives talks & blogs about HTML5, JavaScript & the Open Web. Robert is a strong believer in HTML5 and the Open Web and has been working since 1999 with Front End development for the web - in Sweden and in New York City. He regularly also blogs at http://robertnyman.com and loves to travel and meet people.

More articles by Robert Nyman [Editor emeritus]…


5 comments

  1. eric

    Hi,

    one might argue that bootstrap or jQuery can do all that. What’s so much cooler about x-tag?

    May 14th, 2013 at 05:52

    1. Daniel Buchner

      Bootstrap and jQuery most certainly do not allow you to declare elements the parser and JS engine then construct and augment as native-inheriting elements. Additionally, these elements never require buckets of instantiation glue code and have easy access to powerful lifecycle phases – element creation, notification of insertion and removal from the DOM, and the ability to react to live attribute change – that allows your app’s code, front and back, to work together more fluidly than before.

      Given these are real-deal element prototypes the browser understands (and you control) you can add your unique methods to them without polluting the namespace – think of it as the best of both the jQuery and MooTools worlds rolled up in one, then double that.

      Over time, browsers will be able to highly-optimize components registered with their engines in ways that last-mile DOM libraries like jQuery and Bootstrap cannot.

      May 14th, 2013 at 08:02

  2. Codespend

    Hello,
    And I want to test a phone, we want to build some applications in Romania for this phone. We are an Android development company and try our luck and Firefox OS operating system.
    How can we get such a device for developing applications for free?

    May 14th, 2013 at 11:05

    1. Robert Nyman [Editor]

      The best way right now is to buy a phone from Geeksphone – more info in Geeksphone to start selling Firefox OS Developer Preview phones.

      May 14th, 2013 at 15:34

  3. Simon

    X-Tags just rocks with Symbiose ! http://simonser.fr.nf/private/screenshots/058_symbiose_xtag_twf_firefox.png

    May 18th, 2013 at 00:18

Comments are closed for this article.