WebReference.com - Chapter 21 of Professional JavaScript, 2nd Ed., from Wrox Press Ltd

Professional JavaScript 2nd Edition

Chapter 21: The BBC News Online Ticker^*

The series of excerpts below are from Chapter 21 of the Wrox Press Ltd. title Professional JavaScript, 2nd Edition.

In this chapter, we are going to review an application of JavaScript in the creation of a news ticker. This is the one used on the front page of the BBC News Online web site at http://www.bbc.co.uk/news. Here is a screenshot showing the ticker at the top of the middle column:

BBC Online Ticker Screen Shot

This was originally designed and implemented in 1999 at a time when the installed base of browsers was somewhat different to what is available now. When it was being developed, certain design choices were made, which now need to be readdressed given the progress that has been made since then. When the ticker was first implemented, these were considered to be the important criteria:

It should work on IE without requiring Java.
It should work on IE across all platforms (principally Windows and Macintosh).
It must use an existing data feed which was driving the Java applet without requiring additional editorial work to create a new data feed.
Some of the required dynamism was known to be unavailable in Netscape 4.x, so could continue to use the Java applet.
DOM wasn't nearly standardized and deployed enough to use.
It must not use an additional frame.
Netscape 6 was not available.
The market share of Netscape was declining and the future expectation was that usage of that browser would diminish and potentially vanish altogether.

From the viewpoint of 2001, we now need to reevaluate those objectives and consider some changes to the original design criteria:

Netscape 6 and Opera now both support IFRAME tags, rendering our IE-only selection mechanism less than perfect.
The JavaScript code that was carefully written (and compromised) to address the portability issues of IE across its various platforms needs to be revised somewhat to work on Opera and Netscape 6.
DOM standardization is much improved but regrettably, much of it is still non-portable due to the way the browsers treat whitespace and empty text nodes in the object model.

The early part of this chapter, will describe how the ticker works, its internals, and why it was implemented the way it was. It is necessary to discuss the compromises you need to make when building a real world JavaScript application like this.

At the outset, you begin with a somewhat ideal implementation that works fine on a single platform and browser. As you test the code on more platforms and browser versions, you gradually reveal more deficiencies in the browsers, meaning that you need to modify code until it works on both old and new browsers and whatever platforms that browser is supported by. In the end, you arrive at a code base that is somewhat less pretty than that which you started with. Also, there are all sorts of extra code fragments and sub-optimal coding techniques that become necessary.

That's roughly where we are with the live deployed ticker as it is on the News Online site. It works on the platforms and browsers it was originally intended for, but new browsers are available which mandate some corrective code to enable the ticker to run on them as well.

Things have moved on and usage statistics tell us that Netscape 4.x usage is still declining, while Netscape 6 usage is very small, but increasing. It is not yet a serious challenger to Microsoft, but it has the potential to gain significant market share. Opera browser usage is also small, but increasing, indicating that some people are considering alternatives to the Microsoft browser. We have a long way to go however before IE is no longer the dominant force in browser usage.

In the latter parts of this chapter, rather than simply review the ticker application as it was designed in 1999, we'll try to bring it up to date by remodeling the basic implementation so that it works with a wider variety of contemporary browsers.