The JavaScript blog.

Tagbbc glow

bbc glow tutorials

Gordon: A Flash JavaScript Runtime

Posted on .

Gordon is a Flash JavaScript runtime written by Tobey Tailor. It currently supports the SWF 3 action
model, which means it doesn't yet support ActionScript Virtual Machine 2
(introduced by Flash 9). Tobey said a future version of Gordon will have ActionScript Virtual Machine 2 support (read more on Twitter:

Gordon parses the SWF file and then draws using SVG and JavaScript. It
works well in Firefox and Safari, which also means it works on the

There are some demos on
paulirish.com/work/gordon/demos that illustrate SVG support and animation.

Usage looks like this:

new Gordon.Movie('trip.swf', {id: 'stage', width: 500, height: 400})

One thing I found interesting about Gordon is how it handles SWF file
decoding. Tobey uses a zip library in
inflate.js (written by Masanao Izumo) to decompress the file from a URL, then parse it.


bbc glow tutorials frameworks

BBC Glow: Overview and Example

Posted on .

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

  • The namespacing makes it play nice with other frameworks (and itself)
  • It's split into modules that are mostly self-contained (an exception will alert you to a missing dependency but this is rare)
  • Modules include: dom manipulation, language extensions, events, animations
  • Also features UI widgets with bundled images, HTML and CSS
  • The homepage works with the Konami code

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.

  • Glow has impressive browser support: support table
  • Glow can work alongside different versions of itself

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

  • extend copies the prototype from one object to another
  • interpolate provides simple string templates
  • map is useful if you like iterators and expect them to work in IE

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.