Monday, July 22, 2013

SPA... Single Page Applications.. My journey

Going to try and document my forays into web 2.0 (old term but I think it makes sense for these new JS framework based webapps).

Heres my requirements. I want to develop a modern webapp using NodeJs on the server side, and some of the newer client side frameworks. As a tester project I'm going to implement a time management system. This is a personal bugbear of mine since every week, and month I have to struggle through some overwieght and cumbersome time managment tools to submit my work hours.

TO start with I'm going to try angularJS, and bootstrap.

So first step is find a good template/ boilerplate for this. I stumbled upon Yeoman ( which is an opinionated (I like this) framework for front end developemnt.. (Its made up of 3 tools, yo (scaffolding cmd line tool), Bower (dependency mgmt), and grunt (build tasks such as minification etc), SO I'm going to start using that. (See Aside 1)

I already had nodejs installed, so here goes

npm install -g yo
npm install -g generator-webapp
npm install -g generator-angular
yo angular --minsafe    

This gives you lots of options bu by default will setp angular, twitter, compass, and a load of angular addons

yo angular:controller myController
yo angular:directive myDirective
yo angular:filter myFilter
yo angular:service myService


In the past I've stuck to my Java IDE such as Eclipse or IntelliJ (see aside 2 below).
However nowadays all the kool kids are using Sublime.
Alternatives are Brackets and Atom (the one I'm using). Atom comes the apm (atom package manager) which is build on npm and comes with a rich array of plugins
Ones I recommend are
Typescript - since I am planning on using Typescript for my Js development going forward

Woah.. An old fashioned text based generator tool (and Paul Irish is one of the people behind it).. Old-skool I like it.. reminds me of rogue
AS you run npn install scripts, yo's menu will grow offering you new options (e.g. Run the Angular generator and webapp generator are added as you run the install scripts above).

Aside 1 Console2
One of the side benfits of going through this process was discovering a recommendation to use console2 (or powershell) for windows users. Heres a blog entryon getting the most out of it.

Aside 2: IntelliJ has a nodejs plugin
THis allows you to run nodejs from intellij. Need to point at app.js which i normally located at app\scripts\app.js

Rogue Aside
Original ascii based maze dngeon game with randomly generated levels. ( Personally I found rogue way too difficult..
Nethack is another, again very difficult, but you do stsrt with a pet, and you can encounter your own previously killed characters in later games
Far more approachable and the only on eI managed to finish was Larn

No comments: