3: <title>XPFE vs. DHTML</title>
5: <body bgcolor="#FFFFFF">
7: <font size="+1"><b>XPFE vs. DHTML</b></font>
9: <p>'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
10: 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.'
12: <p>This <a href="http://mozilla.org/xpfe/ElevatorTouchyFeely.html">quote</a> is posted on mozilla.org and describes how the Netscape 4.x browsers
13: 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
14: different supported platform.
16: <p>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
17: 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
18: any operating system.
20: <p>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
21: application. For example, Netscape 6 does use XPFE to allow for the creation of <a href="http://www.netscape.com/themes/">different themes</a> for
22: their browser suite, but the browser suite itself is created using XPFE as well.
24: <p>This new technology started out as a time-saving technique and turned into one of Mozilla's most powerful innovations. Mike Cornall, in <a
25: href="http://linuxtoday.com/news_story.php3?ltsn=2000-07-25-001-07-OP-SM-0036">an article</a> published on LinuxToday, summarizes the history of XPFE
26: well when he says: 'The application platform capabilities of Mozilla came about through a happy coincidence of Open Source development, good design, and
27: far-sighted developers who were paying attention.'
29: <p>Mozilla engineers were trying to create a more efficient process that would save them time and effort, but this technology ended up having the
30: unintended consequence of lowering the barriers to entry to application development. To better understand this happy coincidence and why it can be so
31: useful for developers it is necessary to take a closer look at what XPFE is made of.
33: <p><b>Understanding XPFE</b>
35: <p>XPFE uses a number of existing Web standards, such as <a href="http://www.w3.org/Style/CSS/">Cascading Style Sheets</a>, <a
37: 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.
38: Viewed together these can be seen forming XPFE in Figure 1 below.
41: <p><img src="http://books.mozdev.org/screenshots/moz_0101.gif"><br>
42: <font size="-1"><i>Figure 1: XPFE Framework</i></font>
46: Mozilla-based application, Cascading Style Sheets are used for formatting the look and feel, and XUL is used for creating the application's
49: <p>Instead of using platform-specific C code to create an application, XPFE uses these well understood Web standards that are by design inherently
50: platform independent. Since the framework of XPFE is inherently platform independent, so are the applications that are created with it. Since the
51: 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
52: create a cross-platform application.
54: <p>Although the actual creation of Mozilla-based applications can be much more complicated than building a Web page, XPFE allows developers to create
55: applications in the same way they would create a Web page. Or to put it another way, the application is now a Web page.
57: <p>In some ways Mozilla doesn't even make a distinction between Web pages and XPFE applications. For instance, Gecko, the layout engine that Mozilla
58: uses to render Web pages in the browser, also renders Mozilla-based applications on the desktop.
60: <p><b>Comparing XPFE and DHTML</b>
62: <p>In many ways XPFE is very similar to <a href="http://www.webreference.com/dhtml/">DHTML</a>. Dynamic HTML is a combination of HTML with
64: 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
65: as stand-alone programs.
68: 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
69: and the other is XUL.
72: <p><img src="http://books.mozdev.org/screenshots/moz_0102.gif"><br>
73: <font size="-1"><i>Figure 2: Comparison of DHTML and XPFE</i></font>
76: <p>Although HTML has been put to many different uses, it was <a href="http://www.w3.org/MarkUp/#historical">originally designed</a> as a simple system to
77: link together separate text documents on the Internet. Later additions to the HTML standard have extended its functionality, but even these enhancements
78: can't make it an appropriate language to use for developing applications. XUL is a language specifically designed for creating user interfaces, so it
79: makes sense that XPFE is more suited for application development than DHTML.
81: <p>Since XUL is structurally similar to HTML, knowledge of building Web pages will give you a boost in learning how to create cross-platform
82: Mozilla-based applications. Even if you have never used HTML before, XUL uses a straight-forward <a
83: href="http://www.mozilla.org/xpfe/xulref/">collection of tags</a> that makes it easy to get comfortable with it in a short time. Once you become
84: accustomed to using XUL you will be ready to start using XPFE to create your own applications.
86: <p><b>Oversimplifying Things</b>
88: <p>Describing XPFE as a more sophisticated version of DHTML is an oversimplification and deliberately leaves out much important information. These
89: 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
90: back and talk about the rest of the functionality available with Mozilla that makes it such a powerful framework for creating applications.
92: <p>At the <a href="http://meetzilla.mozdev.org/second_meeting.html">Second Mozilla Developer Meeting</a>, Rob Ginda, the creator of ChatZilla, led a
93: discussion group about Mozilla as Platform. In this session he listed all of the following as components of a Mozilla-based application:
96: <LI>XUL (XML-based User Interface Language) - Used to create the structure and content of an application.<br><br>
97: <LI>CSS (Cascading Style Sheets) - Used to create the look and feel of an application.<br><br>
100: <LI>XPInstall (Cross-Platform Install) - Used to package applications so that they can be installed on any platform.<br><br>
101: <LI>RDF (Resource Description Framework) - Used to store data and transmit information. Generally regarded to be one of the most complicated
102: aspects of XPFE.<br><br>
103: <LI>DTD (Document Type Definition) - Used for localization and internationalization, more commonly referred to in short-hand as L12N and I18N
106: <LI>XUL templates - Used to create a framework for importing data into an application with a combination of RDF and XUL.<br><br>
110: <p>Each of these technologies is important and several of these deserve to have whole books devoted to them. Although each of these technologies is
111: 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
112: powerful extra features.
114: <p>For example, <a href="http://www.mozilla.org/rdf/doc/">RDF</a> is an extremely powerful technology for using data in Mozilla but it is possible to
115: create an application without it. <a href="http://www.mozilla.org/projects/l10n/mlp.html">Localization</a> also provides Mozilla with a great amount of
116: 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
117: XUL though.
119: <p><b>Judge For Yourself</b>
121: <p>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
122: 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
123: have already been created using Mozilla so you can judge for yourself.
125: <p>The first place to start would be to try using the latest version of <a href="http://mozilla.org/releases/">Mozilla</a> or <a
126: href="http://www.netscape.com/browsers/6/index.html">Netscape 6.1</a> if you haven't already, since these are the most well known applications that
127: use XPFE. If you want to try out other projects using XPFE, there are currently over 40 different Mozilla-based applications being hosted on <a
128: href="http://www.mozdev.org/projects.html">mozdev.org</a>. Other applications using the same technology include ActiveState's <a
129: href="http://www.activestate.com/ASPN/Downloads/Komodo/More">Komodo</a> IDE, Rob Ginda's <a
130: href="http://www.hacksrus.com/~ginda/chatzilla/">ChatZilla</a> IRC client, and Zope's <a href="http://www.zope.org/Resources/Mozilla/">Mozilla
135: <p><i>Thanks to Julia Kleyman for creating the illustrations used in this article.</i>