XPFE vs. DHTML

'In the beginning, there were 3 front ends: Mac, Windows and Unix. Each took a suite of developers to maintain. Adding a new feature (even just a button) required 3 engineers to waste at least a day (more often a week) slaving away until the feature was complete. This had to change.'

This quote is posted on mozilla.org and describes how the Netscape 4.x browsers required a different set of engineers to create and maintain the code for the user interface, even though the browser looked nearly identical on each different supported platform.

For a company committed to creating an application that runs on a wide range of different systems, using platform specific code was a big waste of time. XPFE, Mozilla's cross-platform front end, was designed to solve this problem by enabling engineers to create one interface that would then work on any operating system.

In this context a front end is more than the look and feel of the application, but can also include the functionality and structure of that application. For example, Netscape 6 does use XPFE to allow for the creation of different themes for their browser suite, but the browser suite itself is created using XPFE as well.

This new technology started out as a time-saving technique and turned into one of Mozilla's most powerful innovations. Mike Cornall, in an article published on LinuxToday, summarizes the history of XPFE well when he says: 'The application platform capabilities of Mozilla came about through a happy coincidence of Open Source development, good design, and far-sighted developers who were paying attention.'

Mozilla engineers were trying to create a more efficient process that would save them time and effort, but this technology ended up having the unintended consequence of lowering the barriers to entry to application development. To better understand this happy coincidence and why it can be so useful for developers it is necessary to take a closer look at what XPFE is made of.

Understanding XPFE

XPFE uses a number of existing Web standards, such as Cascading Style Sheets, JavaScript and XML (the XML component is a new language called XUL, the XML-based User Interface Language). In it's most simple form, XPFE can be thought of as simply the union of each of these standards. Viewed together these can be seen forming XPFE in Figure 1 below.


Figure 1: XPFE Framework

To understand how XPFE works, we can look at how these different components fit together. JavaScript is used to create the functionality for a Mozilla-based application, Cascading Style Sheets are used for formatting the look and feel, and XUL is used for creating the application's structure.

Instead of using platform-specific C code to create an application, XPFE uses these well understood Web standards that are by design inherently platform independent. Since the framework of XPFE is inherently platform independent, so are the applications that are created with it. Since the framework is also made up of tools that are used to create Web pages, people familiar with creating a Web page can quickly learn how to use XPFE to create a cross-platform application.

Although the actual creation of Mozilla-based applications can be much more complicated than building a Web page, XPFE allows developers to create applications in the same way they would create a Web page. Or to put it another way, the application is now a Web page.

In some ways Mozilla doesn't even make a distinction between Web pages and XPFE applications. For instance, Gecko, the layout engine that Mozilla uses to render Web pages in the browser, also renders Mozilla-based applications on the desktop.

Comparing XPFE and DHTML

In many ways XPFE is very similar to DHTML. Dynamic HTML is a combination of HTML with JavaScript and CSS that allows a developer to create a Web application that is contained within the content area of a browser. XPFE provides a logical evolution to this idea by allowing the creation of applications that are more powerful, more flexible and that can live outside of the browser window as stand-alone programs.

Figure 2 below illustrates the similarities between XPFE and DHTML. Both use JavaScript to create functionality, both use CSS to format design and layout, and both use a fairly simple mark-up language to describe content. The difference between the two is that one of these mark-up languages is HTML and the other is XUL.


Figure 2: Comparison of DHTML and XPFE

Although HTML has been put to many different uses, it was originally designed as a simple system to link together separate text documents on the Internet. Later additions to the HTML standard have extended its functionality, but even these enhancements can't make it an appropriate language to use for developing applications. XUL is a language specifically designed for creating user interfaces, so it makes sense that XPFE is more suited for application development than DHTML.

Since XUL is structurally similar to HTML, knowledge of building Web pages will give you a boost in learning how to create cross-platform Mozilla-based applications. Even if you have never used HTML before, XUL uses a straight-forward collection of tags that makes it easy to get comfortable with it in a short time. Once you become accustomed to using XUL you will be ready to start using XPFE to create your own applications.

Oversimplifying Things

Describing XPFE as a more sophisticated version of DHTML is an oversimplification and deliberately leaves out much important information. These details were ignored in the comparison to give a better understanding of the basic framework of XPFE. Now that we've gotten past the basics, we can go back and talk about the rest of the functionality available with Mozilla that makes it such a powerful framework for creating applications.

At the Second Mozilla Developer Meeting, Rob Ginda, the creator of ChatZilla, led a discussion group about Mozilla as Platform. In this session he listed all of the following as components of a Mozilla-based application:

Each of these technologies is important and several of these deserve to have whole books devoted to them. Although each of these technologies is important there is a distinction to be made among them. Some of these are essential to the creation of a Mozilla application and some provide powerful extra features.

For example, RDF is an extremely powerful technology for using data in Mozilla but it is possible to create an application without it. Localization also provides Mozilla with a great amount of flexibility but there are many existing applications that don't take advantage of this feature. It wouldn't be possible to create an application without XUL though.

Judge For Yourself

XPFE is a new technology and has yet to prove itself to the Web community. Many people are also skeptical about the need for an application development framework such as this. Before you make up your mind about XPFE though, you should take a look at the many different applications that have already been created using Mozilla so you can judge for yourself.

The first place to start would be to try using the latest version of Mozilla or Netscape 6.1 if you haven't already, since these are the most well known applications that use XPFE. If you want to try out other projects using XPFE, there are currently over 40 different Mozilla-based applications being hosted on mozdev.org. Other applications using the same technology include ActiveState's Komodo IDE, Rob Ginda's ChatZilla IRC client, and Zope's Mozilla Initiative.

Thanks to Julia Kleyman for creating the illustrations used in this article.