BBC Glow: Overview and Example

2009-11-01 00:00:00 +0000 by Alex R. Young

Glow is the BBC's JavaScript framework. Things to note:

Why does Glow exist?

To read what the developers say, see What is

To summarise, the BBC have strict browser support guidelines. They also
have disparate teams that can work on different parts of the same page.

DOM and selector support

It's not as advanced as Prototype or
Sizzle, but the selectors provide enough abstraction for most tasks (child and grouping are present but pseudo
selectors aren't). Access the DOM using
glow.dom.get("selector"). This will return a nodeList.

When working with Glow it's best to think in terms of node
(in a similar fashion to jQuery). NodeList
has a lot of convenience methods. Adding a CSS class or iterating over
lists of nodes is easy:

glow.dom.get("img").filter(function (i) {
  return this.width > 320;

glow.dom.get("#login a").addClass("highlight");

Language and Data

There are a few important methods in glow.lang to be aware

Here's an interpolate example in which I add it to String's
prototype for convenience:

String.prototype.interpolate = function() { return glow.lang.interpolate(this, arguments[0], arguments[1]); };

var html = '{from_user} {text}';
return html.interpolate({ image: tweet['profile_image_url'], from_user: tweet['from_user'], text: tweet['text'] });

Net (Ajax)

The network (Ajax) API is clean and easy to use. It's all in
glow.net, but there's not much to it: glow.net.get and
glow.net.post work in a similar way to most libraries.

Cross-domain requests are made possible with
glow.net.loadScript. This inserts script tags
into the document -- this works especially well with JSON (pay attention
to the use of {callback} in this example):

TwitterSearch.getTrends = function(callback) {
  var url = 'http://search.twitter.com/trends/current.json?callback={callback}';
  glow.net.loadScript(url, {
    onLoad: function(data) {
      var trends = [];
      for (i in data.trends) {
        trends = data.trends[i];
      callback(glow.lang.map(trends.slice(0, 3), function(trend) { return trend.name; }));


The animation API is similar to scriptaculous: it provides a set of
faders, sliders, highlight and CSS mutation. These are known as
animation helpers.

glow.anim.fadeIn(tweet_html, 1);
glow.anim.css(element, 0.5, { 'bottom': { to: 0 } }).start();

The other major parts of the animation API are
glow.anim.Animation, glow.tweens, and

The glow.anim.Animation class can be used to build your own
animation primitives. Specify a duration and a tween, then add a
listener for frame events on the animation object itself.

Tweens are functions for modifying animations -- there is a
comprehensive set in

Sets of animations can be orchestrated using
glow.anim.Timeline and an array of animations and delays
(known as channels). There's a good Mexican wave example
in the documentation.

My Glow example: Twitter search panels

I built a real time, user-configurable, Twitter search app just using

This demonstrates glow.dom, glow.lang, glow.events, glow.net with
cross-domain API calls, and glow.animations.