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

1.1     ! david       1: <html>
        !             2: <head>
        !             3: <title>XPFE vs. DHTML</title>
        !             4: </head>
        !             5: <body bgcolor="#FFFFFF">
        !             6: 
        !             7: <h2>XPFE vs. DHTML</h2>
        !             8: 
        !             9: <p>'In the beginning, there were 3 front ends: Mac, Windows and Unix.  Each took a suite of developers to maintain.
        !            10: Adding a new feature (even just a button) required 3 engineers to waste at least a day (more often a week) slaving 
        !            11: away until the feature was complete.  This had to change.'  This is an 
        !            12: <a href="http://www.mozilla.org/xpfe/ElevatorTouchyFeely.html">explanation posted</a> on mozilla.org describing 
        !            13: how the Netscape 4.x browsers required a different set of engineers to create and maintain the interface code for
        !            14: Netscape on each different platform, even though each version looked nearly identical.
        !            15: 
        !            16: <p>For an organization committed to creating an application that runs on a range of 
        !            17: <a href="http://www.mozilla.org/ports/">different platforms</a> this 
        !            18: system of using platform specific code was a huge investment and a big waste of time.  XPFE, Mozilla's 
        !            19: cross-platform front end, was designed to fix this by allowing engineers to be able to create one interface that would then
        !            20:  work on any operating system.  This new technology started out as a time-saving technique and then turned into one
        !            21:  of Mozilla's most powerful innovations.
        !            22: 
        !            23: <p>Mozilla engineers were trying to create a more efficient process that would save them time and effort when
        !            24: they started work on XPFE, but this technology ended up having the unintended consequence of lowering the barriers
        !            25: to entry for application developers.  Mike Cornall, in 
        !            26: <a href="http://linuxtoday.com/news_story.php3?ltsn=2000-07-25-001-07-OP-SM-0036">an article</a> about Mozilla 
        !            27: published on LinuxToday, summarizes the history of XPFE well when he says: 'The application platform capabilities
        !            28: of Mozilla came about through a happy coincidence of Open Source development, good design, and far-sighted
        !            29: developers who were paying attention.'
        !            30: 
        !            31: <p>All browsers allow people using any type of computer to access applications on the 
        !            32: Web, such as Yahoo! Mail, Amazon and Ebay. Mozilla is simply building on this idea.  
        !            33: Using new technologies in conjunction with existing Web standards Mozilla enables the creation of 
        !            34: more powerful applications, so instead of using Opera, Netscape 4.x or Internet Explorer 
        !            35: to access a Web page you can use a full-featured application with Mozilla.
        !            36: 
        !            37: <p><b>Understanding XPFE</b>
        !            38: 
        !            39: <p>The technologies that XPFE uses are all existing Web standards, such as Cascading Style Sheets, JavaScript and
        !            40:  XML (the XML component is a new language called XUL, the XML-based User Interface Language).  Since well understood
        !            41:  Web standards are being used to create applications instead of platform-specific C code, a whole new group of people
        !            42:  now have the ability to create their own applications using Mozilla.
        !            43: 
        !            44: <p>In the sense that XPFE uses some of the same standards that are used to create Web pages, Mozilla-based
        !            45:  applications can even be thought of as Web pages.  Gecko, the HTML rendering engine that Mozilla uses, also draws
        !            46:  all XPFE content, so a Web page and an application created with XPFE are on one level treated the same way by 
        !            47: Mozilla itself.
        !            48: 
        !            49: <p>Web developers and designers who use Mozilla are naturally attracted to the fact that they can create
        !            50:  applications using the same skills and techniques that they used to create Web pages in the past.  The specifics
        !            51:  involved with creating Mozilla applications are different but should seem very familiar to anyone who has created
        !            52:  for the Web before.
        !            53: 
        !            54: <p>When talking about front ends it is important to clarify what this means.  In this context a front end is more
        !            55:  than the look and feel of a Mozilla-based application, but includes the functionality and structure of that application
        !            56:  as well.  More simply put, XPFE allows users to do more than just create a skin for an application.  For example,
        !            57:  Netscape 6 does use this functionality to allow for the creation of 
        !            58: <a href="http://www.netscape.com/themes/">different themes</a> for their browser suite, but the browser suite itself
        !            59:  is also created out of these same technologies.
        !            60: 
        !            61: <pre>
        !            62:                XUL
        !            63:               /  \
        !            64:              /    \
        !            65:             /      \
        !            66:            /        \
        !            67:           JS ------ CSS
        !            68: 
        !            69:       Figure 1: XPFE Framework
        !            70: </pre>
        !            71: 
        !            72: <p>To understand all of the capabilities of XPFE, we can look at how the different components of it fit together.  
        !            73: JavaScript is used to create the functionality for a Mozilla-based application, Cascading Style Sheets are used for 
        !            74: formatting the look and feel, and XUL is used for creating the application's structure.  Viewed together these three 
        !            75: standards can be seen forming the triangle in Figure 1 above.
        !            76: 
        !            77: <p><b>Comparing XPFE and DHTML</b>
        !            78: 
        !            79: <p>In many ways XPFE is very similar to <a href="http://www.webreference.com/dhtml/">DHTML</a>.  Dynamic HTML is 
        !            80: a combination of HTML with JavaScript and CSS that allows a developer to create a Web application that is contained
        !            81:  within the content area of a browser.  XPFE provides a logical evolution to this idea by allowing the creation of
        !            82:  applications that are more powerful, more flexible and that can live outside of the browser window as stand-alone
        !            83:  programs.
        !            84: 
        !            85: <p>Figure 2 below illustrates the similarities between XPFE and DHTML.  Both use JavaScript to create functionality, both
        !            86:  use CSS to format the design and layout, and both use a fairly simple mark-up language to describe content.  The 
        !            87: difference between the two is that one of these mark-up languages is HTML and the other is XUL.
        !            88: 
        !            89: <pre>
        !            90:        HTML                     XUL
        !            91:        /  \                    /  \
        !            92:        /    \                  /    \
        !            93:       /      \                /      \
        !            94:      /        \              /        \
        !            95:     JS ----- CSS           JS ----- CSS
        !            96: 
        !            97:     Figure 2: Comparison of DHTML and XPFE
        !            98: </pre>
        !            99: 
        !           100: <p>Although HTML has been put to many different uses, it was <a href="http://www.w3.org/MarkUp/#historical">originally designed</a>
        !           101:  as a simple system to link together separate text documents on the Internet.  Later additions to the HTML standard 
        !           102: have extended its functionality, but even these enhancements can't make it an appropriate language to use for developing 
        !           103: applications.  XUL is a language specifically designed for creating user interfaces, so it makes sense that XPFE is more 
        !           104: suited for application development than DHTML.
        !           105: 
        !           106: <p>Fortunately since XUL as a language is structurally similar to HTML it is simple enough to learn if you are already
        !           107:  familiar with the basic language of the Web.  Even if you have never used HTML before, XUL uses a straight-forward 
        !           108: <a href="http://www.mozilla.org/xpfe/xulref/">collection of tags</a> that makes it easy to get comfortable with it in 
        !           109: a short time.  Once you become accustomed to using XUL you will be ready to start using XPFE to create your own applications.
        !           110: 
        !           111: <p><b>Oversimplifying in the Metaphor</b>
        !           112: 
        !           113: <p>This overview of XPFE as a simple evolution of DHTML is an oversimplification of the story and deliberately leaves 
        !           114: out much important information.  These details were ignored at first to give a conceptual framework for understanding 
        !           115: the new ideas that XPFE represent.  Now that we've gotten past the basics, we can go back and talk about the rest of the 
        !           116: functionality available with using Mozilla to create applications.
        !           117: 
        !           118: <p>At the <a href="http://meetzilla.mozdev.org/second_meeting.html">Second Mozilla Developer Meeting</a>, Rob Ginda, 
        !           119: the creator of ChatZilla, lead a discussion group about Mozilla as Platform.  In this session he listed all of the following 
        !           120: as components of a Mozilla-based application:</P>
        !           121: 
        !           122: <FONT COLOR="#800000">
        !           123: <UL>
        !           124: <LI>XUL (XML-based User Interface Language) - Used to create the structure and content of an application.<br><br>
        !           125: <LI>CSS (Cascading Style Sheets) - Used to create the look and feel of an application.<br><br>
        !           126: <LI>JavaScript - Used to create the functionality of an application.<br><br>
        !           127: <LI>XPInstall (Cross-Platform Install) - Used to package applications so that they can be installed on any platform.<br><br>
        !           128: <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>
        !           129: <LI>DTD (Document Type Definition) - Used for localization and internationalization, more commonly referred to in short-hand as L12N and I18N respectively.<br><br>
        !           130: <LI>XBL (eXtensible Binding Language) - Used to create reusable widgets using a combination of XUL and JavaScript.<br><br>
        !           131: <LI>XUL templates - Used to create a framework for importing data into an application with a combination of RDF and XUL.<br><br>
        !           132: <LI>XPCOM/XPConnect - Used to allow JavaScript, or potentially any other scripting language, to access and utilize C and C++ libraries.
        !           133: </UL>
        !           134: </FONT>
        !           135: 
        !           136: <p>Each of these technologies is important and several of these deserve to have whole books devoted to them.  Although
        !           137:  each of these technologies is important there is a distinction to be made among them.  Some of these are essential to 
        !           138: the creation of a Mozilla application and some of them provide powerful extra features that can be used in addition to 
        !           139: the basic functionality.
        !           140: 
        !           141: <p>For example, <a href="http://www.mozilla.org/rdf/doc/">RDF</a> is an extremely powerful technology for
        !           142:  using data in Mozilla but it is possible to create an application without using it.  
        !           143: <a href="http://www.mozilla.org/projects/l10n/mlp.html">Localization</a> also provides Mozilla with a great amount 
        !           144: of flexibility and usability but there are many existing applications that don't take advantage of this feature.  
        !           145: It wouldn't be possible to create an application without XUL though.
        !           146: 
        !           147: <p><b>Judge For Yourself</b>
        !           148: 
        !           149: <p>XPFE is a new technology that has yet to prove itself to the Web community and many people are skeptical 
        !           150: about the need for an application framework such as this.  Before you make up your mind about XPFE, you should 
        !           151: take a look at the many different applications that have already been created using Mozilla so you can judge for 
        !           152: yourself.  
        !           153: 
        !           154: <p>If you are interested in trying out some of these, there are currently over 30 different Mozilla-based 
        !           155: applications being hosted on <a href="http://www.mozdev.org/projects.html">mozdev.org</a> that have been created using XPFE.  
        !           156: Other applications using the same technology include ActiveState's 
        !           157: <a href="http://www.activestate.com/ASPN/Downloads/Komodo/More">Komodo</a> IDE,  Rob Ginda's 
        !           158: <a href="http://www.hacksrus.com/~ginda/chatzilla/">ChatZilla</a> IRC client, and Zope's 
        !           159: <a href="http://www.zope.org/Resources/Mozilla/">Mozilla Initiative</a>.
        !           160: 
        !           161: </body>
        !           162: </html>
        !           163: 
        !           164: 

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