7 Exciting Web Development Trends for 2011

At the end of December, you read Andrew’s list of the hottest technologies, tools, and resources to come from 2010. Today, we’re going to look forward, and take a peek at some exciting emerging technologies and trends.

A Word from the Author

The tools and technologies that we, as web developers, work with is in a state of constant flux, much like every other industry. What separates us from the rest is that we have to learn, unlearn and relearn new developments at a much faster rate, much more frequently.

Today, I’d like to talk about a few technologies and trends that I think are going to be quite important in the coming year: a pseudo prediction/wish list/what we’re going to cover this year post of sorts.

The technologies listed below weren’t exactly hatched recently. In fact, some are quite old and have been in use for a while now, in their insular niches. That said, I do feel that this is the year they gain even more mainstream awareness. As a great man once said, An invasion of armies can be resisted, but not an idea whose time has come. Let’s get started!

1. noSQL

Why are people excited about noSQL? And by people, I mean some of the big fishes including Google, Facebook and Twitter. For one, the concept of noSQL has redefined the way we perceive databases and the corresponding interactions.

Sometimes, you simply want to store and have access to your data, with low latency and excellent scalability.

Databases, historically, have almost always been about implementing the relational model and being fully ACID-compliant. If your transactions weren’t ACID, or your database wasn’t relational, people scoffed at you for being a “kiddie” database.

The issue is the relational model isn’t really necessary everywhere. Neither is ACID, though many noSQL implementations enforce some sort of data integrity and consistency. Sometimes, you simply want to store and have access to your data, with low latency and excellent scalability. Applications with massive amounts of read/write operations are an excellent choice.

Another big factor for me is the simplicity it brings to my schema: your data models can now become a lot more sane. I can’t wait to not muck around with my models just to make it fit into the relational model.

Implementations of Interest

noSQL at Facebook

There maybe no better example than Facebook when it comes to how to handle enormous traffic. It’s no surprise that traditional methods of scaling won’t quite work for Facebook.

Now part of the Apache Foundation, Cassandra, a noSQL implementation, was developed in-house to help with searching data. Currently, it powers Facebook’s inbox search.

Facebook also makes use of another noSQL solution, HBase, for its messaging platform.

noSQL at Twitter

Twitter’s reliability used to be, well, infamous. On of the main reasons was that their setup wasn’t really scaling all that well. Twitter now uses a mix of SQL and noSQL to manage their data.

Just like Facebook, Twitter uses a mix of Cassandra and HBase. Cassandra is used for all the front facing applications while HBase is used to data mining, analysis and analytics.

2. Serverside JavaScript

JavaScript is, arguably, the most important language for the next few years — and for good reason. Much of the cruft and idiosyncrasies associated with the language is more due to browser quirks, and less due to the design of the language itself.

It has been satisfied with residing merely in the browser for a long time, however, this trend is changing. Implementations and interest in server side JavaScript has been growing over the past year and I fully expect it to explode even further this year, thanks to the screamingly fast JavaScript engines to run your code on.

To the people questioning the need for JavaScript on the server side, I present you with this single situation, among lots of others.

Whatever your backend language of choice is, you’re ultimately going to come back to JavaScript for constructing the frontend. Wouldn’t it be easier to simply use JavaScript universally?

Technologies of Interest

node.js

node.js makes creating real-time, high performance, scalable applications a cinch. It’s primarily event-driven and runs on V8, the JavaScript engine that powers Chrome and makes it freakishly fast.

It doesn’t spawn a separate thread for each connection like most others. Instead it works through asynchronous operation which significantly minimizes latency. If it has stopped making sense, remember to read a primer on node.js published right here on Nettuts+. We’ll also be covering this topic extensively over the next few months so stay tuned!

3. Easier Hosting, Deployment and Scaling

Bottom line, scaling is a pain.

The rise of as a service businesses have only helped developer tangentially in the past. Most of them were ports of functionality that we required, with the exception of maybe project and bug tracking. Recently, a number of services have opened up that significantly ease up a developer’s life.

Deployment has always been an issue with non-trivial web applications since you need to do more than copy over the files to the server. Scaling, too, has been an issue — not just in bandwidth, but in computing capacity as well. We must setup load balancers, a caching system, maybe even a lightweight server to serve up static content. Bottom line, scaling is a pain. It’s a rather involved activity, especially when you’re strapped for time.

Platforms as a service, as they’re popularly called, remove almost all of the hassle for a developer. Deploying? Merely push to a git repo and everything is handled for you. Expecting a massive rush of traffic and worried whether your application will buckle down? Merely add more nodes or workers to your instance and you’re done.

Services of Interest

Heroku

Heroku is a perfect example of the simplicity services like these can bring to the table. Deploying to my app is really just pushing code to my github repo. Computing capacity and memory, among others, can be dynamically allocated as well. As an added incentive, a lot of noSQL solutions are available as well to be used, including Redis and MongoDB.

Amazon’s Web Services

Amazon Web Services is an umbrella term for a number of awesome services they run. The ones of interest today are:

• Amazon Elastic Compute Cloud [EC2] let’s you create virtual servers that are incredibly scalable. You just need to choose the amount of power you require.
• Amazon Simple Storage Service [S3] provides cheap, reliable web based storage. All Envato sites and marketplaces use S3 almost exclusively to store and serve content.

4. Utility JS Libraries

Even though we have a massive number of JavaScript libraries that abstract away some of the more mundane tasks, like DOM manipulation and AJAX, they leave a lot of functionality untouched.

We saw a number of utility libraries, such as Modernizr that gained immense popularity last year — a sign that developers are always looking for nifty libraries that let them use cutting edge technology whilst saving time. This year should be even. Here are a few tools that might pique your interest.

Libraries of Interest

Head.JS

This library is a true powerhouse. It takes care of loading your scripts in a parallel nature, mimics Modernizr by adding specific classes to your document and much more. Definitely a much watch!

underscore.JS

This is pure utility library that brings a powerful set of utility methods to JavaScript without extending the native types underneath. Similar to how jQuery maps to the $ characters by default, underscore maps to the _ character. Check out the site for a full rundown of the utility functions it contains.

mustache.JS

This is a simple templating library that should make handling data much more simpler. You simply need to create a custom template, map it to your data and run the code. If you’re even the least bit interested, you should check out a quick tip we published a couple of months ago!

5. Better Unit Testing for JavaScript

Testing is an integral, intrinsic part of the software development process.

Unit testing, specifically, is the testing of individual software components.

The difference is that these tests are performed by the developer, since writing tests, in general, requires knowledge of the source.

JavaScript has lagged behind other development platforms when it comes to proper testing. Even now, unit testing is not an oft heard statement among typical JavaScript developers and part of the reason is the lack of proper tools to do so. Here are a few tools that should make it significantly easier for you to test your code:

Tools of Interest

QUnit

Made by the jQuery team and used as the official test suite for the platform, QUnit is a powerful unit testing framework. It can test any generic piece of JavaScript code, even code that needs to be executed inside a JavaScript engine.

FireUnit

FireUnit is implemented as a Firefox extension and requires Firebug. This may be good or bad depending on your perspective. For me, since Firebug already is a big part of my development workflow, this is a boon. FireUnit adds an additional test tab to Firebug through which you can access your tests and results.

JsUnit

JsUnit is an open source testing framework for JavaScript. Inspired by JUnit, it’s written entirely in JavaScript and runs inside your browser. It also includes a platform for automating the execution of tests.

6. Raphael-esque Libraries for Canvas

HTML5 brought us the canvas element which opened up new vistas for us. It provided low level, per pixel control over the drawing area which was unheard of before. Previously, you’d usually have to resort to either rendering an image in the backend and relay it or using a browser plugin.

Canvas is a game changer in that aspect.

The issue here is that it is truly low level. Per pixel control is nice but when you’re trying to create something bigger, you’ll want these details abstracted from you. Kind of like how Raphael abstracts the details from the SVG element. And mind you, SVG is a lot more easier to work with.

Libraries like the one I’m looking for aren’t really limited to merely providing interfaces for shapes and so on. A number of game libraries have even been released which let you work at an ever higher level.

Libraries of Interest

Processing.JS

Processing.JS is an excellent library that provides a high level interface to the canvas element. It’s a JavaScript port of the Processing, a fun, little language to help non-programmers understand programming.

The library completely abstracts you from the initialization and other trivialities of the canvas element and let’s you create incredibly suave content.

Akihabara

Onslaught! Arena, a HTML5 canvas game

Akihabara is an extensive library that let’s you create games rapidly. As expected, it makes use of the canvas element.

It helps you with a large number of tasks including rendering, collisions and input. Even, relatively, esoteric features like z-indexed objects and double buffering* are supported.

* If you understand what this means, you get a cookie!

7. True JavaScript Frameworks

Server side development has it good.

Server side development has it good. You have plenty of choices, regardless of which language you’ve chosen to work with; you can choose anything between a modular pick-your-component frameworks, to all encompassing full stack frameworks, to everything in between.

In the front end though, we’ve had to work with libraries instead of frameworks, even though there is only one language to deal with: JavaScript. DOM manipulation and other assorted functionalities are abstracted away, sure, but when building a complete UI for an application, low level functions like these are but a fraction of your worries.

Usually, you’d have to choose something for your templating needs, UI and widgets, dependency management, DOM manipulation, MVC and other assorted functionalities. A number of frameworks have been slowly gaining momentum that, even though aren’t quite all encompassing, promise a much better front end development experience.

Technologies of Interest

SproutCore

SproutCore is a JavaScript framework, originating from Apple, that lets users create desktop like web applications rapidly. Needless to say, the entire frontend requires only JavaScript.

The framework consists of a number of parts including a widget system to handle different parts of the UI and a key value observing system to wire up each part which significantly reduces the amount of glue code in your application.

One of the most public facing applications of SproutCore is Apple’s MobileMe.

Cappucino

Cappucino, developed by 20North which is now owned by Motorola, takes a completely different approach to such a framework. Cappuccino introduces a focused, small superset of JavaScript called Objective-J.

The platform itself consists of the language itself, Objective-J, and a comprehensive library which is a port of the Cocoa frameworks on OS X.

And That’s a Wrap!

And there we go. I’ve listed seven trends that I’m hoping truly gains mainstream awareness this year. Did I miss anything important? Let us know in the comments. Thank you so much for reading