JavaScript's Future: Cajun

In the process of writing this new Ajax book, I’ve been recounting the major steps forward that JavaScript has taken since it was first released way back in Netscape Navigator 2.0 and wondering what the future will bring. In my opinion, the next revolution for JavaScript is going to be the implementation of the <a title="Web Applications 1.0 - The bitmap canvas" rel="external" href="http://www.whatwg.org/specs/web-apps/current-work/#canvas"><canvas/></a> element.

What exactly is the <canvas/> element? It was originally created by Apple to support its Dashboard feature, it’s now part of the WHAT-WG Web Applications 1.0 specification. The <canvas/> element represents what’s essential a device-independent bitmap canvas that, when used with JavaScript, provides most of the drawing functions one would ever need.

Imagine, being able to draw any shape automatically as a page is being loaded, or creating animations without downloading actual images. Think of what this will do for online games or places like Google Maps that must currently rely on server-side rendering for all images. This could literally revolutionize Web user interface design as we know it. No longer will developers be saddled with using the pre-rendered form elements. Don’t like that checkbox? Design your own. Need a color picker? Just draw in on a canvas. Need a collapsible tree? Don’t worry about tables and divs, just draw it the way you want it. Ultimately, this could push technologies like VML and SVG out the door as developers are able to program their own graphics, making them resize, rotate, or skew, all by using JavaScript and a simple new element.

Already, Safari supports it and Firefox will soon. Since these are heavily used by developers, will it be long before we see Web sites take advantage of the <canvas/> element to produce incredible effects with canvas-assisted JavaScript? Check out what’s already possible.

Ladies and gentlemen, what would any revolution be without a catch phrase? We have Ajax already; I’m proposing that this new model of Web user interfaces be called…what for it…Cajun (Canvas Assisted JavaScript UnderNeath). Any sites that feature graphical user interfaces drawn on the <canvas/> element will be known as using the Cajun model. Who knows? Maybe my next book will have to be Professional Cajun for Web Developers?

Comments

  1. Jeremy

    Now that&#039s slick. When I was reading up on GDI+ a while back, I thought that the way Windows controls are created and drawn should be applied to web development. The web desparately needs a richer environment to create a more conventional UI. The only problem I see with Cajun is support. Microsoft would have to get behind the technology in order for it to hit the mainstream; and knowing MS, they&#039d implement their own tech as opposed to Cajun.

  2. Nicholas C. Zakas

    You&#039re absolutely right, its success would largely depend on Microsoft taking it up. But really, how hard would it be to write an HTC to emulate the canvas element using VML

    And yes, this is essentially what Cajun is about: bringing GDI-type control drawing to the Web. Take that Flash!

  3. Erik Arvidsson

    Jeremy: It is funny that you say that. I guess you are aware of Avalon where you don&#039t do repaints but use objects representing shapes and what-not. So basically Windows is moving towards the web and the web is moving towards the old school paint based rendering.

    For implementing the canvas on IE there are 3 possible ways (probably even more).

    VML element behavior. There are things that cannot be done using VML and VML is painfully slow and buggy. Just imagine implementing the toDataURL() in JS. Sloooow...

    Using a Flash implementation. The Lazslo project are planning to implement this using Flash and it should be doable to base the code on their code (which is Open Source).

    A binary behavior. This should not be too hard but would require a security alert (just like Flash requires a security alert).

  4. David Flanagan

    I love the Canvas element to, and have a suspicion that it could be the next big thing.

    If I remember correctly, however the WHATWG draft explicitly states that it is not intended to be used to draw UI components.

    Still, it could be hugely useful for dynamically drawn diagrams.

    But there needs to be a portability layer. VML seems like an obvious approach for IE, but it would be nice to have something that Firefox 1.0 could fall back on as well.

    A Java applet would work nicely, although Flash is probably more widely deployed, so if it could be done with Flash that would be even better...

  5. Nicholas C. Zakas

    Ah David, but remember what tables were originally intended to be used for? No one had any idea they&#039d turn into layout elements for nearly all Web pages. Plus, after seeing the cool stuff you can do with Apple Widgets, is there any doubt in anyone&#039s mind that canvas will be used for UI? I mean, what other practical use does it have really?

Understanding JavaScript Promises E-book Cover

Demystify JavaScript promises with the e-book that explains not just concepts, but also real-world uses of promises.

Download the Free E-book!

The community edition of Understanding JavaScript Promises is a free download that arrives in minutes.