Delivering Quality » JavaScript

What Will Web Development Look Like in 5 Years

Mark — Wed, 24 Mar 2010 16:40:45 +0000

Developing applications for the web has changed significantly over the last 5 years. Since 2005 the term AJAX has been coined, Ruby on Rails is now an open source web application framework, jQuery was created and has subsequently revolutionized JavaScript development, and now HTML5 is the top buzzword of the day. I believe the next 5 years will hold just as many improvements for web developers.

I foresee a new framework will be created to make developing fully interactive AJAX applications as easy as it is to write current MVC applications. Current frameworks like Ruby on Rails and Symfony provide everything you need to develop a modern application without having to build plumbing infrastructure; however, they do not provide nice components for interactive applications. In addition to a robust server core, this new framework will have a client side JavaScript component that simplifies the process of building interactive web 2.0 applications. Some critical components would be:

Form Validation. Libraries do exist to validate forms in JavaScript, but they don’t integrate with the server side form validation. In this new framework you won’t have to write form validation code twice.
Paginated Lists. Almost all web applications have at least one page where data needs to be searched and listed with pagination. We need to have this same functionality in JavaScript to skip a full page reload and provide local caching of the results.
Animation Library. While script.aculo.us and jQuery have made simple animations and visual effects much easier to do, I believe we can go even farther. Web applications also need to gain that fluidity and soft animations that desktop applications such as Exposé have had for a couple of years.

I also see huge resources being directed towards mobile development because ALL current generation smart phones are built for an incredible web browsing experience. As home users have switched from desktop computers to laptop computers in the last few years, people will slowly start switching to hand-held devices for their primary communication and Internet needs. Most likely this will have one primary effect: web frameworks will have a mobile optimized version of the site done automatically. Little to none developer intervention will be required as only resolution, text sizes, and layouts will be modified for the mobile version.

Lastly I see tools and libraries around 2D and 3D drawing elements. Most likely these libraries would be rendering to a Canvas or a WebGL element but something better could be created. Both of these are young standards right now that show a lot of promise on delivering the ability to draw pixels directly in a native HTML web page. While they will be used first in simple computer games, I am very interested to see what libraries are created to facilitate these elements being used appropriately inside next generation web applications.

What do you think the next 5 years will bring?

Facebook vs You!

Mark — Wed, 23 Dec 2009 06:31:49 +0000

Have you had the… how should I describe it… experience of writing a Facebook application? No? OK, here’s an introduction to what you can expect.

When developing an application you must learn Rule #1 Facebook is the gatekeeper. Everything you do, be it HTML, CSS or JavaScript, is restricted by Facebook. Only the commands, functions, CSS properties, HTML tags etc. that Facebook allows are permissible. If you have an error in your HTML such as an unclosed tag or if you try to use a CSS property that does not exist, Facebook will render a very nice message saying you made an error.

Rule #2 The never ending cycle. The Facebook platform is constantly changing and APIs that you are using in your application could disappear one day without any notice. It’s the life of a Facebook application, working one instant, inexplicably broken the next. Be prepared for irregular maintenance just to keep your application working.

A Facebook Application lives in the world of Facebook and while it might initially seem like you’re developing a standard web application you are not. Rule #3 You’re application is on the Facebook web. It’s not a regular web application which is a very slight but critical distinction. Facebook has used their powers as the gatekeeper to make modifications to the web. Some HTML tags are allowed, some are not. JavaScript has been altered to remove a lot of its power and replace only some of them with Facebook specific functions and even CSS has restrictions. Don’t expect existing code to function when placed in the Facebook web.

Additional Caveats

You cannot include any external JavaScript or style sheet files, they must be included in-line. This is so Facebook can parse them and allow only approved commands. Yes it enhances the security of the social networking site as a whole, but it will slow down your development time.
Facebook will filter, compile, and drastically alter your original code. Clicking view-source on a Facebook page with your application will show your JavaScript code mushed into awkward Facebook functions.

Do you see that it’s a bit of a battle of you against the mighty Facebook? Don’t sweat too much, other developers have persevered and with a few wounds and time you can build and maintain a successful Facebook application. Good luck!

UpcomingHoliday.com Now with Geolocation

Mark — Thu, 17 Dec 2009 06:27:40 +0000

UpcomingHoliday.com has been updated and now includes geolocation support. If your browser supports it your country should automatically find and select your country. If not, it will fall back to IP based country lookup. Geolocation is a HTML 5 feature that is supported by Safari on the iPhone 3.0 OS, Firefox 3.5 and Google Chrome.

UpcomingHoliday.com is an application that tells you what and when your next federal holiday is. Currently it’s available for people in: Australia, Canada, France, Germany, India, Nigeria, United Kingdom and United States.

Learning WebGL

Mark — Sun, 15 Nov 2009 21:22:15 +0000

If you’re interested in programming graphics on the web I recommend subscribing to Planet WebGL; it has a lot of great tutorials and instructional material for learning how to program graphics in a web environment.

WebGL is technically a JavaScript binding to OpenGL ES 2.0. If you already know OpenGL ES and JavaScript, you should be able to pick it up pretty quickly. If you know JavaScript but not OpenGL and are in a web development career, I encourage you to look into WebGL because it could be one key component of interactive web applications in the future.

Intro to Objects in JavaScript

Mark — Wed, 21 Oct 2009 06:23:03 +0000

Despite what you might think, JavaScript supports programming in full object oriented style including inheritance, encapsulation and polymorphism. But before we dive into all those topics I'm going to start with the basics and demonstrate how to create and use a simple JavaScript object.

Lets say you have a web application that needs to track how long an AJAX request took. If you were writing it in Ruby, PHP or Python you'd have a timer object that you can start() and stop() and a seconds() method to get the number of seconds that passed between calling the first two methods.

To build this in JavaScript we first create our constructor:

PLAIN TEXT

JAVASCRIPT:

Timer = function() {
var seconds_passed = 0;
}

Here we are creating a Timer object with a private seconds_passed variable. To create this object we we simply create a new timer:

PLAIN TEXT

JAVASCRIPT:

var elapsed_timer = new Timer();

This timer object now needs some public methods. We can attach a public method by using this.method_name:

PLAIN TEXT

JAVASCRIPT:

Timer = function() {
var seconds_passed = 0;
this.start = function() {
// implementation here
}
}

Our Timer class now has a start() function. Additional public methods can be added in the same way.

To add a private method, don't define it with the this keyword but instead create a regular function inside the class:

PLAIN TEXT

JAVASCRIPT:

Timer = function() {
function increment() {
// implementation of private method here
}
}

Now we have a Timer object with a public start method and a private increment method. The rest of the class is fairly simple, so lets jump to the finished solution.

Complete Example

PLAIN TEXT

JAVASCRIPT:

Timer = function() {
var timeout_id = null;
var seconds_passed = 0;
this.start = function() {
increment();
}
this.stop = function() {
clearTimeout(timeout_id);
timeout_id = null;
}
this.seconds = function() {
return seconds_passed;
}
function increment() {
seconds_passed++;
timeout_id = window.setTimeout(
function() {
increment();
}
, 1000
);
}
}
var elapsed_timer = new Timer();
elapsed_timer.start();
// do some stuff
elapsed_timer.stop();
alert(elapsed_timer.seconds());

There you have it. A simple JavaScript timer to keep track of time.

Firebug: The JavaScript Debugger

Mark — Mon, 12 Oct 2009 05:08:26 +0000

JavaScript is a core language of many web developers and a necessary component for any modern web application; therefore having an excellent JavaScript debugger and knowing how to use it effectively is key to fixing bugs faster. Fixing bugs faster also makes you a happier software developer!

I recommend Firebug, which is a JavaScript debugger, a real-time HTML, CSS, DOM, and JavaScript editor, and a network monitor.

Logging

One of the most useful features are the logging functions through console.log which can simply be used to output a string or object:
console.log('Testing log output: ', myObject);
This will output your message and the full object available for inspection in the Firebug console tab. In addition to console.log, there is also console.warn, console.error, and more. See the Firebug documentation for more info.

Be careful to remove the statements from your code before deploying it, because your users won't have Firebug installed, and JavaScript will then fail when it tries to output to the console object. Also, you certainly don't want users to see your debug output.

console.log in action

Breakpoints

Pausing scripts to investigate the system at a current point in time can be very valuable in solving bugs. To use the breakpoint feature click just to the left of a JavaScript line. This will set a breakpoint and make a red dot appear.

You can also add a conditional breakpoint by right clicking on a line number. Now the program will only pause under your specified condition.

Setting a breakpoint

JavaScript Errors

Firebug will print out JavaScript errors with the corresponding file and line number. An absolute must for any JavaScript development.

A JavaScript Error

Those are the key feature I use most often, but there are many more JavaScript features in Firebug, including stack traces, watching expressions, profiling and viewing events.

Download Firebug now.

Browser Notifications with Yip

Mark — Mon, 10 Aug 2009 02:51:35 +0000

Ever wanted your web application to be able to show notifications even if the user may be in another browser tab or application? Now you can!

The relatively new Yip extension for Firefox adds notification functionality. This is not a small JavaScript notification that pops up in the browser tab, but one that integrates directly with the users Operating System.

Yip uses libnotify/notify-osd on Ubuntu Linux, Growl on Mac, and Snarl or Growl for Windows on Windows. If none of these notification applications are installed, it will use Firefox's simple and not as pretty notification system. Ubuntu Linux users have notify-osd installed by default, Growl is popular with Mac users, yet Windows users probably don't have Snarl or Growler for Windows installed.

When building with notifications remember that they are meant to enhance the user experience, not require it.

The Yip extension supports both the Fluid and Prism APIs, but recommends Fluid because of support for an onclick callback function.

The API is simple and straight to the point:

PLAIN TEXT

JAVASCRIPT:

window.fluid.showGrowlNotification({
title: "your notification title",
description: "some description",
onclick: optionalCallbackFunction,
icon: "URL to an icon"
});

Since Yip may not be installed on the users computer, just wrap it with a check for fluid. A complete example looks like this:

PLAIN TEXT

JAVASCRIPT:

if (typeof(fluid) !== 'undefined') {
window.fluid.showGrowlNotification({
title: "Hello World",
description: "The Google icon says Hi",
icon: "http://www.google.com/favicon.ico"
});
}

Related Projects

Roar: Embed notifications into a web page (powered by MooTools).
growl.js: Windows only notifications using Growl for Windows.
NotificationAPI: Notifications in Google Gears

Of all these options, Yip is the best solution by far; its fully cross platform, has a simple to use API, and is ready to use. Install Yip now.