Annotation of books/www/articles/xpfe_dhtml.html, revision 1.15

1.1       david       1: <html>
                      2: <head>
                      3: <title>XPFE vs. DHTML</title>
                      4: </head>
                      5: <body bgcolor="#FFFFFF">
                      6: 
1.6       david       7: <font size="+1"><b>XPFE vs. DHTML</b></font>
1.1       david       8: 
1.7       david       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
1.9       david      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.' 
                     11: 
                     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.
1.8       david      15: 
                     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.  
                     19: 
1.15    ! david      20: <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
        !            21: 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
        !            22: well when he says: 'The application platform capabilities of Mozilla came about through a happy coincidence of Open Source development, good design, and
        !            23: far-sighted developers who were paying attention.'
1.7       david      24: 
1.11      david      25: <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
1.15    ! david      26: unintended consequence of lowering the barriers to entry to application development.  To better understand this happy coincidence and why it can be so
1.11      david      27: useful for developers it is necessary to take a closer look at what XPFE is made of.
1.7       david      28: 
1.12      david      29: <p><b>Understanding XPFE</b>
                     30: 
1.15    ! david      31: <p>The technologies that XPFE uses are all existing Web standards, such as <a href="http://www.w3.org/Style/CSS/">Cascading Style Sheets</a>, 
        !            32: <a href="http://www.ecma.ch/ecma1/STAND/ECMA-262.HTM">JavaScript</a> and <a href="http://www.w3.org/XML/">XML</a> (the XML component is a new
1.12      david      33: language called XUL, the XML-based User Interface Language).  In it's most simple form, XPFE can be thought of a simply the union of each of these 
                     34: standards.
                     35: 
                     36: <center>
                     37: <p><img src="http://books.mozdev.org/screenshots/moz_0101.gif"><br>
                     38: <font size="-1"><i>Figure 1: XPFE Framework</i></font>
                     39: </center>
                     40: 
1.13      david      41: <p>To understand how XPFE works, we can look at how the different components of it fit together.  JavaScript is used to create the functionality for a
                     42: Mozilla-based application, Cascading Style Sheets are used for formatting the look and feel, and XUL is used for creating the application's structure.  
                     43: Viewed together these three standards can be seen forming XPFE in Figure 1 above.
                     44: 
1.14      david      45: <p>The basic idea behind XPFE is simple.  Although the actual creation of Mozilla-based applications can be much more complicated than building a Web
                     46: page, XPFE creates an application in the same way a Web page is created.  Or to put it another way, the application is a Web page.  Mozilla itself
                     47: certainly doesn't distinguish between a Web page and an XPFE application.  Gecko, the rendering engine that Mozilla uses to draw a Web page in the
                     48: browser, also draws the Mozilla application on the desktop.
                     49: 
1.13      david      50: <p>Instead of using platform-specific C code to create an application, XPFE uses well understood Web standards that are by design inherently platform
                     51: independent.  Since the framework of XPFE is inherently platform independent, so are the applications that are created with it.  Since the framework is 
                     52: also made up of tools that are used to create Web page, anyone familiar with creating a Web page can use XPFE to create a cross-platform application. 
                     53: 
1.7       david      54: <hr>
1.1       david      55: 
1.13      david      56: 
1.12      david      57: <p>Since well understood Web standards are being used to create applications instead of platform-specific C code, a whole new group of people now have the
                     58: ability to create their own applications using Mozilla.
                     59: 
1.5       david      60: <p>Web developers and designers who use Mozilla are naturally attracted to the fact that they can create applications using the same skills and
                     61: techniques that they used to create Web pages in the past.  The specifics involved with creating Mozilla applications are different but should seem very
                     62: familiar to anyone who has created for the Web before.
                     63: 
                     64: <p>When talking about front ends it is important to clarify what this means.  In this context a front end is more than the look and feel of a
                     65: Mozilla-based application, but includes the functionality and structure of that application as well.  More simply put, XPFE allows users to do more than
                     66: just create a skin for an application.  For example, Netscape 6 does use this functionality to allow for the creation of <a
                     67: href="http://www.netscape.com/themes/">different themes</a> for their browser suite, but the browser suite itself is also created out of these same
                     68: technologies.
1.2       david      69: 
1.1       david      70: <p><b>Comparing XPFE and DHTML</b>
                     71: 
1.5       david      72: <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 JavaScript
                     73: 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
                     74: 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
                     75: programs.
                     76: 
                     77: <p>Figure 2 below illustrates the similarities between XPFE and DHTML.  Both use JavaScript to create functionality, both use CSS to format the design
                     78: 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
                     79: HTML and the other is XUL.
1.1       david      80: 
1.5       david      81: <center>
1.4       david      82: <p><img src="http://books.mozdev.org/screenshots/moz_0102.gif"><br>
1.5       david      83: <font size="-1"><i>Figure 2: Comparison of DHTML and XPFE</i></font>
                     84: </center>
1.1       david      85: 
1.5       david      86: <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
                     87: link together separate text documents on the Internet.  Later additions to the HTML standard have extended its functionality, but even these enhancements
                     88: can't make it an appropriate language to use for developing applications.  XUL is a language specifically designed for creating user interfaces, so it
                     89: makes sense that XPFE is more suited for application development than DHTML.
                     90: 
                     91: <p>Fortunately since XUL as a language is structurally similar to HTML it is simple enough to learn if you are already familiar with the basic language
                     92: of the Web.  Even if you have never used HTML before, XUL uses a straight-forward <a href="http://www.mozilla.org/xpfe/xulref/">collection of tags</a>
                     93: 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
                     94: your own applications.
1.1       david      95: 
                     96: <p><b>Oversimplifying in the Metaphor</b>
                     97: 
1.5       david      98: <p>This overview of XPFE as a simple evolution of DHTML is an oversimplification of the story and deliberately leaves out much important information.  
                     99: These details were ignored at first to give a conceptual framework for understanding the new ideas that XPFE represent.  Now that we've gotten past the
                    100: basics, we can go back and talk about the rest of the functionality available with using Mozilla to create applications.
                    101: 
                    102: <p>At the <a href="http://meetzilla.mozdev.org/second_meeting.html">Second Mozilla Developer Meeting</a>, Rob Ginda, the creator of ChatZilla, lead a
                    103: discussion group about Mozilla as Platform.  In this session he listed all of the following as components of a Mozilla-based application:
1.1       david     104: 
                    105: <FONT COLOR="#800000">
                    106: <UL>
                    107: <LI>XUL (XML-based User Interface Language) - Used to create the structure and content of an application.<br><br>
                    108: <LI>CSS (Cascading Style Sheets) - Used to create the look and feel of an application.<br><br>
                    109: <LI>JavaScript - Used to create the functionality of an application.<br><br>
                    110: <LI>XPInstall (Cross-Platform Install) - Used to package applications so that they can be installed on any platform.<br><br>
                    111: <LI>RDF (Resource Description Framework) - Used to store data and transmit information.  Generally regarded to be one of the most complicated aspects of XPFE.<br><br>
                    112: <LI>DTD (Document Type Definition) - Used for localization and internationalization, more commonly referred to in short-hand as L12N and I18N respectively.<br><br>
                    113: <LI>XBL (eXtensible Binding Language) - Used to create reusable widgets using a combination of XUL and JavaScript.<br><br>
                    114: <LI>XUL templates - Used to create a framework for importing data into an application with a combination of RDF and XUL.<br><br>
                    115: <LI>XPCOM/XPConnect - Used to allow JavaScript, or potentially any other scripting language, to access and utilize C and C++ libraries.
                    116: </UL>
                    117: </FONT>
                    118: 
1.5       david     119: <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
                    120: important there is a distinction to be made among them.  Some of these are essential to the creation of a Mozilla application and some of them provide
                    121: powerful extra features that can be used in addition to the basic functionality.
                    122: 
                    123: <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
                    124: create an application without using it.  <a href="http://www.mozilla.org/projects/l10n/mlp.html">Localization</a> also provides Mozilla with a great
                    125: amount of flexibility and usability but there are many existing applications that don't take advantage of this feature.  It wouldn't be possible to
                    126: create an application without XUL though.
1.1       david     127: 
                    128: <p><b>Judge For Yourself</b>
                    129: 
1.5       david     130: <p>XPFE is a new technology that has yet to prove itself to the Web community and many people are skeptical about the need for an application framework
                    131: such as this.  Before you make up your mind about XPFE, you should take a look at the many different applications that have already been created using
                    132: Mozilla so you can judge for yourself.
                    133: 
                    134: <p>If you are interested in trying out some of these, there are currently over 40 different Mozilla-based applications being hosted on <a
                    135: href="http://www.mozdev.org/projects.html">mozdev.org</a> that have been created using XPFE.  Other applications using the same technology include
                    136: ActiveState's <a href="http://www.activestate.com/ASPN/Downloads/Komodo/More">Komodo</a> IDE, Rob Ginda's <a
                    137: href="http://www.hacksrus.com/~ginda/chatzilla/">ChatZilla</a> IRC client, and Zope's <a href="http://www.zope.org/Resources/Mozilla/">Mozilla
                    138: Initiative</a>.
1.13      david     139: 
                    140: <br><br>
                    141: 
                    142: <p><i>Thanks to Julia Kleyman for creating the illustrations used in this article.</i>
1.1       david     143: 
                    144: </body>
                    145: </html>
                    146: 
                    147: 

FreeBSD-CVSweb <freebsd-cvsweb@FreeBSD.org>