Dave Johnson

January 15th, 2007

It has been a very long weekend but I think we will manage to get something out the door later today! It will likely include fairly basic documentation, as well as a single sample for the Fisheye menu, Tree, TabStrip and the Framework, and of course the code itself. We didn’t quite manage to get the docs all dialed (that one was my fault) but there are a few things that I am pretty excited about.

• The first thing is that we finally have a cross platform installer - w00t!
• The second thing is that the Framework is pretty awesome - and by awesome I mean, like, totally sweet. There should be at least one sample with some nice stuff particularly to do with making your own widgets using a declarative approach and all the goodness that comes along with that.
• Finally, I am stoked on the fact that for the enterprise customers we will be providing much better code management tools - i.e. build, compression, deployment type stuff.

I will be getting some of the exclusive alpha stuff up on the blog over the coming week, hopefully even some screencasts or video.

I know that some of these things have been a while coming but everyone is working extra hard to get this stuff out there and we are hoping to see a good discussion going on over on the alpha release mailing list!

Posted in AJAX, JavaScript, Nitobi | No Comments »

December 12th, 2006

It has been a while since any serious blogging has taken place but I think that I should get some in over the upcoming holidays. Also, we have been very busy getting the final touches on Enterprise Ajax and getting started on new development plans.

As some will know from listening to the Nitobi podcast, we are currently building some new components such as a Tab, Tree and a Date Picker. For the start they will be fairly standard Ajax components but we have some cool new ideas for old patterns that should make some waves in the Ajax user-interface space.

At any rate, one of the first parts of our yet to be named Ajax user interface suite is going to be the Framework. The Framework is going to be where all the nuts and bolts are located that allow developers to build their own Ajax solutions using both our basic cross browser libraries as well as our component architecture.

For the most part, the Framework will have some important features such as:

• XMLHttpRequest (Throttling, polling, timeout, events etc)
• DOM Events
• JavaScript Events (MVC)
• DataSet / DataTable (ActiveRecord)
• Object Serialization (XML and JSON)
• Declaration Parsing
• Back Button History
• OOP Inheritance, Interfaces and Garbage Collection
• Effects
• Drag + Drop
• Cross Browser HTML and DOM
• Cross Browser CSS
• Cross Browser XML

While many are similar to those things found in other frameworks out there (like the DOM events), we are keen to hear both what people think is lacking in other frameworks and what is a must have.

I am most excited about the serialization and declartive component stuff myself. It should really help developers build their own declarative components really easily.

One final note is that the Framework will be included in the suite but other than that we are not too sure what to do. Any ideas or comments on if, when, and how we might open source the Framework code would be more than welcome!

Oh crap, one more thing. What is important to people for a cross browser XHR object? What’s missing? I think that comet, throttling, timeouts and better events are a good start but what do you think? As the pipe gets bigger and more action is happening on the client we are thinking a lot about how the data is flowing from the server and how it gets handled by the client.

Posted in Uncategorized, Energy, Web2.0, JavaScript, XML, Patterns, Copyright, Conference | No Comments »

November 28th, 2006

After a bit of a hiatus we finally got back to recording some podcast action. We talked about frew things like the upcoming Nitobi rich UI AJAX suite and much more!

I also may have gone on a rant about something or other …

Posted in Web, AJAX, JavaScript, Podcast, Nitobi, RIA | 1 Comment »

October 7th, 2006

Here are the slides from my testing and debugging talk at AjaxWorld.

I had a great time down in Santa Clara despite the high number of marketing presentations compared to good Ajax technical talk. Still, I got to meet a lot of new people. w00t.

Anyhow, hopefully doing a podcast this afternoon so we will discuss all the happenings there!

technorati tags:ajax, javascript, conference, testing, debugging, ajaxworld

Posted in AJAX, JavaScript, Conference, Debugging, Testing | 1 Comment »

October 3rd, 2006

Andre and I made it safe and sound down to Santa Clara for AjaxWorld. If you are in the neighbourhood give us a shout!

Posted in Web, Web2.0, AJAX, JavaScript, Conference | No Comments »

September 7th, 2006

Ok, I have been a little busy lately (well really busy) but this post has been in the works for a few weeks now so I just want to get it out.

First off, of the half dozen or so requirements that Dean Edwards puts on his Base.js implementation I admittedly only agree with two of them - and you should see why at the end of this post. Those two are:

I want to avoid calling a class’ constructor function during the prototyping phase
I want to achieve the above without affecting Object.prototype

Those are by far the most important points - particular number one since when dealing with the DOM / UI we don’t want things to happen pre-maturely.

Anyway, the reason for this post is actually due to a recent post on Ajaxian about JavaScript inheritance that was interesting to say the least. It reviewed a few different techniques of performing classical inheritance in the prototype base language that is JavaScript. It reviewed simple inheritance using the syntax like

where super methods can be called using global references to the BaseClass from the SubClass and call or apply such as

The author also looked at the more advanced technique from Douglas Crockford and finally showed his preferred method.

There are a few points that I would like to add to the discussion. First of all, the authour suggests staying away from syntax such as

due to the fact that it can cause “SEVERE” memory leaks in Internet Explorer. Closures - which is what is used here - are one of the most useful features of JavaScript and should not be avoided but instead embraced. Indeed, if you lose references to DOM elements in your closures without removing them you can get memory leaks. Whether or not the leak is severe depends on how much memory is taken up by your DOM references of course. Just because something is dangerous does not mean it should be avoided - I am not going to stop drinking scotch any time soon

I also thought that the example he gave to show how the Crockford method is broken was a bit strange. Admittedly, it does seem that the alert from the Crockford method is not correct being (2-1-1), however, I don’t think that the alert from the authors code is correct either. The numbers I would expect to see would be (2-2-1). In fact, with no polymorphism, overrides or other method metadata, who is to really say how it should work?

There were also two very important inheritance techniques that I thought should have certainly been mentioned. One important technique is that developed by Dean Edwards, which _very_ nicely emulates the usage of the super keyword in Java (although he uses base since super is reserved) to provide access to the BaseClass. If you are interested in the Dean Edwards code go check out his blog. The other is the use of global references that refer not to the BaseClass, as the authour showed in his article, but instead to the SubClass; thus, we avoid any problems one may have with making explicit references to the BaseClass within the SubClass code. We can define a global function that extends a SubClass that looks something like this:

This is similar to the method over on Kevlindev. Btw, discussion about all of these techniques can be found before the Crockford technique when Googling for “JavaScript inheritance”. I digress. We have also added the prototype chain support for the

Methods in the BaseClass are then called like this:

Not only is this, IMHO, a clearer syntax than something more esoteric like “arguments.callee.$” but it also has the added advantage of being faster - as I will show in a moment - than something more complicated like being able to use the word “base” directly. Furthermore, by using the Prototype library syntax for defining functions where the prototype of an object is set to an inline object itself such as:

it makes it much more difficult to document using tools such as JSDoc. I always find myself missing commas too! Personally, I find the Prototype syntax much more unfriendly, although it is slightly more terse.

As for the performance, just to give an idea of how the different techniques fair I made a simple animal inheritance chain and checked that the inheritance works properly using each method and then measured 1000 class definitions and instantiations with a call to the super / base in the constructors. It was some nonsense like this:

Here is what I found for performance using various techniques:

Internet Explorer

Firefox

I was pretty surprised at the horrible performance of the Edwards base.js in Firefox! At any rate, something to consider for those that do things because they want JavaScript to be more like Java

technorati tags:ajax, javascript, performance, benchmark, inheritance, oop

Posted in Web, AJAX, JavaScript, Performance, Benchmark, OOP | 9 Comments »

September 1st, 2006

Just what everyone has been waiting for - no not the release of Snakes on a Plane - Nitobi podcast #12! Since we have been so busy, we had to skip last weeks episode but we won’t let it happen again. We talked about a few things such as the fun time we had at BarCamp Vancouver, various online apps, and my latest antics with finding food in dumpsters. Get it while it’s hot!

If you haven’t already, then pick up the feed here.

Oh yeah, and thanks for the props on the music Michael - I had to push hard to make that happen

Posted in Web2.0, AJAX, JavaScript, Podcast | No Comments »

August 14th, 2006

Ajax components are not only cool but actually quite useful - and I am not just saying that as a component vendor but as a web application developer. At nitobi we do both consulting and component development and when doing consulting we shy away from actually changing the component source code to do things that we need and instead focus on extending core components.

Since JavaScript is a dynamic language, one can really easily extend functionality. Most notably, many will have at least heard of aspect oriented programming which is the idea of adding before, after, or around advice - which just means running some code before, after or around some predefined method.

Let’s take a look at a quick example. As many already know, classes in JavaScript are defined as functions.

// Define the Dog class
function Dog()
{
    this.breed = ‘berner’;
}
// Define the speak method on the Dog class
Dog.prototype.speak = function()
{
    alert(’w00f’);
}

That defines a Dog class that has a public property for the dog breed and a public method to make that pooch sing.

So let’s pretend that I am an Ajax component vendor (who knew) and to make my JavaScript load faster I might go ahead and remove the white-space, remove comments, and even replace long variable names with shorter ones. This all happens when I “compile” my JavaScript on my server before I let people access it.

If this were a compiled DLL say, then it would be more problematic to do something like change what the dog says based on the breed of the dog - particularly if this has to be done at runtime rather than compile time. Luckily for us AJAX developers, JavaScript is very flexible

The first thing that we can do is create a new instance of our Dog class and actually replace the speak method with something completely different.

// Create a new instance of a Dog
var berner = new Dog();
// Re-define the speak method for this instance only
berner.speak = function() {
  alert(’I am a Bernese Mountain Dog’);
}

If we wanted to change every new instance of the Dog class we can also change the actual class definition by changing the prototype property just as the original author did.

// Re-define the speak method for the class
Dog.prototype.speak = function()
{
  alert(’I am a ‘ + this.breed);
}

Alternatively, we can also add code that will run before or after the speak function. We can define a static function called attachAfter in the aspect namespace that will take an object to which some method belongs (sourceContext), a string that is the name of a method on that object (sourceMethod), and a reference to function object that we want to call after the source method is called (aspectMethod). aspect.attachAfter is pretty simple and looks something like this:

aspect.attachAfter = function(sourceContext, sourceMethod, aspectMethod)
{
    var oldMethod = sourceContext[sourceMethod];
    sourceContext[sourceMethod] = function()
    {
        oldMethod.apply(sourceContext, arguments);
        aspectMethod.apply(sourceContext, arguments);
    }
}

We use the JavaScript apply method here such that we can pass the arguments list that the method is to be called with. To actually use this with our Dog class we could either augment the instance of the class or even the class itself. Here is an example of attaching some function that will alert the breed property of the dog after the dog speaks.

var berner = new Dog();
// This will just alert ‘w00f’ as we expect
berner.speak();
// Now attach an after function to the speak method
aspect.attachAfter(berner, “speak”, function(){alert(’I am a ‘+this.breed)});
// This will now alert ‘w00f’ and then ‘berner’
berner.speak();

Notice that we can even execute the after function in the context of the berner object and therefore we have access to the this keyword in our attached function.

I am going to look at more JavaScript features in the coming weeks including inheritance and dynamic XML parsing. If anyone sees any problems here let me know!

Technorati Tags: ajax, components, javascript, patterns, architecture

Posted in AJAX, JavaScript, Architecture, Components | 4 Comments »

July 21st, 2006

WebVisions is starting to wind down now. It has been a real whirl wind from the six hour drive in the middle of the night to last nights debauchery! Oh yeah there were some good presentations too

It was good to finally meet a few people like Bill and Nate from over at Yahoo! - although Bill’s presentation was highly over-subscribed and I could not get in. Not to mention all the people that stopped by the booth.

It may not be that useful without the speaking, but here are the slides from my talk.

Posted in Web2.0, AJAX, JavaScript | 1 Comment »

May 24th, 2006

Well, Captain AJAX and I finally got around to making our first podcast! It is a bit long and the audio sucks but we will be sure to get that fixed for next time . Anyhow, Dre and I just talked about everything that happened in the past coupld weeks including Dre’s findings down at JavaOne, The AJAX Experience, DCamp and NetBeans Day.

We also talked about the launch of Nitobi Grid V3…and what's to come down the road - WARNING - could be considered shameless self promotion but we also talk about some AJAX technology stuff

Here is the podcast care of Audioblo. If anyone has any tips about posting and or making the old podcasts then let us know!

Technorati Tags: ajax podcast javaone ajaxexperience

Posted in Web2.0, AJAX, JavaScript, XML, Architecture, Business, Flex, Declarative Programming, Components | No Comments »