Friday, June 22, 2012

CanJS (or: How I Learned to Stop Worrying and Love the DOM)

Javascript?!? Ewww....

Let's face it: Javascript has gotten a bad rap over the years, and with good reason (mostly). Anyone with a less than favorable view of the language has likely formed that opinion after an encounter with some ugly messy spaghetti code, perhaps in a legacy enterprise web app, sprinkled throughout the HTML to add some basic form validation, or toggle visibility of a page section, or provide a rudimentary tabs control. When code grows organically, without an over-arching framework to guide its evolution, it tends to grow like a weed: out of control and in all the wrong places.

So we recognize that we need a framework, if we've got any shot of building a significant maintainable application. The problem then becomes, which one? There are a multitude of frameworks to choose from. The sheer volume of projects can make it quite intimidating to start on a greenfield javascript application.

This article will not be delving into the specifics of why to choose one framework over another; I don't have enough experience in all of them to make that an educated statement. It will, however, detail my experiences with CanJS, (and its sibling projects, StealJS, JQuery++, and FuncUnit, all of which now exist under the umbrella project DoneJS) and go into some depth on how I was able to utilize it successfully in a recent project. (also, I'm realizing that this will most likely end up a series of articles, as I'm finding that I've got a surprising amount to say on the topic)

CanJS: tl;dr

So what is CanJS, exactly? The website has a great explanation and description which I won't parrot here, but essentially it gives you some useful tools for building an application in Javascript conceptually as an aggregation of models, views, and controls (MVC, anyone?). There are a number of whiz-bang features they sprinkle in as well, like the concept of an 'observable' object, live binding with views, and URL hash 'routes'. It sits on top of a number of the "big" foundation javascript framework / libraries (e.g. mootools, dojo), but JQuery is the one I chose to base my app on (since, like, everyone is using it and stuff). You then use StealJS to "import" all of the dependency scripts for your app's components, with the added benefit of being able to compile complete, minified production js (and css) artifacts in a build process.

A big aspect of the DoneJS project is that it emphasizes and facilitates the creation of functional and unit tests for your code. Management-types will be giddy over the FuncUnit feature which can show you a line- and branch-coverage report for your test suite.

Why I think Can/DoneJS is cool

I like the way I'm able to logically structure my application into reusable components. I really like the EJS template library, which allows me to write my HTML in reusable fragments, "hookup" javascript objects and events to those fragments, and even "live-bind" to observable objects (where the view actually changes when you update an attribute on an observable). Can.Construct (and can.construct.super) give me class inheritance in Javascript with a nice syntax. Can.proxy allows me to write event handling and asynchronous code without devolving into nested nested callback functions. The Control concept is simple yet powerful.

Why I think Can/DoneJS is hard

My background is predominantly Java, with a heavy emphasis on server-side "enterprise" applications. It's possible that the doc sites are more grokkable by those native Javascripters, but I find them hard to decipher at times, and also often out of date or incomplete. That requires you to get familiar with the internals of the framework in order to troubleshoot when things don't work as advertised. That said, the guys at Bitovi do a good job of patrolling the forums and respond quickly to pull requests on github.

More to Come...

Now that I've (perhaps) whetted your appetite a bit, I will next go into deeper dives on some cool / interesting things I've done with CanJS, as well as illustrate some gotchas that I encountered which will hopefully help you in your coding.