krawaller

In a previous post, I described the raison d’être for a new course in Advanced JavaScript at Linnaeus University, Sweden. As a quick synopsis, suffice to say that there simply isn’t any course at all (in Sweden at least) teaching any front-end theory from this side of the Ajax revolution, it’s all framesets and DHTML. Linnaeus University, recognising both the demand and lack of supply, wanted to bridge the void, and I hijacked that task.

Enough about the why, now onto the what! An academic to the bone, my interest in JavaScript is of a very nerdy nature. I love delving into the intricacies of the language’s esoteric aspects, without much thought or care for their practical applications. Dan Webb’s chapter on metaprogramming in The Art & Science of JavaScript made my heart sing, I found Robert Fishers red pill functional programming article in jsmag #1 to be truly beautiful, and Crockfords article about the little JavaScripter sent me on a month-long recursive adventure through all three schemer books. That’s the flavour of the knowledge I initially planned to share in the course.

Fortunately, my contact at Linnaeus was of a more practical nature, realising the importance of matching the needs of (to-be) professional RIA developers. My initial package of advanced JavaScript might help you to ace Baranovskiys JavaScript quiz (although maybe not quite as well as Zakas did), but when tasked with something actually useful like, say, recreating an Objective-C iPhone app using JavaScript, my exact understanding of obscure closure behaviours won’t be of much aid.

Thus wisened up, I set out to take a more practical approach. Well aware of my lack of experience in the “real world” of web development, I went on a parasitic mission to leech the knowledge of the people in the trenches – people who value knowledge from its practical use, and not its obscureness. I talked to a lot of developers (many thanks here goes to the Öresund JavaScript meetup), read up on the upcoming platforms where JavaScript would be applicable, and distilled forth a toolkit that I hope will actually prove useful.

Since my target audience for the course are students taking the third year of the web programming programme, I can thankfully presume the existence of all mundane knowledge (OOP, basic JS, HTML, CSS, UML, etc), and focus solely on the weapons of a JavaScript RIA Ninja. This is the recipe we ended up with for the course:

1. First up we define our developing environment. We look at editors and what we should demand of them (Aptana), at browsers and testing tools (Firebug), version control solutions (Git & Github), filesharing (Dropbox), tidbit sharing (JSBin). I also found some excuse to fit JSLint into this part.
2. We then deliver some advanced JavaScript concepts, but confined to what you need for code organisation and reuse. Mostly this consists of making the students read The Good Parts and traverse through Resigs learn app.
3. Throughout the course, the students will then put together a small application, but using best practises for a major project. First off they will design their model, isolating the “classes” needed through UML. They’ll start of by creating the stubs for these objects, and choosing their inheritance framework. Also we’ll look at documentation generation.
4. Next we’ll start implementing the model, using test-driven development, a concept new to most of the students. They’ll get to taste different testing frameworks and make their own choice.
5. Then comes the controller, in my adaption meaning the application structure and flow. We’ll look at different patterns, funneling user input through event delegation, and decoupling application logic and DOM manipulation. After this step, they’ll have a working, if spartan, application.
6. ...which is remedied in the next step, dealing with the view. Here we give some love to the UI, looking at the different frameworks available. They’ll get to incorporate widgets, create dynamic graphics (DOM manipulation, canvas, SVG/VML) and simplify styling through use of semantic class names (jQuery UI CSS framework classes or similar). We’ll also wedge in some ARIA discussion and accessibility issues.
7. Next comes a porting step, where we underline the importance of JavaScript knowledge through making the students adapt their application to a different platform. Having used the best practices outlined above, they shouldn’t have much trouble redeploying to another JavaScript environment.
8. Finally we’ll give them a throgough run in optimization, something the first two years of our training haven’t really given much attention to. We’ll cover all the bases here, meaning the full JavaScript half of Souders’ excellent Even Faster Websites.

The journey is now well underway, with the students having reached steps 3-5. In spite of the contents having received the blessing from many a talented veteran developer, I do have some fear of the blind-leading-blinds thing biting us later on. But, so far so good! I hope to share a progress report here as we’ve rappelled a bit deeper down the rabbit hole...