The GAME Stack

The GAME stack

Alright, you know what LAMP stack is. You may have also heard about the MEAN stack (Mongo, Express, Angular, Node), that is gaining popularity. So many stacks are popping up and I wonder when we would get a stack overflow of stack names. The advantage of MEAN is, everything is javascript and your team needs to know only one language throughout. Good and Bad, I guess. Good because your team skillset is only one language. Bad because your team skillset may have just one language. Future of software is unpredictable and if/when Javascript goes out of favor, you and your team will be considered legacy.

While all-javascript is attractive, there is already a solid base built on the server side stacks, especially around security. I’m proposing a new stack name – GAME – Grails, AngularJS, MongoDB as all of them are equally impressive. Of course, nothing novel about this and this stack is already being used by many, but not many know that the ‘E’ stands for ‘Eh?’ pronounced with a Scottish accent. So when you use this stack, you get to tell your friends – “We use GAME in our company – Grails, AngularJS, MongoDB, Eh?” (perhaps with a quirkly smile).

Though Grails and AngularJS seem to compete on what they do, I prefer to keep some things on server-side, because Grails is a joy to code with configuration and business logic. The nice thing is AngularJS syntax is very much Grails-y. There are a few good online examples of using these two, but I didnt find a step-by-step quick start guide anywhere. So if you are planning to introduce AngularJS into your Grails projects, try these steps:

Notes:

1. It is not really required to use angularjs grails plugin. You can directly use your preferred angular.js version
2. If you are using IntelliJ, enable the AngularJS plugin. This gives you intellisense for angularjs directives
3. You can use angularjs with both resources and asset-pipeline plugin. I am starting to prefer asset-pipeline plugin, because all dependencies are kept within js itself (instead of ApplicationResources.groovy). The asset-pipeline gsps are a bit simpler to use than the resources.

Step 1: BuildConfig.groovy

plugins {
runtime “:asset-pipeline:1.0.4”
}

Step 2: Asset-pipeline directories

grails refresh-dependencies will create grails-app/assets/* directories. Move your existing resources from web-app into this directory appropriately.

Step 3: Add angularjs library and application.js

grails-app/assets/images/*
grails-app/assets/javascripts/angular/angular-1.0.8.js //AngularJS library
grails-app/assets/javascripts/my-angular.js //My AngularJS code (controllers, unit test etc)
grails-app/assets/javascripts/application.js //Application.js that wires all JS libraries

application.js

In asset-pipeline, all dependencies can be declared within the js itself. Here is the application.js (the root of js files):

//=require jquery
//=require angular/angular-1.0.8.js
//=require angular/my-angular.js
//=require_tree views
//=require_self

Step 4: Update main.gsp layout page

The layouts, main.gsp is slightly different using asset tags.

<head>
… meta tags …
<asset:link rel=”shortcut-icon” href=”favicon.ico” type=”image/x-icon”/>
<asset:link rel=”apple-touch-icon” href=”apple-touch-icon.png” />
<asset:link rel=”apple-touch-icon” href=”apple-touch-icon.png” sizes=”114×114″/>

<asset:javascript src=”application.js” />
<asset:stylesheet href=”main.css”/>
<asset:stylesheet href=”mobile.css” />
<g:layoutHead/>
</head>

<div id=”grailsLogo” role=”banner” style=”float: left”>
<asset:image src=”mylogo.jpg” alt=”MyLogo” height=”100″ />
%{–<img src=”${resource(dir: ‘images’, file: ‘grails_logo.jpg’)}” alt=”grails-logo” height=”100″/>–}%
</div>

Step 5: Add sample angularjs code:

grails-app/assets/javascripts/my-angular.js

function HomeController($scope) {
$scope.myDate = new Date();
}

grails-app/views/angularsample/index.gsp

<%@ page contentType=”text/html;charset=UTF-8″ %>
<html ng-app>
<head>
<meta name=”layout” content=”main”>
<title></title>
</head>

<body>
<div id=”page-body” role=”main”>
<div ng-controller=”HomeController” >
{{myDate}}
</div>
</body>
</html>

Step 6: Verify

Goto http://localhost:8080/app/angularsample/index

Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: