File:  [mozdev] / books / www / articles / xpfe_dhtml.html
Revision 1.7: download - view: text, annotated - select for diffs - revision graph
Thu Aug 9 19:47:35 2001 UTC (18 years, 7 months ago) by david
Branches: MAIN
CVS tags: HEAD
editing article

    1: <html>
    2: <head>
    3: <title>XPFE vs. DHTML</title>
    4: </head>
    5: <body bgcolor="#FFFFFF">
    6: 
    7: <font size="+1"><b>XPFE vs. DHTML</b></font>
    8: 
    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.'
   11: 
   12: <p>This is an explanation quote is posted on mozilla.org and describesing how the Netscape 4.x browsers required a different set of engineers to create
   13: and maintain the code for the user interface code, even though the browser looked nearly identical on each different platform. version looked nearly
   14: identical.
   15: 
   16: <p>For a company n organization committed to creating an application that runs on a wide range of different systems platforms, this system of using
   17: platform specific code was a huge investment and a big waste of time. XPFE, Mozilla's cross-platform front end, was designed to solve this problem byso
   18: that enabling engineers would be able to create one interface that would then work on any all operating systems.
   19: 
   20: <p>This new technology started out as a time-saving technique and turned into one of Mozilla's most powerful innovations. When they started work on
   21: creating XPFE, Mozilla engineers were trying to create a more efficient process that would save them time and effort when they started work on XPFE, but
   22: this technology ended up having the unintended consequence of lowering the barriers to entry for application developers.
   23: 
   24: <p>Mike Cornall, in an article about Mozilla published on LinuxToday, summarizes the history of XPFE well when he says: 'The application platform
   25: capabilities of Mozilla came about through a happy coincidence of Open Source development, good design, and far-sighted developers who were paying
   26: attention.'
   27: 
   28: <hr>
   29: 
   30: <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
   31: 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 is an <a
   32: href="http://www.mozilla.org/xpfe/ElevatorTouchyFeely.html">explanation posted</a> on mozilla.org describing how the Netscape 4.x browsers required a
   33: different set of engineers to create and maintain the interface code for Netscape on each different platform, even though each version looked nearly
   34: identical.
   35: 
   36: <p>For an organization committed to creating an application that runs on a range of <a href="http://www.mozilla.org/ports/">different platforms</a> this
   37: system of using platform specific code was a huge investment and a big waste of time.  XPFE, Mozilla's cross-platform front end, was designed to fix this
   38: by allowing engineers to be able to create one interface that would then work on any operating system.  This new technology started out as a time-saving
   39: technique and then turned into one of Mozilla's most powerful innovations.
   40: 
   41: <p>Mozilla engineers were trying to create a more efficient process that would save them time and effort when they started work on XPFE, but this
   42: technology ended up having the unintended consequence of lowering the barriers to entry for application developers.  Mike Cornall, in <a
   43: href="http://linuxtoday.com/news_story.php3?ltsn=2000-07-25-001-07-OP-SM-0036">an article</a> about Mozilla published on LinuxToday, summarizes the
   44: history of XPFE well when he says: 'The application platform capabilities of Mozilla came about through a happy coincidence of Open Source development,
   45: good design, and far-sighted developers who were paying attention.'
   46: 
   47: <p>All browsers allow people using any type of computer to access applications on the Web, such as Yahoo! Mail, Amazon and Ebay. Mozilla is simply
   48: building on this idea.  Using new technologies in conjunction with existing Web standards Mozilla enables the creation of more powerful applications, so
   49: instead of using Opera, Netscape 4.x or Internet Explorer to access a Web page you can use a full-featured application with Mozilla.
   50: 
   51: <p><b>Understanding XPFE</b>
   52: 
   53: <p>The technologies that XPFE uses are all existing Web standards, such as Cascading Style Sheets, JavaScript and XML (the XML component is a new
   54: language called XUL, the XML-based User Interface Language).  Since well understood Web standards are being used to create applications instead of
   55: platform-specific C code, a whole new group of people now have the ability to create their own applications using Mozilla.
   56: 
   57: <p>In the sense that XPFE uses some of the same standards that are used to create Web pages, Mozilla-based applications can even be thought of as Web
   58: pages.  Gecko, the HTML rendering engine that Mozilla uses, also draws all XPFE content, so a Web page and an application created with XPFE are on one
   59: level treated the same way by Mozilla itself.
   60: 
   61: <p>Web developers and designers who use Mozilla are naturally attracted to the fact that they can create applications using the same skills and
   62: techniques that they used to create Web pages in the past.  The specifics involved with creating Mozilla applications are different but should seem very
   63: familiar to anyone who has created for the Web before.
   64: 
   65: <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
   66: Mozilla-based application, but includes the functionality and structure of that application as well.  More simply put, XPFE allows users to do more than
   67: just create a skin for an application.  For example, Netscape 6 does use this functionality to allow for the creation of <a
   68: 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
   69: technologies.
   70: 
   71: <center>
   72: <p><img src="http://books.mozdev.org/screenshots/moz_0101.gif"><br>
   73: <font size="-1"><i>Figure 1: XPFE Framework</i></font>
   74: </center>
   75: 
   76: <p>To understand all of the capabilities of XPFE, we can look at how the different components of it fit together.  JavaScript is used to create the
   77: functionality for a Mozilla-based application, Cascading Style Sheets are used for formatting the look and feel, and XUL is used for creating the
   78: application's structure.  Viewed together these three standards can be seen forming the triangle in Figure 1 above.
   79: 
   80: <p><b>Comparing XPFE and DHTML</b>
   81: 
   82: <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
   83: 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
   84: 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
   85: programs.
   86: 
   87: <p>Figure 2 below illustrates the similarities between XPFE and DHTML.  Both use JavaScript to create functionality, both use CSS to format the design
   88: 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
   89: HTML and the other is XUL.
   90: 
   91: <center>
   92: <p><img src="http://books.mozdev.org/screenshots/moz_0102.gif"><br>
   93: <font size="-1"><i>Figure 2: Comparison of DHTML and XPFE</i></font>
   94: </center>
   95: 
   96: <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
   97: link together separate text documents on the Internet.  Later additions to the HTML standard have extended its functionality, but even these enhancements
   98: can't make it an appropriate language to use for developing applications.  XUL is a language specifically designed for creating user interfaces, so it
   99: makes sense that XPFE is more suited for application development than DHTML.
  100: 
  101: <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
  102: 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>
  103: 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
  104: your own applications.
  105: 
  106: <p><b>Oversimplifying in the Metaphor</b>
  107: 
  108: <p>This overview of XPFE as a simple evolution of DHTML is an oversimplification of the story and deliberately leaves out much important information.  
  109: 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
  110: basics, we can go back and talk about the rest of the functionality available with using Mozilla to create applications.
  111: 
  112: <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
  113: discussion group about Mozilla as Platform.  In this session he listed all of the following as components of a Mozilla-based application:
  114: 
  115: <FONT COLOR="#800000">
  116: <UL>
  117: <LI>XUL (XML-based User Interface Language) - Used to create the structure and content of an application.<br><br>
  118: <LI>CSS (Cascading Style Sheets) - Used to create the look and feel of an application.<br><br>
  119: <LI>JavaScript - Used to create the functionality of an application.<br><br>
  120: <LI>XPInstall (Cross-Platform Install) - Used to package applications so that they can be installed on any platform.<br><br>
  121: <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>
  122: <LI>DTD (Document Type Definition) - Used for localization and internationalization, more commonly referred to in short-hand as L12N and I18N respectively.<br><br>
  123: <LI>XBL (eXtensible Binding Language) - Used to create reusable widgets using a combination of XUL and JavaScript.<br><br>
  124: <LI>XUL templates - Used to create a framework for importing data into an application with a combination of RDF and XUL.<br><br>
  125: <LI>XPCOM/XPConnect - Used to allow JavaScript, or potentially any other scripting language, to access and utilize C and C++ libraries.
  126: </UL>
  127: </FONT>
  128: 
  129: <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
  130: 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
  131: powerful extra features that can be used in addition to the basic functionality.
  132: 
  133: <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
  134: create an application without using it.  <a href="http://www.mozilla.org/projects/l10n/mlp.html">Localization</a> also provides Mozilla with a great
  135: 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
  136: create an application without XUL though.
  137: 
  138: <p><b>Judge For Yourself</b>
  139: 
  140: <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
  141: 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
  142: Mozilla so you can judge for yourself.
  143: 
  144: <p>If you are interested in trying out some of these, there are currently over 40 different Mozilla-based applications being hosted on <a
  145: href="http://www.mozdev.org/projects.html">mozdev.org</a> that have been created using XPFE.  Other applications using the same technology include
  146: ActiveState's <a href="http://www.activestate.com/ASPN/Downloads/Komodo/More">Komodo</a> IDE, Rob Ginda's <a
  147: href="http://www.hacksrus.com/~ginda/chatzilla/">ChatZilla</a> IRC client, and Zope's <a href="http://www.zope.org/Resources/Mozilla/">Mozilla
  148: Initiative</a>.
  149: 
  150: </body>
  151: </html>
  152: 
  153: 

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