Delivering Quality

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?

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 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.

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.

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:

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

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

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:

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

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