The chances are that if you’ve been working with javascript, jquery and AJAX for any time then you’ve inserted snippets or blobs of html into the DOM using something along the lines of:

var data = [...]; // Some array

var html = "<table id='dataTable'>";
html += "<tr><th>First Name</th><th>Last name</th></tr>";

for (var i = 0; i < data.length; i++){
    html += "<tr><td>" + data.firstname + "</td><td>"
          + data.lastname + "</td></tr>";
}

html += "</table>";

$('#myDiv').html(html);

And for small snippets of HTML why not?

The trouble starts when you start inserting larger chunks of html, maybe even the whole page if this one of the increasingly popular Single Page Applications (SPA – an interactive web application with no page reloads). Long strings of html will become very messy very quickly as well as being very difficult to maintain and debug.

Also, you may be inserting HTML which has been generated server side. This solution will help to decouple your client from the server. Get the data via JSON or whatever and then the client deals with the presentation. (You may even want to take this a step further and implement an MVC solution such as backbone.js but that’s a tutorial for another day!)

The solution of course is to use a template – some HTML which can be dynamically updated. The realisation of how useful and necessary this is for client side development has spawned a few new templating solutions: mustache.js, IcanHaz.js as well as the new jQuery templates plugin (jquery-tmpl).

I had a simple task: I wanted to dynamically fill a table as in the example above. I looked at a few of the solutions – in particular the jQuery templates plugin which I found to be easy to use for a basic template but which became increasingly complex with having to compile nested templates, etc. The best solution, I found, was using the templating features of underscore.js which is an extremely useful library. The main feature of the underscore templating solution is that you can create straight HTML (which could be from a separate file, etc.) and then simply insert your dynamic data using native javascript. It’s pretty much the equivalent of inserting data into HTML using PHP tags.

Here’s how to do it:

First lets have some data. An array of customers for example:

var customerList = [
        {
            'firstname': 'Rio',
            'lastname' : 'Ferdinand',
            'email' : 'rio@gmail.com'
        },
        {
            'firstname': 'Paul',
            'lastname' : 'Scholes',
            'email' : 'paul@hotmail.com'
        },
        {
            'firstname': 'Ryan',
            'lastname' : 'Giggs',
            'email' : 'ryan@hotmail.com'
        }
    ]

Next our template. All you need is a container for the HTML. I’m using a script container but you can use anything – a div with display:none; or whatever. The container must have an identifier.

<script id="customerTemplate" type="text/html">

        <table>
            <tr>
                  <th>First name</th>
                  <th>Last name</th>
                  <th>Email</th>
            </tr>
            <% for(var i = 0; i < customerList.length; i++){ %>
            <% var customer = customerList[i]; %>
            <tr>
                 <td><%= customer.firstname %></td>
                 <td><%= customer.lastname %></td>
                 <td><%= customer.email %></td>
            </tr>
            <% } %>
        </table>

    </script>

So how cool is that? It’s just straight HTML with dynamic data inserted via native javascript. The only thing you need to do is to use the < % … %> tags to delimit your javascript and that’s it – no messy {{if}} tags, nested templates or anything like that. Just put in whatever javascript you need!

N.B. To print a value out, note the use of the < %= (with equals sign) as opposed to just <% for the other tags.

Ok it’s all very easy but we’re not done yet. Now we’re going to use underscore.js (if you haven’t explored underscore.js then I highly recommend that you do. It is an improbably useful library)

There are two steps: first we’ll create a template object from the template using underscore. This object can then be used with our data to output our final HTML.

// Use underscore to convert the template to a 'template' object
var customerTemplate = _.template($('#customerTemplate').text());

// Use the template object to output our html
// Note that the customerList name equates to the customerList
// array that is used in the template.
var html = customerTemplate({'customerList' : customerList});
$("#someDiv").html(html);

That’s it! Note you’ll need to include the underscore library!

My client was a corporation (Mettler Toledo Inc.) out of the States. They required a web based display that would be shown on large (60″) displays in the company cafeterias. The purpose was to show general company notices and TV shows to people as they were eating. But also the display was to show slideshows from company managers for training, sales or informational purposes.

There were two sides to the application:

1. A secure interface through which company managers can create multi-media slideshows.
2. The display itself: a web based interface able to display TV, news tickers and company slideshows dynamically. As this would be on permanent display, it was essential that no human interaction was needed and that all aspects of the display could be managed from an administrative interface.

Features

• Create slideshows with text (via WYSIWYG interface), pictures or video. Video can be external, via embedded code or added to a media library on the server itself.
• Slide animation: slide in /out, fading with easing effects via jQuery UI.
• Stand-alone display. There is never any need to interact with the display. The display is managed completely via an administrative interface.
• Dynamic TV display: plays a range of channels via the Justin.tv API.

Technical

• Built using javascript, JQuery, AJAX and PHP / MySQL
• Built using an MVC framework: codeigniter

Recently I was working on a client-side project that sent a parameter to the server via AJAX and received some data back. If you just want a string returned from the server then this is nothing new and easily done with jquery and AJAX (I think there are resouces on the web. I’ll write another tutorial soon.)

But what if you need more than a string to be returned from the server? What if the information you receive back from the server requires an object or you’d like to receive more than one parameter?

jQuery and JSON make this very easy.

First the jQuery. I’m going to use the ‘ajax’ function as you can incorporate a ‘beforeSend’ parameter. This tells your client to expect a JSON response and is necessary to prevent problems with some clients. In theory there’s no reason why you couldn’t use the simpler ‘get’ / ‘post’ or ‘getJSON’ functions but clients can be very finicky with this type of response and I’ve encountered bugs with getJSON in IE (suprise) that were very difficult to debug and were solved with the code below.

For this example I’m going to send a URL to the server and get back some information about that URL. I want two pieces of information back from the server: a boolean true / false and a string with more information regarding this result.

Let’s send a name / value pair to send to the server. You can create a JSON object or just use:

var postData ="domain=techcrunch.com";

So I’m sending a request to the server with name ‘domain’ and value ‘techcrunch.com’ (best I could think of on short notice).

Here is the jQuery to do this:

var postData ="domain=techcrunch.com";

 $.ajax({
    type: "POST",
    dataType: "json",
    data: postData,
    beforeSend: function(x) {
        if(x && x.overrideMimeType) {
            x.overrideMimeType("application/json;charset=UTF-8");
        }
    },
    url: 'testURL.php',
    success: function(data) {
        // 'data' is a JSON object which we can access directly.
        // Evaluate the data.success member and do something appropriate...
        if (data.success == true){
            $('#section1').html(data.message);
        }
        else{
            $('#section2').html(data.message);
        }
    }
});

Obviously we’re sending a POST request to ‘testURL.php’. Note the datatype and beforesend parameters. The ‘beforesend’ function, as mentioned before, is to deal with quirks on some clients. The interesting thing is the ‘data’ object that is returned from the server with two members: success (boolean) and message (string). You can access them directly using data.success and data.message. This is a simple example but you can of course receive just about anything in your JSON object: arrays, strings, booleans; even other objects. [edit: PHP's json_encode() does *not* work well with nested associative arrays. I've found you pretty much have to write your own JSON encoder / decoder for complex arrays].

Ok so this gets sent off to the server where we receive the ‘domain’ as a POST argument. We do our processing and want to send back the result (which needs to be in JSON format). Luckily PHP has a function which makes it very easy to do this: json_encode . Couldn’t be easier: set up an associative array and then call json_encode on it:

// Here's the argument from the client.
$domain = $_POST['domain'];

// Do lots of devilishly clever analysis and processing here...
$success = processDomain($domain);

if ($success == true){

	// Set up associative array
	$data = array('success'=> true,'message'=>'Success message: hooray!');

	// JSON encode and send back to the server
	echo json_encode($data);
}
else{
	// Set up associative array
	$data = array('success'=> false,'message'=>'Failure message: boo!');

	// JSON encode and send back to the server
	echo json_encode($data);
}

That’s it! Easy! Be aware that the formatting of JSON objects can be very strict regarding single / double quotes, etc. You can read more here: json.org

Are you excited about the iPad?

If not, you’ll tell me that it has no camera / USB port / GPS, etc. That it’s just a big (and not very good) iPhone.

How about I tell you that the iPad is a step on the way to fundamentally changing the way we interact with the web, the world and technology? How about I tell you that this is the biggest step forward in user interaction since the introduction of the mouse?

How about I describe the iPad not in terms of its parts but what it is: a netbook, slate, multimedia player, gameboy, iPhone and Wii combined – a device that will influence and fundamentally change the way we interact with technology; that will make clicking on a mouse and typing on a keyboard seem as old fashioned as a telex machine?

Sounds a bit more interesting, hey?

Let’s look at the state of the web and computing. There’s lots going on, to be sure. There’s cloud computing, Google wave (or Buzz now I guess), HTML 5, RIA, Android, Silverlight, etc., etc. As a developer it’s pretty much impossible to keep up with everything that’s going on. Billions of dollars of innovation and (wo)man hours are piled into the web with fantastic new technologies coming along seemingly every week.

But one thing that hasn’t changed since the invention of the mouse and Windows (not by accident by Apple back in 1984) is the way we interact with computers and, by extension, the web. Think about it! 1984! We are still using the exact same tools to interact with a computer as we did 26 years ago!

There are a few examples that I’d like to share to show you my thinking:

One is not particularly new: it’s the iPhone. Hand it to the drunkest, most ham-fisted, technophobic oil-rig worker you can find and they’ll figure it out very quickly. Not only that, but the chances they’ll enjoy figuring it out because it’s easy, quick and fun. You can shake the iPhone, swipe your fingers across the screen, squeeze them together, move them apart and the iPhone does things!

And Apple’s innovation in the way of doing things is not restricted to the iPhone. Pick up an iMac. See how nice it is to swipe and squeeze things with the mousepad?

Ok so let’s see how these kinds of interactions might work with the iPad itself:

I’m not even really a gamer but did you see the way he was controlling the game with the iPad? Tilting it, swiping it, intuitively touching buttons as soon as they come up? Are you not getting excited about this??

The iPad and the (future) web

Ok. One final thing. So the iPad is great and you can bet your life that by Christmas your life will not be worth living unless you’ve got large amounts of money to give the kids to spend at the iPad app store which, by then, will have millions of apps to download. But will it change the way that we interact with the web? (Which, in and of itself, is becoming, well, boring. I say this as a developer and web enthusiast). There are many things to consider when you design a site but one thing is for sure: you’ll have a menu bar, you’ll have buttons, blah, blah, blah. All of the navigational elements on the page have been put there with one goal in mind: to get you to click on them with a mouse. Can you interact with a web page or application in any other way than by clicking on something with a mouse or entering data via the keyboard? Clearly you can’t.

Once again, I believe that the iPad is set to revolutionise that and that is where it’s true genius lies.

Anyway! Onto another very interesting demo. Perhaps the future of the web and almost certainly the future of the web if the iPad has anything to do with it. This is Silverlight whose future is, I think, uncertain at best. But the interesting thing is the way that web applications can be designed to work with swiping, etc.

Swiping, squeezing, scraping, shaking and tilting your device to control your applications on the web…

Surely the best invention since the mouse.

Overview

This was a small project for a painting company in Vancouver, Canada. It’s very simple: the customer chooses how many rooms they’d like painted. They enter the dimensions for each room as well as other options: would they like the ceiling painted, etc. A quote is calculated on the fly (all client-side, no page reloads) and displayed. The client can have the quote emailed to themselves. If they do this the client’s details are, at the same time, entered into a basic CRM system. There is an administrative interface through which the manager can manage settings for the front end (price per sq. ft., etc.) as well as view and manage the status of leads which have come in.

Languages and protocols used

• Object oriented javascript, jquery, PHP / MySQL, AJAX, JSON

Features

• Object oriented javascript
• Inline form validation (checks validity of form responses before form submission (which is by AJAX)).
• Dynamic updating of the quote depending on the options that the customer selects.
• HTML email generation to customer and company management.
• Custom administration interface with basic lead management system.

Overview

My client was a small printing firm in the Vancouver area who wanted to give their customers the ability to design, order and re-order business cards online. In the printing trade this is known as ‘web to print’ and is big surprisingly business (i.e. expensive). So the idea was to create something that was simple, intuitive, easy to use and which streamlined the ordering process. It was one of those projects that you think is going to be easy but that becomes surprisingly complex with the customer requiring different fonts on different parts of the page, different colors for different parts of the page, image resizing (which meant image re-sampling) for logos,  right / center / left justification, ‘bleed’ allowances, shipping cost calculators, etc.

Languages and protocols used

• XHTML / CSS, PHP / MySql. Javascript, jquery, AJAX, JSON. Paypal IPN protocol. MIME

Project Features

• Dynamic business card design with the ability to change the business card text, template, font (per line), font-color (per line) and logo on the fly with no page reloads.
• Seamless ordering process with Paypal IPN (Instant Payment Notification) integration. The order process (database entry, sending of emails, etc. ) is completed dynamically upon notification of payment from Paypal. The system also includes notification authentication as well as payment processing error tracking, notification and logging.
• Object oriented PHP enabling easy re-use and fonfiguration for new templates and designs.
• Email notification of new orders to customer and administrator with the new design as an attachment in MIME format.
• Dynamic pricing and shipping cost calculator based on distance from vendor.
• Lightweight order management and CRM system.
• Administration (pricing, etc.) interface.

Overview

This was a project for a client who bought and sold foreclosed properties in Las Vegas. In the summer of 2009 there were a huge number of properties coming onto the market (about 2,000 – 3,000 day) and my client was searching through them every night with printed spreadsheets and a pencil. So there was an obvious need to:

• Collect property listings from various sources and consolidate information about those properties into one database.
• Collect information concerning those properties from other sources (primarily by means of API calls to property site zillow.com) and update the listings with that information.
• Display the properties in such a way that the client could easily sort, filter and flag properties that were of interest to him.

Languages and protocols used

• Object oriented PHP, javascript, jquery, AJAX and a solid understanding of HTTP transactions.

Project features

• Secure login and user management.
• Authorised data collection (web scraping) from five different sites – some php, some ASP.net using PHP cURL libraries in automated scripts. Automated script authentication (script logs in with username and password).
• Data consolidation in a mySQL database with dynamic listing update and cleanup.
• Paginated data display.
• Client side table sorting by column using jquery (no page reloads).
• Intuitive, one-click filtering using jquery (no page reloads).
• Cross domain API calling and information display using AJAX, PHP, XML and jquery (no page reloads).

Overview

My client runs a business providing website maintenance, updates and management services to medium sized businesses. He desired a tool that would analyze prospective clients’ websites, giving them feedback on various metrics, with the idea that clients would hire his services to improve their performance on those metrics.

Features

• Multi-threaded: client launches multiple asynchronous requests (via AJAX) for concurrent (and quick) processing.
• Dynamic page display using jQuery.
• Object oriented PHP: used throughout the application, particularly in generating front-end presentation and graph templates.
• CSS based graphs – allowing custom graph design
• jQuery UI integration
• PHP / MySQL. Captions, headings and images are defined or mapped in a MySQL database.
• API integration: both SOAP and RESTful based.