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 (http://yeoman.io/) 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
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

Editors

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






Aside:
yo
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. http://www.hanselman.com/blog/Console2ABetterWindowsCommandPrompt.aspx

Aside 2: IntelliJ has a nodejs plugin http://www.jetbrains.com/idea/webhelp/browse-repositories-dialog.html#search
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
http://en.wikipedia.org/wiki/Rogue_(video_game)
Original ascii based maze dngeon game with randomly generated levels. (www.play.vg/games/87-Rogue.html?). 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 http://en.wikipedia.org/wiki/NetHack
Far more approachable and the only on eI managed to finish was Larn http://en.wikipedia.org/wiki/Larn_%28video_game%29

Wednesday, July 03, 2013

Groovy Dynamic code

This is fairly old, but still cool, and I just had a need to use it today, so I thought I'd post about it.

My problem was I wanted to mock out a Domain class. If a proerty value was null., then I wanted to create a mock value for that property. IF the property had a value, then I wanted to return that.

Using Dynamic programming this was easy.

class A{
  def doit(){
        println "doing..";
    }
    String var="yoyo";
}

def a = new A();

a.metaClass.getProperty = {p ->
    def meta = a.metaClass.getMetaProperty(p)
    if(meta){
        def mp = meta.getProperty(delegate)
        if(mp)
            return mp
    }
    return "DynoGet${p}"
}

println a.var
println a.mar
a.var=null
println a.var


Output

 
yoyo
DynoGetmar
DynoGetvar

The key here is the metaClass.getMetaProperty, and the meta.getProperty(delegate). They check if the property exists, first, and then if it has a value assigned. If not then I create a default value.