Javascript is no stranger to objects. Numbers, Strings, – and not to mention – Arrays and Functions – are all objects. And it’s easy to build our own objects with Javascript.
Why care about working with objects?
Object oriented programming helps keep web page code neatly encapsulated and reusable. You can define a bunch of variables inside an object instead of the ambiguity of exposing variables open in the document and having naming conflicts. Plus encapsulation code makes it easier to read.
There are a couple different approaches to building Javascript objects. Which approach we use largely depends whether the object is one of a kind, or whether there should be multiple instance of a kind of object.
Singleton
First let’s look at the “one of a kind”, or “singleton”, type. It’s a generic Object-type object. It’s easy to make. Just set a variable equal to a set of braces. The show transcript has examples of what I’m talking about.
[sourcecode language='jscript']var myObject = {}; // short form of “ var myObject = new Object();”[/sourcecode]
An object can be made up of properties of any object type. So my dog object has a “ageInDogYears” that’s a number, and a “name” that’s a string, and a “favoriteToys” that’s an array. We add these properties using the property name-colon-value, comma, property name-colon-value format.
[sourcecode language='jscript']var myObject = {width:”1024px”, height:”768px”};[/sourcecode]
As I mentioned, properties can have any type and types not only include Strings and Numbers, but also Functions and Arrays. You can make an array quickly by putting two brackets together, just like you can make an object quickly by putting two curly braces together.
[sourcecode language='jscript']var myObject = {};
var myArray = [];[/sourcecode]
Javascipt Object Notation, or JSON, uses a combination of object and array notation to define data packets sent between a web browser and a server. Here we have an object which contains an array of objects. Each object in the array is like a record of data, or a row in a spreadsheet.
[sourcecode language='jscript']var myObject = { data:[{guid:”month-1”, month:”January”} , {guid:”month-2”, month:”February”}] };
alert(myObject.data[0].month); // “January”[/sourcecode]
Functions are also object types, and as such, can be defined within our objects. So our dog object can bark by adding a “bark” function.
This is how we would add a Function object type property to an object.
[sourcecode language='jscript']var myObject = {
dimensions:[“768px”, “1024px”],
alertDimensions: function () {
alert(“Height=”+dimensions[0]+”, Width=”+dimensions[1]);
}
};
myObject.alertDimensions();[/sourcecode]
Custom Objects
Now let’s look at custom object types. Conceptually, an example of a object type would be “Dog”, and an instance of a “Dog” would be “Rover” and “Spot”. “Rover” and “Spot” are instances of a Dog. Objects are instances of an object type. We use this approach when our objects are not “one-offs”, if we need multiple instances of a type of object,… or we’re dog lovers. We make an object from the object type, and then use it like any other object. To make an object type, just make a function, except inside the function use the “this” keyword before property names.
[sourcecode language='jscript']function Dog (n) {
this.name = n;
}[/sourcecode]
We can define functions for our object types. Remember how are dog learned to bark? Just use the “prototype” keyword after the name of the function, then the function name set equal to a function definition. And remember to use the “this” keyword before the property name.
[sourcecode language='jscript']Dog.prototype.bark = function () {
alert(“Roof! My name is ”+ this.name + “.”);
};[/sourcecode]
Instantiate the object type like any other using the “new” keyword.
var myDog = new Dog(“Spot”);
And to access object type functions, just use the usual method, separating the object name from the function name with a period, with parenthesis after the function name.
[sourcecode language='jscript']myDog.bark();[/sourcecode]
Rich Internet Applications (RIA)
Object oriented client side programming is in heavy use in web 2.0 sites. A page has become an opportunity for RIA’s, or rich internet applications. All different kinds of Javascript objects interact to handle page events, data requests, and user interface animation and rendering.
Various object oriented Javascript methodologies, libraries and frameworks have popped us such as JSON, AJAX, jQuery, Prototype, Scriptaculous, Spry, and SproutCore. These obscure the long standing browser implementation discrepancies that have given client-side programming a bad name. Javascript programmers can focus more on using the libraries and less on browser differences. The show transcript has links to these projects.
SproutCore
The past few weeks a new Javascript framework came to a lot of people’s attention. It’s called Sproutcore. At Apple’s World Wide Developer Conference they presented some of their handywork. Turns out the existing .Mac Web Gallery’s were written with it. Although I hear there have been a bunch of optimizations of it since then. I’m a fan of the .Mac Web Gallery, but it is a little slow. Fortunately they’ve sped some things up for the upcoming MobileMe package that’s going to replace .Mac. Anyway, Sproutcore is really something. A developer with Ruby installed can install the framework with a single line of code on the command line.
sudo gem install sproutcore
That’s it. Installed.
I’ve read a little bit about Ruby on Rails but I haven’t had a chance to use Ruby so I’m still figuring that out. Lucky for people like me, Sproutcore only uses Ruby for building the HTML, Javascript and CSS files for deployment. The server can be anything. Apache with PHP, IIS with .Net, RoR, whatever. Database, doesn’t matter. Ruby and Sproutcore are all about the developer experience, Sproutcore’s final deployment is server agnostic. It’s all just HTML and Javascript and CSS files. Of any server can serve those.
So I’ve been a Javascript guy for quite a while, and I’m all for well done Javascript code. Sproutcore takes it to a whole other level. We’re talking about a framework that makes you use common design patterns like model-view-controller (or MVC). It outputs a browser independent UI with it’s own cool buttons and list views.
In terms of the model layer, it keeps track of the data such that you can imagine being able to build an app that doesn’t need an internet connection. Sure you would at first, but the data is stored locally and the server refreshes it, but it’s not a dumb system that is just the controller. It’s the whole model-view-controller pattern, deployed. The model could be stored someday similar to what Google Gears does where it stores web data locally on your system if you let it.
I’m really fascinated by this project. Check out the people who made it at Sproutit.com. Sproutcore is at Sproutcore.com. Sproutit and Sproutcore were started in order to create a web based email system. Then I guess Apple came and started contributing. Soon it will be open source.
There is a google group at
http://groups.google.com/group/sproutcore
and a wiki where people are posting tutorials.
http://github.com/sproutit/sproutcore/wikis
There is a version control repository in case you feel like lending a hacking hand to the project. The repository also has the samples that you can download with the easy Subversion checkout command.
svn co http://sproutcore.googlecode.com/svn/trunk/samples
On a Mac the code goes into a directory where all the Ruby helper code is there to check out.
/Library/Ruby/Gems/1.8/gems/sproutcore-0.9.11
And you may actually need to get into the source code because there isn’t much in the way of documentation or examples yet. It’s very young, as documentation goes. And it seems people are hungry for tutorials. The Sproutcore folks are posting those as fast as they can. If this project plays it’s cards right, which it seems to have done so far, someone will make some money selling books. I’d buy one. I’m digging like crazy through the code trying to figure out how to make stuff work. And I’m not getting very far. That’s a big part of the reason for the late podcast. I’ve been studying it to say something worthwhile about it.
They’ve posted a “hello world” example and I can get that going – no problem – but I’m a little hung up on getting data back and forth from the server and binding some of the views to my data. Anyway, I’ll figure that out. When I do, you’ll know.
I’ve put a snippet of code taken the “hello world” example and put them in the show transcript at PodTurtle.com. Check it out. Or better, check out Sproutcore.com and help me figure this project out.
# sproutcore hello_world
# cd hello_world
# sc-server
# sc-gen model hello_world/my_model
# sc-gen controller hello_world/my_controller
[Edit english.lproj/body.rhtml]
# sc-build
The command “sproutcore” makes a folder with a bunch of files to start editing. You “cd” in that new project folder and run “sc-server” to fire up the server. At that point just point your browser to
http://localhost:4020/hello_world
and you’re looking at the browser output. Make a change to
english.lproj/body.rhtml
and refresh the browser. You’ll see the change right away. The Ruby commands inside of the RHTML file are only view helpers. They do the work of building the HTML for you.
Technically it’s using Ruby to compile the HTML, but in the end you run the command “sc-build” to covert the RHTML files into HTML files and upload all that output to any server. Again you only need Ruby for building; the final product is just straight HTML which can run on any web server.
Sproutcore is about to go open source, about to go version 1.0. The current version is 0.9.11. So far so good. I’ll be following this and adding it to my arsenal. Very exciting.
Conclusion
So to wrap it up, to make powerful and compatible client side apps somewhat quickly, it is good idea to follow these projects that have gained traction, and become familiar with object oriented Javascript programming. Client side scripting has rich potential for the web developer, so expect future entries along these lines.