Archive for the 'Javascript' Category

I just spent a little bit of time figuring out how to get Socket.IO to run on a Windows Node.JS setup. The best line in Ryan Dahl’s intro to Node.JS video is:

Windows is very important. Just like php

The package manager for Node.JS NPM (in Windows) is currently in development. Until that gets released, getting Socket.IO to run on Windows takes a little downloading, copy and pasting (basically copying the folder structure in Linux). First download the source for socket.io, socket.io.client and uglifyjs. Then in the same folder were node.exe exists create the following folder structure:

node_modules
   -socket.io (extract download here)
     - node_modules
       - socket.io.client (extract download here)
          - node_modules
             - uglify-js (extract download here)

That’s it, follow the instructions on the socket.io website and all should work.

I’m giving a tech talk today at work on a JavaScript Toolkit called Dojo. I made the slides based off of the dojo.book documentation. I uploaded the slides to Zoho, you can see them below. Hit the button in the bottom corner to maximize the presentation.

I’m blown away at how “right” Yahoo is doing it. All too often I see corporation doing Open Source, but releasing some early, un-commented, buggy piece of crap to the public, while keeping the corporate version under wraps. Yahoo released their next version of the YUI Library the other day, this says it all:

YUI was released internally at Yahoo! about six months before it was released for public use under a BSD license in February 2006. Although the internal and external versions of the library were identical, the way we built and distributed them was different and we managed those differences with separate versioning tracks. Today we’re merging the internal and external project versioning and reaffirming that the YUI you can download here is exactly the same YUI Library used all across Yahoo!. Hence, we’re retiring the old public version series (which had reached 0.12.2) and we’re unifying the versioning of this release at v2.2.0.

Aside from the YUI Library and Patterns, theirs great video tutorials from industry folks (YUI Theater), including a total of 10 videos by Douglas Crockford covering all aspects of JavaScript.

YUI Blog
YUI Library
YUI Design Patterns
YUI Theater

The other day I wanted to plot multiple points on a map and have them pivot around a center. Above that, I wanted the distance from a specified center. I quickly looked around, couldn’t find one, so I hacked one together using the Google Maps API. An hour later, I had a simple app I’m calling Pivot (cause that’s what it does). The only thing that took a while was realizing the Maps API had an approximate distance calculator built in – it works well for short distances.

The Google Group for Maps is great, lots of information and the API docs are detailed.

Below is a screen shot. If you need it, give it a shot.

CASCON was running this week from Monday to Thursday. I didn’t realize this was a free conference for everyone, including people outside IBM. I saw a bunch of professors from McMaster also, some were giving talks.

I went to the Ruby on Rails workshop and it was going OK until one of the presenters starting comparing Ruby on Rails (RoR) to PHP. People need to get something straight: Ruby is the programming language and Rails is a framework. Comparing RoR to PHP isn’t fair, since PHP is the programming language with no framework. If you’re going to compare them, make sure your using some type of template engine like Smarty, etc.

Tuesday, Wednesday and Thursday I had a display at the Technology Showcase from 11:30am to 1:30pm, presenting WDSC and JWL. The experience was good, I met a lot of great people really interested in AJAX and JSF.

Doug Crockford is a smart guy, he’s a JavaScript guru and the creator of JSON. Earlier this year he wrote a paper describing JSONRequest, here’s the abstract:

XMLHttpRequest has a security model which is inadequate for supporting the next generation of web applications. JSONRequest is proposed as a new browser service that allows for two-way data exchange with any JSON data server without exposing users or organization to harm. It exchanges data between scripts on pages with JSON servers in the web. It is hoped that browser makers will build this feature into their products in order to enable the next advance in web application development.

It’s a good read and not a bad idea (though received a lot of criticism). There has also been heavy discussion about this on the Dojo mailing list. Doug’s personal website is filled with great JavaScript articles and resources – especially this article on objects in JavaScript.

I read Chapter 5 of Roy Fielding’s dissertation, which introduced REST or Representational State Transfer. REST is a lot like the Relational Database, conceptually its easy, but has the potential to revolutionize how we do certain things.

Update (Nov. 18 2006): I’ll try and do this weekly, but no guarantees.

Last thing I want to do is write another AJAX framework, but it seems that’s the only way to fully understand large-scale AJAX development. We’ll see what happens — I’ve spent a lot of time looking into Object Notations (ON) (JSON, YAML, etc.) this past week, weighing out trade-offs between run-time extensions to server side scripts. I’ve been getting a lot of people asking for another AJAX tutorial to continue from the original — I’ll try and write something soon.

This past Tuesday, I sat in on the 3rd and final Technology Showcase my 2nd line manager had organized. This one in particular was on C, C++, and Fortran Compilers. A lot of cool stuff in the works, we even got a demo (video) of the PS3 in action.

Motivated by Ryan’s idea of KeyboardCast, I made a couple suggestions to the Target Management (Remote Systems Explorer) subproject in Eclipse, about being able to execute a single shell command on multiple servers (or targets). After some discussions, agreeing to help out in specs/code/discussions, I got sucked into testing for their 1.0 release! Ah, it was ok, I had a small commitment of 2 hours.

I finally submitted my 2nd application for a patent @ IBM. Considering the backlog at the US patent office is something ridiculous like 2+ years — I have a while to wait. The patent is for a revolutionary new type of XML Parser that a manager and I came up with — that’s all I can say about it now.

Next week is the CASCON conference. Aside from the keynotes and walk-in talks, I’ve signed up for 3 workshops:

• Hands-on: Building a Ruby on Rails application with DB2 Express-C 9
• Social Computing: Best Practices
• Social Computing: How the Social Web (R)evolution is Changing the Business Landscape

I’ll also be holding a Technology Showcase @ CASCON on WDSC & JWL Tuesday, Wednesday and Thursday from 11:30am till 1:30pm:

WDSC JWL 3.0 in Action
This exhibit will demonstrate the rich JSF/JavaScript-based widget library JWL. Currently in the finishing stages of development, JWL will revolutionize the way users interact with applications. Widgets/abilities include full AJAX support, key press bindings, calendars, panel dialogs, panel menus, context assist, converters, and much more.

I fallen off my great quest to become an expert at object oriented design patterns — I seriously have to spend some this weekend.

There is no doubt that AJAX is a brilliant idea, which has pushed web development to a new level. That said, the framework has many limitations, and a lot of big time names in the open source industry (Alex Russel being one of them) have taken notice. People that don’t understand Comet call it “disgruntled AJAX developers who went off on their own”. The reality is, that a server-side event driven model for web development is needed. The catch? A long-lived static connection from the client-side (browser) to the server is needed. For example, this event driven server-side model, means that the server can now tell the client to refresh a panel on demand (without the client making a request).

On Sunday, the Dojo Foundation announced Cometd as a new Dojo project.

Cometd is a scalable HTTP-based event routing bus that uses a push technology pattern known as Comet.

Update (Aug. 17 2006): The more I use Dojo, the more impressed I am with what is being done. The entire project has so much attention to detail. I just spent a little while looking at dojo.io.* and am blown away at this easy to use, transparent approach to AJAX.

That’s a powerful title, will it come true? Who knows. At this moment and time, at version 0.3, Dojo is insanely impressive.
So the first question that most people will have is: What is Dojo?

Dojo is the Open Source Javascript toolkit that makes professional web development better, easier, and faster

A little more detail:

Dojo is an Open Source DHTML toolkit written in JavaScript. It builds on several contributed code bases (nWidgets, Burstlib, f(m)), which is why we refer to it sometimes as a “unified” toolkit. Dojo aims to solve some long-standing historical problems with DHTML which prevented mass adoption of dynamic web application development.

Dojo allows you to easily build dynamic capabilities into web pages and any other environment that supports JavaScript sanely. You can use the components that Dojo provides to make your web sites more useable, responsive, and functional. With Dojo you can build degradeable user interfaces more easily, prototype interactive widgets quickly, and animate transitions. You can use the lower-level APIs and compatibility layers from Dojo to write portable JavaScript and simplify complex scripts. Dojo’s event system, I/O APIs, and generic language enhancement form the basis of a powerful programming environment

I hear people say “Dojo, that’s the AJAX framework”. Sure, Dojo is about asynchronous interaction, but that’s only a part of the story. The problem with JavaScript is that it blew up way too fast. It’s a powerful programming language, but lacks the subtleties, which would make it easy to develop large-scale JavaScript applications. I doubt in the mid 90s Netscape envisioned JavaScript the way its used today. In 2002, Doug Crockford got fed up and made JSLint:

When C was a young programming language, there were several common programming errors that were not caught by the primitive compilers, so an accessory program called lint was developed which would scan a source file, looking for problems. As the language matured, the definition of the language was strengthened to eliminate some insecurities, and compilers got better at issuing warnings. lint is no longer needed.

JavaScript is a young language. It was originally intended to do small tasks in webpages, tasks for which Java was too heavy and clumsy. But JavaScript is a very capable language, and it is now being used in larger projects. Many of the features that were intended to make the language easy to use are troublesome for larger projects. A lint for JavaScript is needed: JSLint, a JavaScript syntax checker and validator.

The good folks at Dojo have taken this a massive step further, put very gently:

dojo.lang.* contains wrappers for common idioms. It doesn’t provide replacements for language constructs. We only provide functions that provide value-added above the standard javascript routines, or functions that mask browser incompatibilites, etc.

The reality is, an amazing, transparent, useful framework has been (is being) developed, which will give the Web developer power they’ve only dreamt of. Were talking proper class constructs, inheritance, the ability to override methods, and much more.

In total there is the Dojo Infrastructure (fundamental behaviors), General purpose libraries (String manip., DOM manip., etc…), Data Structures (Dictionary, ArrayList, Queue, etc..), Web I/O (RPC, JSON, etc.), Visual Web (animations, graphics, etc.), Math and Cryptogrpahy (speaks for itself.. clientside Crypto, like Meebo) and a great Widget library.

What kind of widgets are we looking at? Here is a taste of what you can expect:

FisheyeList – hover over the menu at the top…
Popup Dialogs – click the links on the top left…
Floating Pane – drag them, close them.. the world is your oyster
Inline Edit Box – just like Flikr, click the title and text…

All this, and their only in version 0.3. Give it a try: dojotoolkit.com — be warned documentation to the specifics of the API is sparse.

It blows my mind how crazy some people are for AJAX these days. It’s consistently one of Technorati’s most search terms, and even the Ajax page for Wikipedia has the following:

This article or section has or is prone to spam, that is, HTML links added only to promote a site or product.
Following Wikipedia:External links, please help Wikipedia by removing any commercial links on sight. Please retain this notice if necessary, and report rampant spamming as per instructions at Wikipedia:Spam.

The word/term Ajax could be used for a lot of thing: a marketed cleaning product, a city, a web paradigm.. I wonder how long it will take, till the general public hears the word Ajax and thinks of the web instead of a cleaning product? Probably never, in any case: some people love Web 2.0, some people hate it.

Here is a quick overview and example of AJAX in action. Before you begin, this example will only work in FireFox work in FireFox and IE7. You’ll have to change few things in the JavaScript for it to work in IE6. To download the files used below click here. If you don’t have PHP/Apache installed, follow the tutorial I made to install it. The example below assumes you know the basics of PHP, you can learn as you go along if you don’t. A good reference is the base PHP website.

AJAX stands for Asynchronous JavaScript and XML. Conventional web application trasmit information to and from the sever using synchronous requests. This means you fill out a form, hit submit, and get directed to a new page with new information from the server. With AJAX when submit is pressed, JavaScript will make a request to the server, interpret the results and update the current screen. In the purest sense, the user would never know that anything was even transmitted to the server.

A classic example of AJAX is Google Maps. If you havent noticed, with Google Maps you have the ability to click and drag the map. If you drag the map fast enough, you would see the new regions of the map loading in real-time. This is accomplished using AJAX.

If you click here, you’ll see a simple example of AJAX. The example performs the multiplication of two numbers. The top form performs the calculation using AJAX, while the bottom form uses standard techniques.

The Javascript that makes the example work is below. Basically an XMLHttpRequest is used to communicate with the server. Though the name may make you think you need to trasmit XML, it is not necessary (my example doesn’t). So when the function ajax_call() is executed, the already instantiated XMLHttpRequest attemps to open ajaxWork.php (with some parameters). Upon returning from the request (and assuming it was successful) the results are populated into the results input box.

var xmlhttp=false;

if (!xmlhttp && typeof XMLHttpRequest!='undefined')  {
     xmlhttp = new XMLHttpRequest();
}

function ajax_call() {
     xmlhttp.open("GET", 'ajaxWork.php?num1=' +
           document.getElementById('num1').value +
                '&num2=' + document.getElementById('num2').value , true);

     xmlhttp.onreadystatechange=function() {
           if (xmlhttp.readyState==4) {
                 document.getElementById('result').value = xmlhttp.responseText;
           }
     }

xmlhttp.send(null)
return false;
}

Below is ajaxWork.php which is used in the Javascript above. The code below uses a PHP class called ajax that I defined in ajaxClass.php. The code creates a new instance of the class ajax, reads the parameters from the URL, performs the multiplication, and outputs the result. The results are outputed so that from the response of the XMLHttpRequest, the Javascript can update the example.

<?php

include("ajaxClass.php");

$objSem = new ajax;
$objSem->readURLParameters();
$objSem->staticExample();

echo $objSem->result;
?>

Below is the ajax class used in the PHP code above. This class is used firstly to read the parameters from the URL (via readURLParameters()) and then to perform the multiplication (via staticExample()) .

<?php

class ajax {

	var $queryParam = array();
	var $result = 0;
	var $num1 = 0;
	var $num2 = 0;

	function readURLParameters() {
		$qstr = explode("&", $_SERVER['QUERY_STRING']);
		foreach ($qstr as $value) {
			$paramVal = explode("=",$value);
			if (array_key_exists(1,$paramVal)) {
				$this->queryParam[$paramVal[0]] = $paramVal[1];
			}
		}
	}

	function staticExample() {
		if (array_key_exists("num1",$this->queryParam) & array_key_exists("num2",$this->queryParam)) {
			$this->result = $this->queryParam["num1"] * $this->queryParam["num2"];
			$this->num1 = $this->queryParam["num1"];
			$this->num2 = $this->queryParam["num2"];
		}
	}

}
?>

The HTML is even more straightforward (so I won’t bother putting it here). You can download all the files I used here.
Also, be sure to remember the example above will only work in FireFox. To code would be similair to work in IE6, you’d just need to change some of the Javasript. If you have any questions post a comment.

Good luck