danwebb.net - JavaScript

It's Been A Long Time...

2008-06-23T22:56:00Z

But I’ve not just been sitting on my arse playing GTA IV, oh no. Well, not all the time anyway. The reason I’ve not posted anything (or been particularly active on the web in general) is that I’ve been damn busy. Most importantly, Catherine kindly gave birth to our first son, Max, back in March which has been quite a change and sapped a lot of my hacking time. I have to say though, despite the horror stories that many veteran parents like to feed you, our experience has only been good. In fact, not good, great. I recommend this reproducing lark.

Secondly, I’ve been hacking away nearly full time on one of my favourite projects to date, Peoples Music Store with LRUG stalwart and renowned anarchist, James ‘Bringing London To Its Very Knees’ Darling which is maturing nicely under private beta as we speak. Peoples Music Store is a great idea from some of the guys behind bleep.com whereby users can construct and customise their very own download store from the music they love then get free music themselves if people buy from their store. It’s a great way to both promote and show off you’re own music taste or in depth genre knowledge and find new music from stores you trust while getting some free digital swag along the way. I’m probably not explaining it well so just drop me a line if you want and invite and the site will explain itself. Public launch is coming in a month or so.

Building Peoples Music Store has been a great learning experience. We run the site on a cloud computing platform and from content ingestion to audio preview delivery to application servers to download packaging and delivery everything has been designed to scale horizontally – and I’m pretty proud of it. Thin, Rack, Sphinx, God, Starling and a whole load more cool open source gear is all running in there. I really need to get to blogging some of what I’ve discovered about working with Rack. It simply is the dog’s bollocks.

So, enough of the excuses. What’s on the horizon?

Speaking and Conferences

I’ve taken some time of speaking and conferencing in general so as to spend lots of time with Catherine and Max but come September I’m restarting the conference trail. Firstly, I’m doing a presentation and a tutorial (with Jarkko Laine) at RailsConf Europe all about JavaScript related Rails stuff and I’m likely to have a slot at @media Ajax as well. Also, I’ll be heading to dConstruct as is the tradition.

Hacking and Open Source Business

Although I’ve not commited to Low Pro or Low Pro JQ for a good while now they are both very much alive. I’ve simply not come across anything that I’ve felt the need to add for a while. If you have any suggestions or patches do let me know. I’ve actually got time to commit them at the moment. Another little project that I’m hoping to get off the ground is called Evil which is going to contain lots of Merb/Rack goodness. The first by-product of which is the merb_openid gem for consuming OpenID in Merb apps (it’s still not quite production ready though so don’t go using it just yet). I’ll let you know what Evil actually does when (or if) I actually get something working.

So, that’s all for now. Just a bit of a status report. I promise I’ll get some useful content written that you actually care about very soon.

How To Use Low Pro For jQuery

2008-02-03T16:00:00Z

It seems that my initial version of Low Pro for jQuery has gotten enough interest to continue with it but, as always, my previous post was extremely lacking in actual detail about how to use the damn thing. So without further ado here we go. It’s pretty simple really and, as its a port of a subset of Low Pro for Prototype, anything that goes for that also goes for jLow.

Heh, let’s not call it that again. Bad.

Anyway, on with the show…

Class-based OO

In order for Low Pro behavior classes to work with jQuery we need a class implementation. The one I’ve based this on is the version from Prototype originally based on Alex Arnell’s work. This is detailed in this article on the prototype site. The only difference is that instead of using Class.create you use $.klass:

Draggable = $.klass({
  initialize: function(options) { },
  onmousedown: function() {}
});

GhostedDraggable = $.klass(Draggable, {
  onmousedown: function($super) {
    // do extra stuff here then call original method...
    $super();
  }
});

Attaching the behavior class to elements

To attach the behavior class to some elements you can use the attach method:

$('div.product').attach(GhostedDraggable, { anOption: thing });

attach creates a new instance of the given behavior class for each element in the collection and attaches them to these elements. Any subsequent arguments are passed to the class’s initialize function. A few magic things happen here. First, this.element in the behavior instance is set to a dollared version of the element it’s attached to. Secondly, every method beginning with on (eg. onclick, onsubmit etc) gets bound as an event handler on the attached element. However, in the event handler functions themselves, this points to the behavior instance rather than the element so you can call it’s other methods. You can obviously get to the element by using this.element if you need to though.

And for the bonus round…

So, that’s about all there is to it. One added bonus is that if you are using livequery then Low Pro will automatically use it to attach any new behaviors after the DOM is changed without you needing to worry about it.

Here’s a super simple example behavior that simply adds and removes a CSS class name when it is hovered over. It’s about as bare bones as you can get while showing off most of the features:

Hover = $.klass({
  initialize: function(hoverClass) {
    this.hoverClass = hoverClass;
  },
  onmouseover: function() {
    this.element.addClass(this.hoverClass);
  },
  onmouseout: function() {
    this.element.removeClass(this.hoverClass);
  }
});

jQuery(function($) {
  $('span.name').attach(Hover, 'myClassName');
});

For more information about how you might use behavior classes take a look at this article. ANother good point of reference is the built-in Remote.Link and Remote.Form behaviors that are built in to Low Pro. Take a look at the source Also a Low Pro site is on its way shortly. As I use it more myself I’ll post more real examples but you can post any questions to the Low Pro list.

Low Pro For jQuery?

2008-01-31T00:56:00Z

A few days ago a discussion started about porting Low Pro over to jQuery. It’s been on my mind for a while (especially since Bill blogged about agnostic UJS) but I’d hesitated in doing this for a few reasons. Firstly, of course, jQuery is the mortal enemy of Prototype and only one library shall remain come The Quickening. Aside from this completely rational reason, I wondered whether jQuery really needed anything like Low Pro at all. After all, jQuery has always been designed with ‘unobtrusiveness’ in mind and was written with most of what Low Pro originally intended to fix in Prototype implemented from the start. There was no need for something like Event.addBehavior because essentially that’s what jQuery is:

Event.addBehavior({
  'a.external:click': function() { //...code...// },
  'div.product:mouseover': function() { //...code...// }
});

Can be achieved in jQuery like this:

jQuery(function($) {
  $('a.external').click(function() { //...code...// });
  $('div.product').mouseover(function() { //...code...// });
});

And rather than ever going near inline event handlers this unobtrusive style was the de-facto method of working for the jQuery crowd. The angel on your scripting shoulder. However, as you can probably tell from reading this blog, I’ve never really adopted jQuery as my main library and this was due to one big reason (and a bundle of small ones but I’ll leave them out)...

The one big reason was that, while jQuery was super simple and concise when working on smaller projects, it offered no help in structuring larger applications. All you get in jQuery, aside from Ajax methods and a handful of utilities, is the ability to select nodes then doing something with them. On the other hand Prototype is much rounder in scope. It generally plumps out JavaScript as a language adding lots of useful methods to built-ins, a host of functional programming tools and recently a full Class-based OO system with inheritance and the whole shebang which has formed the back bone of Low Pro’s behavior classes.

Low Pro’s behavior classes have become my favourite solution to the problem of structuring complex Ajax applications in a simple and maintainable way. Even hugely complex applications can be separated up into a number of groups of elements with attached behaviors. These behaviors maintain their own state, respond to events and can also expose there own public methods. They are linked to an element but the element doesn’t know about them which eliminates the need for expandos on elements and also most of the reasons for having element references in closures which is good for keeping memory usage at bay. For instance, a click on a TabBar instance can call the loadContent method of a ContentPanel. The result is more than a set of widgets, its a way of splitting up huge complicated interfaces into a collection of small, loosely joined parts each simple in its own right and totally responsible for its part of the interface. This approach becomes incredibly useful when you introduce server-side requests and responses into the mix but that’s a whole other article.

In jQuery land this kind of effect can be achieved via plugins. You’ll find a ton of widgets in the repository that have this kind of UI:

$('#example4').draggable({ helper: 'clone', revert: true });

The plugin architecture is one of jQuery’s many strong points but this kind of approach has a couple of disadvantages. Firstly, the plugin is created within a closure which means usually if you want to change the behavior of the plugin you literally need to pop open the source and change it. The second and related disadvantage is that because of the difficulty in changing plugins they tend to have a whole raft of options to allow you to configure how it works. The problem with this is that individual widgets can end up pretty monolithic. Wouldn’t it be be better if you could just take the basic draggable behavior and just augment it to your liking?

Well, in Low Pro behaviors are classes so we can do this by simply subclassing another behavior and overriding or adding what we need. For example, we can create GhostedDraggable as a subclass of Draggable. No need to hack any existing code at all. As well as having the power and convenience of jQuery’s DOM manipulation we can have a simple and powerful way to structure larger, more complex applications. I can have my jQuery cake and eat it.

So, I’ve started experimenting with Low Pro for jQuery. Here’s a preview:

Hover = $.klass({
  initialize: function(hoverClass) {
    this.hoverClass = hoverClass;
  },
  onmouseover: function() {
    this.element.addClass(this.hoverClass);
  },
  onmouseout: function() {
    this.element.removeClass(this.hoverClass);
  }
});

$('div.products').attach(Hover);

If you want to leave feeedback or abuse jump on the Low Pro list. Do you think it has a place in the jQuery landscape? How do you currently structure complex applications in jQuery?

UPDATE: Thanks to Chris of Err The Blog Low Pro JQ is rocking on GitHub. Fork away.

Low Pro 0.5: Now Compatible With Prototype 1.6

2007-12-12T00:23:00Z

Today I tagged Low Pro 0.5 for release which now works with Prototype 1.6. There are a number of things about this release that are worth mentioning aside from the compatibility. Firstly, it’s gotten a little smaller as Prototype core now includes most of the functionality Low Pro used to add (DOM Ready support, inserting using DOM nodes and a lot more). It’s also got a couple of new features so here’s a rundown:

Event.onReady delegates to the new dom:loaded event: Except that as before if functions are added after the DOM is loaded they fire immediately.
DOMBuilder now delegates to Prototype’s new Element: Now difference in usage here though, just less code.
Low Pro’s DOM methods are now gone: Prototype core does everything you should need now.
Behavior.create() works just like the new Class.create(): Yes, you can now create behavior classes that inherit from other behaviors (or indeed any other class). See the Prototype’s site for more information.
New core behaviors: The Remote and Observed behaviors are now included in the core so you can now turn normal links and forms into Ajaxy links and forms even more easily.
Event.addBehavior.reassignAfterAjax is now false by default: Normally, if you are relying on this behavior it’s much more efficient to move to a solution using event delegation. However, if you do want your behaviors reassigned to new content after Ajax calls then go ahead and set it back to true again. Another solution is to manually call Event.addBehavior.reload();

So that’s about it. As you can see, it’s getting smaller as Prototype fills the gaps and graduating into more of a pure behavior framework. I’d be interested in adding more core behaviors for other common tasks as well as possibly getting together some kind of behavior library. I know I’m building up a fair few and I’d love to see what everyone else is doing (in fact I’ve already seen some great stuff) so suggestions are more than welcome…as are bug reports and patches. For both of these and general assistance try the Google Group.

Grab the new version and have a play.

@media Ajax

2007-11-22T10:09:00Z

Well, that turned out rather nicely I must say. Really high quality presentations and great attendees – I really hope that Patrick makes it happen again. Here are the slides from my presentation: Metaprogramming JavaScript.

| View | Upload your own

In other news, Low Pro 0.5 is nearly ready to rock. The new version is quite a lot smaller as Prototype 1.6 has solved so many of the things I used to fix with Low Pro. It does however have a few nice new features. Watch this space.

Custom Attributes And Class Names

2007-10-07T23:38:00Z

At the Rich Web Experience, Alex Russell did a presentation entitled Standards Heresy, In the presentation, which I didn’t attend so forgive me if I’ve gotten the wrong end of the stick, he spoke about how Dojo has been forced to abandon web standards in some cases in order to get the job done. The conversation was furthered by Aaron Gustafson’s response and is a really interesting discussion. However, I’m not going to comment on the politics of the W3C further as I know nothing about that at all. One example in the presentation reminded me of something I’ve wanted to comment on for a while now. Here’s that example:

<div dojoType="dijit.form.HorizontalSlider"
     name="horizontal1"
     onChange="dojo.byId('slider1input').value=arguments[0];"
     value="10"
     maximum="100"
     minimum="0"
     showButtons="false"
     intermediateChanges="true"
     style="width:50%; height: 20px;"
     id="slider1">
  ...
</div>

This is a snippet of code showing how Dojo is going off the standards rails by adding custom attributes that are ‘needed’ to configure a slider widget. This is a really good example of a case where you definitely shouldn’t add custom attributes to HTML. While the W3C/browser vendors/whipping boy of choice might be letting us down what the web standards movement taught us (most importantly in my mind) is that semantic HTML is critically important. Having a <div> with custom attributes that tell Dojo it’s a slider widget is of no use to anything apart from as a crutch to Dojo. It has no semantic value at all. Outside of the context of Dojo it’s just an useless lump of markup.

Although HTML is a pretty limited vocabulary which is very document centric we can still go much further than this in attempting to describe what this is semantically. It’s an input so use an input or a select box as the base element. How browsers and assistive technologies deal with these elements is a lot closer to what we want than a meaningless <div>. Secondly, there’s custom attributes – having attributes containing behavioural information like showButtons and intermediateChanges are equally as semantically useless as the old presentational attributes like bgcolor and border and we’ve all learnt the disadvantages of mixing content and presentation and discarded those…hopefully. There’s got to be a better way.

So we want our semantic HTML and to keep our behaviour data out of our document. Take a leaf out of CSS’s book. We can name and classify objects and use these as our hooks to attach our JavaScript powered behaviour. Eureka! Not quite:

<!-- Created with http://cow.neondragon.net/stuff/reflection/reflectomatic.html  -->
<img src="/reflection/photos/giraffe.jpg" width="132" alt="" class="reflect ropacity71" />

The above code is from a nice little JavaScript effects library called reflection.js which uses class names to hook in it’s behaviour unobtrusively. However, take a closer look at the class names. They aren’t classifying things as such, they are embedding configuration into directly into the class names. In a similar way it’s not a generally thought of as a good idea to give elements class names like ‘bigred’ or ‘width40’ although, depressingly, I’ve seen it done! This is definitely an abuse of class names – its not a ‘bigred’ its a ‘price’ and so on. This is seen not just in reflection.js but a large amount of ‘unobtrusive’ libraries.

So how can we improve on this? We need to provide configuration information to our JavaScript but neither custom attributes or embedding info are looking good. The answer is pretty simple – add another link to the chain and this is were (plug imminent :) projects like behaviour.js and Low Pro come in. They add that other link to the chain. We can say that all inputs with the class ‘date’ should have a date selector attached to them or that selects with the class ‘rating’ should be replaced with a slider that’s range is 0-10 and so on. Here’s a snippet using Low Pro to illustrate this:

Event.addBehavior({
  'select.rating': Slider({ min: 0, max: 10, intermediateValues: true }),
  'input.date': DateSelector
});

In this way we are able to maintain semantic HTML, avoid adding custom attributes and maintain a very loose coupling between our document and it’s behaviour. This, we’ve seen from CSS, is vitally important to maintainability and a real advantage. Via this method you can apply configuration to single items or as a group. If you decided that ‘rating’ selects should in fact all be vertical sliders instead of horizontal then that’s no problem either. It gives you ultimate flexibility.

This methodology is right at the core of Low Pro and I’ve been getting incredible results from it. It’s made what could be really complex JavaScript implementations a breeze. Instead of a huge, fearsome application everything becomes a HTML document with many loosely, coupled smaller components attached to it. If you don’t use Prototype/Low Pro don’t let that stop you from working this way. Bill Burcham wonders whether this can be library agnostic. Well, as an idea, in a sense it already is. All you need is the ability to select by CSS selectors. Dojo and dijit are in fact very well suited.

@media Ajax Is Scarily Good

2007-08-21T10:50:00Z

It seems that the @media Ajax site has just been updated. I was looking forward to it before but more speakers have been added including Brendan Eich who, according the abstract, will be demonstrating a working version of Tamarin in Firefox!

Also, Dojo’s Alex Russell, jQuery’s John Resig, YUI’s Douglas Crockford and Prototype’s erm, me will be representing the major libraries and then there’s the Ajaxians, Ben and Dion stepping up for a keynote. Finally, Mr Jeremy Keith will be hosting the hot topics panel in the traditional @media style – Hot Topics panel + JavaScript people should be quite explosive. As it was put in the Prototype Core Campfire the other day, “The JavaScript community is not so much of a community, more of a debating society” It’s going to be excellent. Of course, as it’s in London town you know we’ll be sinking a good few pints after. It will be a rare chance to get together with fellow scriptie types this side of the pond and the only pub conversation you’ll ever be allowed to mention closures in….surely that’s a good thing?

There are still early bird tickets left until the end of august so get your arse down to the site and sign up.

My presentation, Metaprogramming JavaScript, is for all those people who moan that they never learn things at conferences. It’s journey into the deep innards of JavaScript and I’ll be explaining the some of the metaprogramming techniques used in YUI, Prototype and Low Pro along with really getting into advanced JavaScript concepts like prototype inheritance, functional programming and closures. I defy you to turn up and not learn something new.

Low Pro Behaviours 101: Part 2

2007-07-18T14:30:00Z

In the first post I briefly explained how to use pre-made Low Pro behaviours but, although I’m in the process of writing a few myself, Low Pro is not going to be a widget library – what it is is a great framework to write your own components with. So, in this post, I’m going to go into a little detail about how to write your own behaviours. If the idea of that doesn’t bore your rigid then read on…

Creating a behaviour

As discussed in the last post behaviours are actually just specialised constructor functions. So, to create our behaviour we use Behavior.create in a very similar way to Class.create:

var Hover = Behavior.create();

Adding methods and properties

This creates an empty behaviour much the same as Class.create gives us an empty class. Now we add our methods on to the prototype of the constructor that we’ve created. This example is a super simple behaviour, Hover, that will add/remove a class name (which you can specify) on mouse over/out:

Object.extend(Hover.prototype, {
  initialize: function(className) {
    this.className = className || 'over';
  },
  onmouseover: function() {
    this.element.addClassName(this.className);
  },
  onmouseout: function() {
    this.element.removeClassName(this.className);
  }
});

Any on* methods are bound as event handlers to the element when the behavior is attached to the element. The scope of these methods is ‘corrected’ automatically so that this will always refer to the behaviour instance. The behaviour instance also has a magic property, this.element, which points to the element it is attached to. The final thing you need to know is that the initialize method is called as soon as the DOM is ready (as soon as the element is available). We can now use this behaviour in the manner discussed in the last post:

Event.addBehavior({
  '.dongle': Hover('hover')
});

Aside from these special cases behaviour constructors are identical to any regular JavaScript ‘class’. You can add methods and properties as you see fit. Note that each element that has the behaviour attached to it gets its own instance of the behaviour so you can maintain the state of each behaviour independently without having to resort to setting expandos on the element, using closures or any other method which is messy and prone to causing those nasty circular references that cause memory leaks. As an alternative you can just pass your methods straight into the Behavior.create call so the following is equivilent to the above code:

var Hover = Behavior.create({
  initialize: function(className) {
    this.className = className || 'over';
  },
  onmouseover: function() {
    this.element.addClassName(this.className);
  },
  onmouseout: function() {
    this.element.removeClassName(this.className);
  }
});

Working with multiple elements

Now this is all good for dealing with behaviours that work on a single element but in many cases we want a behaviour to operate on a number of elements. For example, you would want to be able to attach a Sortable behaviour to a list element but the behaviour itself would also need to deal with all the list element inside it. There are a number of ways to approach writing these kind of behaviours, all of which are demonstrated in the various test behaviours I’ve written.

Event delegation with behaviours

The first technique, and normally the best is using event delegation to capture all the events on elements inside the attached element with your behaviour and process them. The process is pretty simple…here’s part of the Calendar behaviour:

var Calendar = Behavior.create({
  // other methods hidden for clarity
  onclick : function(e) {
    var source = Event.element(e);
    Event.stop(e);

    if ($(source.parentNode).hasClassName('day')) return this._setDate(source);
    if ($(source.parentNode).hasClassName('back')) return this._backMonth();
    if ($(source.parentNode).hasClassName('forward')) return this._forwardMonth();
  }
});

Here, we define a single onclick method which will capture clicks on all the elements inside the calendar – Forward and back arrows, and the dates themselves. Firstly, we use Event.element to grab the source element, the element that was actually clicked, then we can just examine this element to work out what needs to happen to the calendar and call the relevent method. In this case, and in most cases, the most convenient way is to look at what class names the element has. In the calendar, each day has the class ‘day’ and the forward/back arrows have the classes ‘forward’ and ‘back’. This method is really nice for a number of reasons, firstly, we avoid attaching lots of event handlers for each sub element and secondly we have this central point where we can handle and dispatch events – a really pleasant way to work with complex interactions. Of course, event delegation isn’t always a good fit so…

Linking behaviours

In more complex cases when the sub elements of your behaviour need to maintain their own state or handle events in a more complex way you can have your main behaviour attach sub-behaviours to inner elements during initialisation and maintain a link between the two. An example of this can be seen in the Draggable behaviour:

Draggable = Behavior.create({
  initialize : function(options) {
    // code hidden for clarity
    this.handle = this.options.handle || this.element;
    new Draggable.Handle(this.handle, this);
  }
  // code hidden for clarity
});

Draggable.Handle = Behavior.create({
  initialize : function(draggable) {
    this.draggable = draggable;
  },
  onmousedown : function(e) {
        // code hidden for clarity
  }
});

Here, the initialize method of Draggable finds the element that it wants to be the ‘drag handle’ and attaches another behaviour, Draggable.Handle, to it. At this point we pass a reference to the Draggable instance to the Draggable.Handle instance so the drag handle can refer back to and control the main draggable behaviour. You can of course, if necessary, build up a complex component by building a number of linked behaviours that all comunicate back to the main behaviour.

Get it? Got it? Good

So that’s all for now. Any questions just drop me a comment and I’ll get back to you ASAP. At this point, if you are interested in writing your own behaviours then it would be worth referring to the behaviours in SVN. However, I’m just feeling this out for myself and I’m sure I’ve not explored any near all of the possibilities of working with behaviours so if you have any brain waves be sure to post a comment also. If there’s enough interest I might include a behaviours repository on the upcoming Low Pro site.

Low Pro Behaviours 101

2007-07-17T01:02:00Z

Okay, I’ve gone on about this for long enough and made lots of promises. So now’s time to make a start on explaining all this business with Low Pro and ‘behaviours’.

Behaviours are part of Low Pro and are object orientated mechanism by which you can handle events and maintain the state of an element (or indeed a set of elements) and as I’ve found out recently are an incredibly nice way of writing and deploying UI widgets. Before I dive in to how to write your own behaviours, let’s get a flavour for how to use them. If you want to play along you’ll need the latest versions of Prototype and Low Pro as well as the remote behaviours which you can grab from my SVN.

The first thing to note about a behaviour is that they are simply specialised constructor functions so you can use them with the new keyword to create an instance:

var aLink = $('edit_5');
var ajaxLink = new Remote.Link(aLink, { method: 'post' });

Behaviours, when used with the new keyword, always take an element reference as the first argument. Any subsequent arguments are passed to the behaviours constructor. In the case above, Remote.Link is a behavior which when attached to a link will make the link trigger an Ajax request rather than a tradtional page refresh. With this behaviour the second argument is an options hash that is passed through to the Ajax request. Now we’ve created an instance of the behaviour that instance of the behaviour is bound to that element for it’s life time on the page handling click events on the link and sending Ajax requests.

If you need to attach a behaviour to multiple elements on then using new could get a little tedious. To this end behaviours work very nicely with Event.addBehavior:

Event.addBehavior({
  'a.edit': Remote.Link
});

Using a behaviour with Event.addBehavior in this way will attach a seperate instance of the behavior to every element that matches the CSS selector. Notice we don’t pass in an event in the selector as you might be used to. The behaviour knows what events it wants to listen for. Now all the links in the page with the class name ‘edit’ will invoke Ajax request. You may need to pass in extra information to the behaviour as we did above with the options hash. Thanks to a bit of metaprogramming hackery we can do this too:

Event.addBehavior({
  'a.edit': Remote.Link({ onComplete: triggerEdit })
});

As you can see, it’s almost like CSS for interactivity where you’re defining how elements behave in an declaritive, almost code-less fashion. In my own projects I’ve gained massive advances in maintainability by separating everything out into behaviours then using Event.addBehavior as the glue to my HTML. You don’t need to use custom HTML attributes or weird classnames – you just bind behaviours to elements as you would style rules in CSS.

Of course, using this method you don’t get references to the behaviour instances you’ve created. In fact, you’ll hardly ever need to get references to these behaviour instances as most behaviors don’t need public methods at all but in case you need to get at them there’s a property of each behavior that contains an array of all its instances on the page:

Remote.Link.instances //=> an array of all the instances of Remote.Link

So that’s basically how to use behaviours. In a day or two I’ll post part two of Behaviours 101 which will show you how to make your own but in the meantime try out some of the behaviours I’ve already created. So far there’s a Draggable, Droppable, A date picker, Remote link and Remote form. Check out the demo page.

The State (And Future) Of The UJS Plugin

2007-06-16T15:19:00Z

Over the past few weeks loads of people have been asking me about what’s going on the UJS plugin. It’s obviously fallen in to disrepair so people, understandably, have been concerned. There has been a reason for this aside from the fact that I am a lazy barsteward (which of course I am, but that’s beside the point). Here is a letter I’ve just written to the UJS mailing list that I’d thought I’d post here to try to get a little more feedback. It’s a little bit long but bear with me…

I’ve been chatting to Luke and users of UJS about what to do with it and still haven’t quiet decided hence the lack of news but below is a rundown of where we are at on the whole thing. However, this is definitely personal opinion and doesn’t necessarily represent Luke’s opinion on the matter.

Essentially, the status is that, of late, I personally have not used UJS at all and have found a much better process by using Low Pro on its own without all the Ruby scaffolding of the UJS plugin. Secondarily, after talking to lots of developers at RailsConf it seems that the UJS plugin has failed to truly achieve it’s main goal which is to get Rails developers to write JavaScript using progressive enhancement. Many people seem to mainly use the plugin to get their JavaScript in to a separate file which is actually not even essential to progressive enhancement and I think this is a failing in the design of UJS itself. To achieve progressive enhancement you really need to think of JavaScript as a separate layer on top of a working HTML application but UJS lets you get away with keeping behavior in your views and hence leads many developers to think in the same way as they did before but think they are unobtrusive because they don’t see any JavaScript in their HTML – which is obviously not what we wanted to achieve. While many people can and do successfully use UJS for progressive enhancement even more seem not to – UJS has not been the ‘angel on your shoulder’ that I originally wanted it to be.

On top of this, the method by which the generated JavaScript is kept in the session has many limitations which myself and Luke have been aware of from the start. It’s not generally a good idea to keep this much information in the session (in fact, normally I never store more than a user ID if I can help it) and while acceptable for light to medium use it does have an upper limit depending on the type of session storage you are using. Rails edge now uses cookies to store session info by default which have a very very low limit which will cripple UJS completely. We have considered other alternatives such as some kind of file based storage but every time it just strikes me as too much scaffolding just to allow developers to put behavior in their view files which, as a said above, I’ve come to believe is a really bad idea anyway.

One of the things that I do personally like and something that has received the most positive feedback are the behavior helpers (the make_*) stuff which essentially encapsulate common tasks with sensible defaults in a very Rails like way. It’s a real time saver and the conventions provided mean that the best path (such as using this.href for the Ajax url) is the easiest. Recently, I’ve come to do this in my own projects via Low Pro and it’s behavior ‘classes’ (although they need a better name!). Now via Low Pro I can write stuff like:

Event.addBehavior({
  '.product a.description' : Remote.Link({ update : 'product_description' }),
  '.product' : Draggable({ revert : true }),
  '#basket' : Droppable
});

I really like this and am slowly building up a library (which you can see if you look at the Low Pro trunk) of common behaviors. There’s a date picker, a drag/drop implementation and the remote stuff I’ve illustrated above. I’m planning on writing autocompleters and in-place editors as behaviors as well. But behaviors have proven really easy to write and I love them as a tool for building site specific components. In fact, as I’ve worked with Low Pro it’s become apparent to me that behaviors are by far the killer feature which is interesting as they were just an experiment I hacked together one day without much thought.

So what to do? Well, there’s two ways to go as far as I can see. The first is to shut down development on UJS completely (or hand it over to another party if anyone is interested) and go on to promote the techniques of implementing progressive enhancement using Low Pro that I’ve found to be so successful recently. This could possibly be via the UJS4Rails site or through my own site – I’m not sure which would be a better platform right now.

The other would be to re-think the UJS plugin totally and go for some kind of 2.0 release that would take a completely different tack. However, all of the ideas for this I’ve thought of or heard so far don’t really compel me to write them. I think to work on this myself I’d need to be sure that I’d want to use it and so far this is not the case but any ideas and feedback are very welcome so please do drop me a mail or feedback on this list.

Either way, we need to make fixes to the current plugin to make it work with Rails 1.2.3 which I’ve been working on recently but I’d love patches if you’ve already solved these issues yourself (which it appears many of you have).

So yes, that’s it. Let me know what you think, I’d appreciate any feedback you have.

@media 2007 Europe Over, @media Ajax Announced

2007-06-10T08:13:00Z

Yep, well that was that. @media Europe went off in the usual excellent fashion and it was an excellent few days. This years highlight was definitely the quality of the presentations…I learnt really quite a lot of new stuff and usually I learn next to nothing at conferences. Did you know that having more than two asset hosts can have a detrimental effect on download speed? Freaky. Håkon Wium Lie did a hugely informational presentation about CSS3 as well.

My presentation seemed to go down reasonably considering I was up against Andy Clarke’s traditional end of conference slot and that myself and Mark Boulton had an unfortunate clash of presentation analogies (his presentation likened typography to martial arts). The slides are on slideshare so feel free to check them out.

Finally, Patrick announced @media Ajax which I’ve been really excited about for a while. It’s a whole conference in London dedicated to DOM Scripting and Ajax which I’m really happy to be speaking at. I’m going to be presenting on a much more hardcore topic there: Metaprogramming in JavaScript.

And with that the conference season is over and I’ll be blogging about proper stuff again. In fact, this week I’ve got some fairly important stuff to talk about. Keep your RSS readers peeled.

Photo by Drew McLellan.

RailsConf Is Over: One Down, One To Go

2007-05-21T18:14:00Z

UPDATE: The RailsConf version of the slides are over at SlideShare. The versions of the presentation I’ll be doing at @media San Fancisco and @media London will be considerably different but the kung-fu foolishness will remain intact.

RailsConf 2007 is over and I have to say it was considerably better than the previous year. Rather than last year’s overwhelmingly self-congratulatory tone (“Aren’t we clever! We use Rails!” Accompanied by much clapping, standing ovations and general whooping) it was a much more down to business affair and although it was really big (1600 people) it was friendly.

So what was the big news this year? Firstly, I got the feeling that everyone was bracing themselves for “the enterprise” with JRuby going strong and Sun looming over the proceedings. It seems that everyone’s got a new Rails IDE on the way out and the exhibition hall was full of people hawking their wares and pretty much everyone I met was a full time Rails professional. I suppose the up side of this injection of big money into Rails is the free beer but aside from that I think the transition is going to be uneasy. Java and J2EE are great for getting huge amounts of programmers to write huge things because inevitably some of those programmers are going to be shit and Java and J2EE provide a strict framework by which you can’t go too wrong. However, Ruby on Rails is great for getting small amounts of really good programmers to churn out software quickly but doesn’t provide a rigid safety net which means a bad (or even not really good programmer) can basically bring an application to it’s knees. In fact, I’ve seen some terrible code in Rails apps recently…stuff that would make Koz and Jamis turn white. Rails dev shops really need to watch for this. Quality control, people!

Secondly, there was lots of buzz about Merb which is really promising and in my opinion is starting to feel more like Rails 2.0 that Rails 2.0 is shaping up to be. It’s got all the really useful stuff that I use day to day in Rails and none of the stuff I don’t use. Better still all of the core features are really well implemented and feel really cruft-free (I read and understood the Merb source in about 2 hours). This makes it fast as well. Ezra seems committed to keeping the core pretty lean and providing most extra functionality as gems rather than plugins which seems extremely sensible. Plugins are simple are now suffering from a lot of the problems that gems have already solved (load order, dependencies, version control etc).

Finally, I was impressed with DHH’s keynote. He must be under large amounts of pressure to deliver the next new big feature but regardless his keynote was low-key and considered. There’s no big stuff on the way but what is coming is consolidating the core ideas of Rails, providing more sensible defaults, more support for REST and it sounds like some of the JavaScript helpers are being pulled to plugins (or at least some of them)....nice one!

On the social side it was great. Portland is a cool place and of course we had Robby and the Planet Argon crew to show us around and they did a great job. I think I managed to meet up with nearly everyone I wanted to, the highlight being lunch with Sam, Thomas and Seth and some chat about Prototype which has got me pretty enthused about contributing again. I even met the Rails Envy guy who is Ruby On Rails…rock on. There was a mad burlesque breakbeat marching band in the conference center at one point as well….got to like that. It was quite a Ruby moment when a guy in hot pants with a huge flag tried to dry hump Rich Kilmer. Poor dude.

My presentation, The Mysteries Of JavaScript-Fu, went down reasonably well from what I could tell (apparently, I was not slagged off on IRC…miracle!) and I’ll be putting the slides up as soon as I get a vaguely working wireless connection (I’ll update this post with the link). But Dr James’ presentation on plugins was a work of art. While my presentation involved me talking in a fake kung-fu voice, James had a gothic horror thing going on. Stupid voices from the Brits!

My only regret is that Zed Shaw won the Rails Pimp Cup ....that was main to be in my possession, damn it!

Now to get on a plane to San Francisco for @media America and a lot of footwear purchases.

Off To RailsConf and @media America

2007-05-15T23:10:00Z

Just breaking radio silence briefly to say that I’m off to the states (again) to speak at RailsConf in Portland 17th-20th then on to @media America in San Francisco for the 21st-28th. I’m going to be doing presentations both called ‘The Mysteries Of JavaScript-Fu’, both with an old skool kung fu theme but quite different aside from that. If you are around in either of these places or have any tips on good skate and sneaker stores then drop me a line….I’m always up for a couple of cold ones or/and sneaker shopping missions.

When I get I’ll be working a load more on Low Pro and blogging more about it. It’s developing quickly at the moment as Prototype picks up momentum and it’s getting some damn good features. In the meantime, you could always check out the trunk and see the new features that have already gone in. Build the trunk release then try as a sneak preview:

$('an_element').wrap('<strong>');

Also, look out for a major new set of features for Event Wax scheduled for release round about the time of @media London.

Low Pro 0.4 Released

2007-04-16T10:08:00Z

I’m back from India and just dropping a quick note to say that Low Pro 0.4 is out. There are a few new features (which I’ll go into later) but essentially this is a bug fix / optimisation release and has many changes that help it work well with the latest version of Prototype. Most of this has been backing out parts of Low Pro that have been implemented or otherwise bettered in Prototype now which is great and I expect to see more of this happening soon. There’s some good work going on with events at the moment and DOM ready support is planned to go in soon.

One feature of Low Pro I have been using heavily myself are Behaviour classes. Behaviour classes allow you to attach behaviour to elements in an object orientated way. Each element gets it’s own instance of the behaviour which means that it can retain state through its lifetime without using expandos or creating nasty circular references that cause memory leaks (well, of course, you still can but it lessens the chances). I intend to write a lot more about behaviour classes shortly but in the meantime have a peek at the Draggable behaviour in SVN it turns out that it’s a really neat way to write components.

Download Low Pro 0.4

Flash vs. Ajax: It's time to expand your toolbox

2007-03-20T04:03:00Z

I’ve decided not to write the obligatory SXSW wind down post as all your favourite bloggers already have and there’s no point in adding to the pile but I’d like to talk about one particular topic that came up in Jonathan Boutelle’s Ajax or Flash:What’s right for you? panel. In the panel he talked, quite generally, about the relative advantages of each platform, examined services like You Tube, Slideshare and several others and essentially came to the conclusion that both have their place and are not mutually exclusive. In fact, it seems that hybrid Flash/Ajax applications have the best of both worlds and that developers who’s skills lie in both Flash and Ajax will become more and more valuable.

For quite a large proportion of my career I’ve been a Flash developer starting round about Flash 4 with my final commercial work being done with MX 2004. I was even a beta tester for MX at one point. In fact, thinking about it I’ve probably spent an equal amount of time working with Flash as I have with JavaScript but of late, and mostly since the Web Standards movement took hold, I’ve been working in the field of HTML/CSS/JS (for front end work) almost exclusively so this panel struck a cord with me. I left the room with a mission: update my Flash knowledge by learning about ActionScript 3 and Flex 2 but more importantly examine more fully how Flash can fit in with more modern (read: trendy) web development trends like REST, semantics and friendly URLs and how this can all interface with JavaScript and HTML…

Flash has some really quite incredible features that we struggle with implementing with HTML/CSS/JS: Sound, Dynamic vector drawing, Sockets, local storage, video. I could go on. Why the hell are we struggling with <canvas> and VML? Comet is essentially a hack while XMLSockets are built in to Flash…and then you have Red 5. To add to this, Apollo has just been released which is looking pretty interesting. See what I mean?

The sweet spot for JavaScript and Ajax has always been for those small, progressive enhancements rather than for creating rich interfaces. It seems to me that the more you head in that direction with JavaScript the more serious limitations you encounter. Browser JavaScript is never fast, has memory leak issues, browser bugs, CSS bugs and all manner of other tom foolery that, when you get to the stage of building something like for Google Maps get’s really time consuming and messy. There are many efforts (WHATWG, Tamarin etc etc) that are working toward solving many of these problems but for now and for the foreseeable future we are stuck with em. This, I think, is when it’s time to bring out Flash. Not for the whole app of course, but used in conjunction with HTML/CSS/JS. Flash however is not without it’s problems.

I lost interest with Flash mainly for these reasons:

Monolithic applications: Flash apps tend to exist at one URL, fail to respond to the back button well and generally work within their own environment in the browser rather than working with the browser.
Bad programming environment: Working on a Flash app with more than one person was always a pain in the arse. Because a lot of the app was contained inside one or more FLA files which could only be opened by one person at a time and it was a binary file version control was a pain.
Controls didn’t work enough like browser controls: The in-built components helped a bit but Flash select boxes, scroll bars and other widgets just didn’t look or act the same. Bad for usability.
Accessibility no-no: Previously SWFs where essentially a black box to assistive technologies and event MX components seemed to have trouble with keyboard focus and tabbing. * Limited and tedious interface with JavaScript: Getting data in and out of the SWF was possible but never easy.
ActionScript is heading toward Java: Oh man, don’t get me started. As ActionScript develop it becomes less and less dynamic. `You get native classes and packages but type annotations? I suppose you get a performance boost but really. Static types are for stupid people…we don’t need em
It’s not open source

After re-examining these many are solvable, avoidable or have been solved recently. Solving the first problem is probably the most interesting of the lot. We all know the internet works best when it’s used as a linked web of resources. To do this each resource in the flash application needs it’s own URL even if these all just point to the same SWF. I’ve not seen this done but I’ve got some ideas on how this could be achieved. What I’m thinking is that rather than a Flash app having one end point, eg. flashpaint.com it can have an end point for each document that can be favourited, linked to and all that shit eg: flashpaint.com/pictures/dans-bum. If we architected an application like this it would be easy to use the end point to provide different formats eg. flashpaint.com/pictures/dans-bum.svg etc.

The bad programming environment problem is solved for us. Flex 2 is all text based and although a bit XMLy for my liking isn’t bad. You can even get a Textmate bundle for it. Most importantly you can lob it all in version control. Better. Accessibility has also been greatly improved of late, I don’t yet know the details, but I do know it’s no longer a black box.

The interface to JavaScript has been improved too with the Flash/Ajax bridge (stupid name aside) but I think this can be improved further. It’s all a bit heavy on code and complex but sure it can be streamlined some. Unfortunately though, ActionScript continues it’s journey away from the land of dynamism but on the upside you do get E4X and all kinds of other nice stuff and we can’t do much about it. Even JS 2 is going this way.

Then finally, there’s the whole open source thing. Where do we start? I’ll start by saying that I’m not a religious person neither spirtually or technically. I’m a pragmatist and while I normally work in open source with its many benefits I can take a bit of proprietary action if need be. I’ve heard many members of the web standards and ajax communities basically strike Flash off on this point alone which to me is just insane. It may be proprietary but it’s got a great community around it (and a great OS community for that matter) so that works for me. No, it’s not a standard, but really, what have standards done for us anyway? The power of the ‘web standards’ movement was, in my opinion, more about moving back to semantic HTML and the separation of content and presentation rather than about valid code and standards anyway. I say drop your prayer book and use the best tool for the job.

So yeah, I’ll be looking in to Flash and Flex then. I might even write about it. But then it seems other people already are which is cool. So what do y’all reckon? Am I barking up the wrong tree?

PS. That comment about Static typing was totally unqualified and slightly stupid statement. I like it though. It’s the kind of thing you’ll catch me saying after 5 pints at Pub Standards.