scriptNode

Say you've got a fancy user interface. You're leveraging AJAX well, you're making good use of best practices, and you've got fast servers that respond quickly. But your user actions still aren't quite as fast as you'd like. What else can you do?

If you've done things correctly, you've got a user interface that reacts positively to successful flows, but will also handle errors gracefully. Even though you're "doing it right," consider restructuring your application: assume success. Normally, your server is up and running and operations will be completely successfully. The edge case (hopefully) is the error case. Assuming this, we can create a slightly faster user interface.

Let's begin with a basic voting mechanism. You've got a control on your page that lets a user vote on an object, and a small bit of text to represent the state of said control. It may look something like this:

This example is meant to be easy and functional; hopefully your controls are prettier. Regardless, here's a common flow for this request and its callback states:

1. Listen for the click event on the control.
2. Send the request.
3. Display a "loading" message or a typical spinner image.
4. If the call comes back successfully, provide "success" feedback to the user and update the control.
5. If the call throws an error, provide an error message.

This flow is extremely common in today's web. But we want something more immediately responsive, so let's restructure the flow:

1. Use onmousedown because it will fire off just slightly sooner than onclick would. (This might not suit all user interfaces but in this case it's fine, and it wins us a few milliseconds.)
2. Provide "success" feedback to the user and update the control.
3. Send the request.
4. If the call throws an error, reset the controls and provide an error message.

This structure might seem a little off. Indeed, the error case even "lies" to the user for a few milliseconds if the request fails. But it covers all of its bases; none of the previous flow is omitted. Keep in mind that the error case is the edge case, and a very large majority of the time it's fine to assume success at first.

Using jQuery, here's what the code might look like:

// Attach the mousedown event listener $('#snappier-1-btn').mousedown(function(e) { var el = $(this); // Go ahead and assume things went smoothly el.attr('disabled', true); el.next().html('Voted!'); // Send the XHR $.ajax({ error : function() { // Undo the success message and allow the user to repeat el.attr('disabled', false); el.next().html("You haven't voted yet"); // Let the user know what happened alert("Sorry, an error occurred! Please try again."); }, type : 'GET', url : '/feed/' }); });

And here's this flow working right here on the page:

It's pretty widely known in the web development industry that server-side scripting is important, and PHP is an extremely common choice. Indeed, for many programmers it's even their first language. It's quite common for web devs to begin on the server, then later require some client-side interaction, at which point they must turn to JavaScript.

I often see questions similar to, "I've got these few lines of PHP code, how would I do this in JavaScript?" I've actually already answered a question like this, but I kept getting more questions, so I thought I'd cover many at once:

• Pushing to an array
• die() or exit
• include or require
• Redirection
• Static classes
• String manipulation

Pushing to an array

Pushing a new value to the end of an array is a common, trivial task. Here's some PHP to accomplish this:

$my_array = array(); $my_array[] = 'a'; array_push($my_array, 'b');

Also note this quick pointer from php.net's array_push() documentation:

If you use array_push() to add one element to the array it's better to use $array[] = because in that way there is no overhead of calling a function.

This isn't the case in JavaScript. The native Array.push method is most optimal:

var myArray = []; myArray.push('a'); // This is the way to go myArray[myArray.length] = 'b'; // This method is possible but bad

die() or exit

There has been much confusion regarding what JavaScript is and how it works in the browser. When looking for an equivalent to exit, one probably doesn't understand that client-side JavaScript is a behavioral language that's intended to react to events. In PHP, a script executes, stopping only when told to do so, and then it's done. JavaScript lives and breathes on the page, reacting to the mouse being moved, keys being pressed and even time changing.

So it's important to understand why this is not a fair equivalent, and that even asking for one shows a misunderstanding. That said, a bit of procedural JavaScript can be exited by using an anonymous function. Here's some example PHP and then similar code in JavaScript:

if ($next_action == 'exit') { exit; } echo 'Made it here!'; (function() { if (nextAction == 'exit') { return; } alert('Made it here!'); })();

While the language behavior is not one-to-one, taking advantage of JavaScript's closure already has advantages, among them being able to easily exit a function via return.

include or require

There have been some arguments about this equivalence in JavaScript. Just like the previous example, this equivalence is not one-to-one and should be thought about in very different terms. That said, here is a quick example of including a PHP file within a PHP script:

// Nothing to it, just include the file: include('my_file.php'); // This code will only execute after my_file.php has been included: echo 'File included!';

To include an external script in JavaScript, writing a method or including a library is definitely best. I wrote about this once, but there are libraries such as YUI that have better support with more options. Here's what this would look like using YUI:

// Call YUI's method var objTransaction = YAHOO.util.Get.script("http://example.com/my_file.js", { // This function will only fire after my-file.js has been included: onSuccess : function() { alert("File included!"); } });

Redirection

This one is easy and straightforward. A redirect is accomplished with PHP's header() function:

header('Location: http://example.com'); exit; // Not necessary but a good practice

Also very simple in JavaScript:

location.href = 'http://example.com';

Static classes

In PHP, it's a pretty common programming pattern to use a static class for encapsulation, sort of namespacing some methods and properties. Here's an example:

class Tools { public static function check_stuff() { return true; } } echo Tools::check_stuff();

For this JavaScript equivalence, it probably makes the most sense to use an object literal:

Tools = { checkStuff : function() { return true; } }; alert(Tools.checkStuff());

String manipulation

String manipulation is absolutely mandatory in most applications. Fortunately, it's a breeze thanks to PHP's fantastic string functions:

// Replace portions within a string echo str_replace('Hey', 'Hi', 'Hey there'); // outputs "Hi there" // Capitalization echo strtolower('Hey there'); // outputs "hey there" echo strtoupper('Hey there'); // outputs "HEY THERE" // Get a portion of a string echo substr('Hey there', 0, 2); // outputs "He" // Get rid of extraneous whitespace echo trim('     Hey there     '); // outputs "Hey there"

Each of these have perfect equivalents except for trim(), which we need to implement ourselves:

// Replace portions within a string alert('Hey there'.replace('Hey', 'Hi')); // outputs "Hi there" // Capitalization alert('Hey there'.toLowerCase()); // outputs "hey there" alert('Hey there'.toUpperCase()); // outputs "HEY THERE" // Get a portion of a string alert('Hey there'.substr(0, 2)); // outputs "He" // Get rid of extraneous whitespace trim = function(txt) { return txt.replace(/^\s+|\s+$/g, ''); }; alert(trim('     Hey there     ')); // outputs "Hey there"

Or, we can augment the String global so that strings will have this method natively:

String.prototype.trim = function() { return this.replace(/^\s+|\s+$/g, ''); }; // Get rid of extraneous whitespace alert('     Hey there     '.trim()); // outputs "Hey there"

While not all of these equivalents are smooth (or even recommended), it's typically helpful when learning a new language to have it compared to a language one is already familiar with. If you can think of any other common PHP tasks that have relatively similar equivalents in JavaScript, please let me know in the comments.

After much debate, the minds behind PHP have made an important decision. The good news is, PHP will support namespaces. The (arguably) bad news is, the namespace separator will be the backslash character.

Here's a simple example of what this will look like:

$object_instance = new My\PEAR\Module('myvar');

PHP 5 already already has its criticisms. The developers looked at many different options, including **, ^^, %%, :>, :) and :::, but eventually decided on \, which is an odd decision, given that it doesn't remotely resemble its cousins. In fact, it most closely resembles directories in MS-DOS or other Windows features.

The argument was also made that current operators such as :: or -> could have been used, but they already had other duties. The argument doesn't go far, however, because PHP of course uses the backslash character for escaping.