Roving Mind, Nimble Fingers.

Dojo javascript framework is probably the most missunderstood javascript framework ever, and there is good reason. Dojo has been around kicking around the dom way before[1] x and y js framework started off as a hack/scratch/itch in a dev's intelectual loins

I find myself yapping about Dojo to every other developer, startup guy, and in any other javascript/html5 related conversation. In order to save breath Im writing out a blog. In answer to questions like implementing object oriented paradigms/patterns in js, ajax rpc, themeing js wdgets, modular architecture, dependancy loading etc. My answer/recommendation is DOJO.

Comming from an object oriented programming background it was easy to see lthe logic behind dojo, for me JQuery was and is an over hyped hack. If you are serious about making a well designed maintainable, scalable, consistent, localized, accessible, dynamic web application dojo is what you should be using. I mean you could (theorecticaly) build an application using shell scripting, but that'd be stupid, get the idea.

Dojo Mojo Blockers

Firstly I'm going to shoot some of the common dojo mojo blockers.

1. Dojo is too big, its too slow. Yes Dojo is big its big in features. Slow: well I have to admit it was slower before 1.6 but now with dojos new dependancy loading in 1.8 dojo is faster or fast as most of the js frameworks out there, comparing feature by feature. With the new architecture you can load just the bits that you'll need to use without pulling in the whole kitchen sink. Yes, it gives you dependency loading for free, no 3rd party hack to fix that js gripe.

2. Dojo is complex: Yes its more complex than most commonly used js frameworks. Comming back to my shell script analogy, so if you are making the equivalent of a shell script dont use Dojo. 'But I can do this in one line using ****' yeah , and I can balance my accounts using cat, sed, awk and bc in one line too.

3. Dojo is not popular not many use it. Dojo is not as popular as x and y, but popularity is not a relavent criteria for kickass, if software development was a democracy (LOL), if science was populist driven .... That said there is the real world issue of not getting good developers, but if you are paying to get good developers why would you want to make them use a hacky scratchy framework. Un-true Dojo is used by many large organizations.

4. Dojo is not well documented. Probably related to the previous point but IMHO dojo has pretty good set of quality examples. Documentation is more terse compared to the slew of material availiable in jQuery etc. I neve had a problem finding good material on dojo. But that said one potential hicup that i have encountered is the many version of Dojo documentation hanging around in the forums. So if you are planning to do some hacky scratchy copy paste chutney coding, make sure us are getting the code for the freshest[2] version of dojo.

What's the Mojo in Dojo ?

So what makes dojo so awesome ? First thing for me is the consistency. There are many aspects, but these were the highlights for me.

1. Design Consistency: dojo follows an object oriented design and every component is designed on that principle, so if you are comming from C#, or Java or C++ or any other respectable high-level programming language you'll be right at home. On the other hand if you are comming from a scripting background you might be cribbing about all the apparent complexity.

2. Api consistency: the api interfaces are consistent and predictable, so theres this awesome new feature introduced, you pull up the doco and no surprises, yay.

3. Familiar design patterns: once you've worked with dojo for a while and you start 'getting it' you'll notice familiar patterns repeating , a lot of GOF (Gang Of Four) patterns are involved. Dojo's api interfaces are pure joy, will get to that soon.

4. UI Consistency: The most obvious is the consistency in the usage of themes and widget styling. Dojo's widget system in addition to having all the above consistency factors are thematically consistent also. So you app with the very least designing from your part won't end up looking like Dr Frankenstiens's creation. And the consistent css selector naming makes rolling your own theme a joy.

5. 'A11y oop'*[basketball pun]: if you don't know what A11y is [heres] http://pragprog.com/book/jsaccess/design-accessible-web-sites a good reference. Dojo gives you A11y for free so your apps are instantly accessible to a larger user base.

Dojo Store API [3][4]:

This IMHO, is one of the most useful api provided by Dojo. It provides an uniform access interface to any kind of data. It has saved me a lot of trouble working with complex ajax ping-pong, transactions and tracking state etc. How it works briefly is you build you data access on these api on the client side js, most of the dojo widgets readly support the store api. For example you plan to do json rpc style ajax so what you wuld do in general is make a bunch of calls to send/receive data and and check state, update ui controls widgets forms etc based on the response. This gets really messy really fast before you know it you have a bunch of ajax handlers bunch of state variables, handling cases etc, which makes it a maintenance nightmare with a lot of network sniffing and debugging. Dojo simiplifies this by taking care of the whole transport, so you just drop in a JsonRestStore (provided you implement the store api) and read and write to the datastore asif it were a local clienside object, on the server end just setup the relavent handlers for the requests issued by the datastore. So now you have that in place you can manage all your io through the datastore elegantly and it gives you event handling also. Using dynamic forms? no problem just link up the dojo widgets to the data store and they will automagically update on changes in the datastore. I have used the data grid widget with the store api and it saved me a hell lot of trouble with data access and synchronizaton.

Dijit Widgets:

Dijit wdgets are awesome, they provide a consistent, cross browser, stable user interface out of the box. It builds on the plain html controls adding themeing validation, api integration. Its extremely easy to extend, customize and theme. There are some powerful widgets in the toolkit and they all use the same consistent apis.

Dojo AMDs:

AMDs are dojo's answer to require.js and the likes. Asynchronous Module Definition alows for asynchronous loading of component modules and dependancy management. Since 1.7 Dojo has been extremely modularized and you can easily pick an chose precicely what you need to load without pulling in the kitchensink. This is done asynchronously so other parts of the page can load while dojo modules are loaded.

In Conclusion

This blog does not do justice to the awesomeness of the Dojo Toolkit. Im an currently not working on a Dojo project but I see a whole bunch of hacks cobbled together in most frameworks, I reminisce working on dojo, not that it was particularly easy but it was elegant. Order where chaos usually ensues, layers, intelligent design.

Every now and then, when I get an urge to experiment with the latest in webapp architecture, I start rebuilding my Blog app. So for this (re)Blog webapp I experimented with a mobile first, progressive enhancement strategy, and a departure from my previous strategy which was 'gracefully degradation'. With the progressive enhancement method you build the functionality of the webapp in basic html and then progressively add css and javascript.

At the time of writing this Blog post I had implemented the essential functionality of the Blog using nothing but plain html created all test cases to ensure the functionality is achieved and tested on mobile devices. Then once no was satisfied with the implementation of the features I add a layer of sass/css to make it look a bit more bearable... :)

So far I find progressive enhancement methodology very satisfying because I know that my webapp will be usable in any html capable device without worrying about javascript support etc. And since I have the functional test cases for the plain html version I can dev more aggressively. knowing that the tests 'should' catch any breakages.

I started with the html5-boilerplate, worked in the basic structure for the blog, drew out common elements into a base template. I am using the Jinja templating engine which has all the features that I need ¹. The individual pages were created extending or sub-classing the base template which adds to a consistent experience.

I am using the tornado web framework which is a python based asynchronous web-framework. Although async programming may seem a bit daunting, dealing with callbacks and non-linear instructions, but I like the brain workout² :).

Tornado comes with its own testing setup based on the python unittest module. I mixed this up with selenium to write some basic test cases for essential functionality, although it is quite difficult to get full coverage, I focused on the more complex parts, which are more prone to breakage.

Finally when I was satisfied with the functionality and ticked off the basic features I targeted, it was time to 'skin' the app. I chose sass and compass for this, compass lets me do a lot of neat CSS tricks without having to suffer CSS. For the responsive layouts I used a compass plugin called susy which lets me set up a responsive grid the lazy way. Susy also includes some mixins to make CSS media queries easy to implement. Just by including the at-breakpoint mixin I can specify the CSS to switch to matching the screen size.

I'm just skimming through some to the tech I have evaluated, and many of the choices that I made could have been easily replaced by other libraries, and it would probably make it more easier for you. I haven't yet started with the candy coating on this m&m of a website: the javascript layer.. That's for the next post, but so If you do find this post useful add me to ur feed-reader or follow me on twitter or g+, and catch my next post.

It's not cool to be unfit, and there is no cred being a fat/unhealthy programmer by definition of intelligence, you should be able to program your own biological state of being it is totally hackable..Just like hacking on code there are numerous was to program your self biologically towards better health. After all the body is an instance of the greatest code there is... The human genetic code. And there are various levels of abstraction on that code. test

Dusting off the this rusty ol' blog o' mine. Found new inspiration in a shiny new laptop to pull out the ol' webapp experiments and tinker around with the code with new perspectives. And my favourite testbed being my blog !! Evaluated Flask as an alternative to using tornado, but didn't see much benefit in it. BTW checkout my async couchdb libs for tornado on my github (click on the friendly octocat on the right) its a fragile Frankenstein.

Its been a few hectic months or so since my last blog post, lot has happened. To sumarize quit my job, joined a startup, worked on a lot of great tech, a lot of code, with some great people, tough decisions, hard times, relocated to Sydney/Australia, joined an awesome company which shares my tech interests. Been quite busy at it ... Life.