Using FreeMarker Templates in a Grails App

I've started in a new team at my job.  We're creating an admin system that is going to take the functionality of several disparate systems and put them all under one UI.  Since we're writing a whole new app from scratch that will interface with existing systems, we had our choice of technologies (within reason) and frameworks.  We ended up choosing Grails because we figured it would be easy to integrate with our other systems and provide us with easy to create RESTful services.

One of our requirements was to use FreeMarker to generate the HTML of our UI.  This is a  requirement because we're using FreeMarker in other areas and we've created a development tool that uses FreeMarker in addition to other front end technologies (JS, SASS).

The problem is that Grails wants to use GSPs (Grails Server Pages), which are like JSPs (and, in fact, compile down to JSPs).  Grails has the ability to incorporate third-party plugins into your project, and there's a FreeMarker plugin for Grails.  Unfortunately, the plugin was made for Grails 1.2 and we're trying to use Grails 2.2.1.  I tried for two days to try to get the FreeMarker plugin to work, but it just didn't seem to do anything.  It was a frustrating situation.

Having read a lot of Grails documentation over the last few days, I found that you could configure Grails similarly to how you configure a Spring application.  You put that configuration in the resources.groovy file.

import org.springframework.web.servlet.view.freemarker.FreeMarkerConfigurer
import org.springframework.web.servlet.view.freemarker.FreeMarkerViewResolver

// Place your Spring DSL code here
beans = {
 freemarkerConfig(FreeMarkerConfigurer) {
  templateLoaderPath = "/"
 }
 viewResolver(FreeMarkerViewResolver) {
  cache = "false"
  prefix = "bin/freemarker"
  suffix = ".ftl"
  exposeSpringMacroHelpers = "true"
 }
}

Spring configuration is, of course, XML and this is a Grails closure.  That part wasn't hard to convert.  You can find an example of how to configure FreeMarker in a Spring app looks like, here.  The only other thing we had to do was to put the line below into our BuildConfig.groovy file.

dependencies {
 ...
 runtime "org.freemarker:freemarker:latest.release"
 ...
}

Now, the only thing we had to figure out was where to put the FreeMarker templates.  At first, we had them in our views folder where the GSPs went, but we were getting 404s when we ran the app.  After some debugging (thanks Roy for helping debug!) we figured out that the template loader was looking for the templates in the web-app folder.  That was easy enough to fix, we copied our templates from the views folder over to the web-app folder.  After that, everything worked just fine!

So, to recap, we added a typical Spring configuration to the resources.groovy file, added the FreeMarker jar as a runtime dependency in the BuildConfig.groovy file and put our templates into the web-app folder (in the folder configured in the prefix of the viewResolver).

The solution was frustratingly simple after we figured it out.  I wrote this post because I researched and experimented on whether this was possible or not for over two days without any success.  Hopefully this helps anyone else who is trying to use FreeMarker in their Grails app.

If you're like me, though, you want to see more.  Here's an example of a generic Controller:

class ApplicationController {

    static defaultAction = "show"

    GrailsApplication grailsApplication

    def show() {
        [model: [version: getAppVersion()]]
    }

    private getAppVersion() {
        def metadata = grailsApplication.metadata
        return metadata['app.version']
    }
}

It has one public method, show.  We want that when you navigate to /app-name/application or /app-name/application/show that it displays the version of the app.  I created a template, /web-app/application/show.ftl.  Now, the template contents are:

hello world<br>
${model.version}

When I navigate to /app-name/application/show, I get:




Which is as expected.  Pretty slick.  We're still at the beginning, but this should allow us to borrow front -end devs from other teams since they'll already understand the view technology and we'll be using the same tools that their teams use.

What it Means to be a Consultant

It occurred to me the other day that a lot of people don't really know what I do and how it's different from what a lot of other people do in the IT industry.  If you want a detailed definition of IT, you can go here.   Basically, we make computer systems that do the things we're asked to make them do (most of the time!).  This industry consists of more jobs than just developers and engineers, but I'm not going to explain about the different jobs because it's unimportant to the topic.

I've been working in IT for over seven years now.  For most of that time, I've been a Consultant.  What does that mean?  It means is that I work for a company who sells my services to another company for a fee.  As a Consultant, I have a full-time job independent on whether or not my company has a contract to sell my work to another company.  This is an important distinction from other people who work in IT.  There are three other groups: Contractors, Full-time Employees (FTEs), and Offshore.

Consultant vs. Contractor

Contractors are people who contract directly to the customer, without an intermediate employer, like I have.  This normally means that the Contractor is taking home more pay, but they are not receiving any benefits (i.e. insurance).  Contractors, by definition, are bound to a contract with their customer, but once that contract is complete, they can either renew the contract (assuming their customer wants that), or move on to another customer.  This is similar to me, but my employer also has a say in where I go.  Contractors typically have to find their own gigs, or pay a placement agency to do so for them.  My employer finds my gigs for me and pays me a full wage when I'm on the bench, if they can't find anything for me.  When a Contractor doesn't have a gig, that person isn't earning a wage.

Consultant vs. Full-time Employee

The first similarity is that a Consultant and an FTE are both fully employed, complete with benefits.  When I'm working for a customer, I behave like that customer is my employer.  When most people ask, I don't say I work for Daugherty Business Solutions, I say I work at Best Buy as a Consultant from Daugherty Business Solutions.  If I'm in a hurry, or don't want to confuse the issue, I just say that I work at Best Buy.  This is also becomes one of the hardest parts of being a Consultant.  When it's time to leave one customer for another one, I've already developed an affinity for the workplace and the people who I have worked with there.  I've worked at eight different customers in the seven years I've been a Consultant.  I'm still in contact with people from those customers through Facebook, or Twitter, etc.

Consultant vs. Offshore

The main difference here is that I work at the customer's location.  Offshore people are typically employees of a company located away from the customer's location (either in another country, or another part of the same country).  As such, I get a lot of face-to-face interactions that the Offshore people don't get.  From my experience, this helps me produce better results.  I've worked with Offshore teams before and the results are always hit or miss.  The main benefit, of course, is that the costs of Offshoring are greatly reduced compared with what a company will pay for my services.  This is a real, calculable benefit, but you should also pay attention to the adage, "you get what you pay for".

Why am I a Consultant?

A Contractor makes more, so why be a Consultant?  There are several reasons for this.  I'm lazy and don't want to have to find my own employment and I'm too cheap to pay someone to do that for me.  Also, I don't have to worry about having a gap of employment when my current contract ends.  If my employer can't find something right away, they'll put me on the bench and I'll do some internal work until they find something.  This is the biggest benefit to me.  The bench is no fun, but I'm still getting paid and I can use the time to improve my skill base or bring some value to my employer through an internal projects.

You can get stability from being a Full-time Employee, why not do that?  Stability there comes with a price, monotony.  If I end up not liking a customer for any reason (commute, people, atmosphere, etc.), I can request not to be renewed there when the contract is complete.  As stated before, I don't have to find a new job then, I can just wait until my employer has found one.  Also, not every company uses the same technology stack to develop their systems.  Moving from one customer to another can increase your skill base and your personal network.

As for Offshore, until companies in the US start selling Offshore services to India and China as their labor costs increase, I'm not going to even begin to think about that.

Summary

Overall, I'm happy with my current role as a Consultant.  I could see myself doing something else, but I just don't think that I'd be as happy in those roles as I feel now.  I have good flexibility, careeer mobility and stability.

Javascript TDD/BDD/Unit Testing

I've been doing some pretty cool stuff at work lately and I think it's time for me to share some of the cool things that we're doing.  Web development isn't anything new, I've been writing HTML since I was 12 years old, but it has changed quite a bit since I wrote my first, very simple, web pages.

Another thing that isn't new for me is Javascript, but I never really got that into it or relied on it to do anything powerful.  Since starting at Best Buy, I've really gotten good at Javascript and have realized that it is quite powerful and can do a lot of good for a website.  I've also realized that it can also do a lot of harm to a website.  One thing that a lot of people omit from Javascript development is testing.  A lot of people consider testing their scripts in the browser to be adequate for their purposes.  I disagree.  Coming from back end systems, I know that thorough testing is very important and I think that this is a component of front end systems that has been lacking across the industry.  That being said, there are ways to automatically test your Javascript without using a browser.

One of the goals of the team I'm on is to introduce an automated testing tool to test Javascript automatically when the project is built.  Our build is written using ant, which I hadn't used since college, but since it's well documented, I didn't have any trouble picking it up again.  Also, I'm using Eclipse as my IDE, so it supports ant syntax highlighting and parsing, which is very helpful.  Ant is very powerful, but since it's written like XML, it can be hard to write complicated constructs like looping and conditions, but we've made it work for us, so far.

I was put in charge of incorporating Code Quality tools into our build.  At first, this was a little overwhelming.  I was just starting to get good at Javascript development and didn't have any experience with testing tools for it, but I started doing research on the internet and quickly found some testing frameworks that I didn't think would be hard to incorporate into our build.  We settled on using Jasmine and I worked on finding a way so that we could call our spec scripts from our build.

This started the frustrating part of our journey.  The people who built Jasmine don't support the different ways to launch the tool (like from an ant build), but only the framework itself.  Okay, I can overcome this, there are some open source tools that I can use listed right on their page.  I started with Jasmine-Node since we were using Node.js for our local web server to test our pages.  I quickly realized that this wouldn't work for us since Jasmine-Node doesn't create a DOM and a lot of our Javascript relies on a DOM in one way or another.

My next attempt was to try Node-Jasmine-DOM.  It has DOM support and Jasmine integration, so I thought I was getting close.  I incorporated it in the build and got it to run in the browser, but there's an aspect to Node development that I didn't realize until it was too late.  Node makes it really easy to use other Node tools as dependencies in the tool you are building.  This is great for reuse, but dependencies are called that for a reason.  One of the dependencies that the Node-Jasmine-DOM tool used had a defect in it and that was blocking our scripts from being tested in the build.  I waited patiently for a couple of weeks after submitting the bug to the owners of the dependent tool, and there was initially some good back and forth about it for a while and someone submitted a workaround for the bug.  I was excited and tried it out on my machine, but their workaround didn't work for mem (in Mac OSX), but worked in Windows.  I went back to the forum and they had closed my defect, so I commented that the workaround didn't work for me and I needed another way to make it work for me.  Another week of waiting without a response and I decided to pursue another way to run our tests.

I started my new search by trying to find a tool that would run Javascript straight from a command-line.  I would do myself what Node-Jasmine-DOM was trying to do (create a DOM and insert Jasmine).  Enter Rhino and Env.js.  I found a blog that had done this before and I was all set.  It took me less than a day to incorporate these new tools into the build and I was immediately running our specs from the build.  At the same time that I was ecstatic to be finally done with this, I was very frustrated that I had wasted so much time trying some of these other tools.

For those curious about what exactly I did, read on.  For those who don't want the technical details, thanks for reading this far!  This next part may not be for you as it will be pretty technical.

Our test target in our ant build does a few steps to run the spec scripts.  The first step is to identify the pages that need testing and has some logic built into it for that.  The next step is to convert these pages into spec runners (example), this means that I needed to insert references to our spec.js files and the Jasmine Javascript files.  Since I wanted to test the Javascript on the page, I just copied the page, changed the extension to *.runner.html and inserted the appropriate spec and Jasmine scripts.

The next step that the build does is to get the list of runner files and run them.  I created an ant macro for this step.  The Build-Doctor guy provided the envjs.bootstrap.js file that I started with, but later customized.  His was very simple and was basically just a for loop that told Envjs to load a page.  I found that that wouldn't work for more than one runner, so I changed it a bit to reload Envjs at the beginning of the loop and then load the runner file.  I also added some console.log entries so that the build is more vocal about what it's doing.

Here's where I got a little bold and changed the Jasmine.js and Env.js files to eliminate some extra console.log calls that I didn't feel were required and I added some in a couple of places where I wanted visibility.  In the end, it looks great in the build and it creates JUnit style reports that our Jenkins CI server can interpret.

I was planning on covering the other major aspect of our build, Freemarker, but this post is getting pretty long, so I'll save that for another day.  Below are some examples of what I did in our build.

This is the macro I wrote in our ant build.

<macrodef name="runRunnerList">
 <attribute name="runnerList" />
 <sequential>
  <echo message="Running files: @{runnerList}" />
  <exec executable="java">
   <arg line="-jar ${dir.lib}/java/js.jar -opt -1 lib/javascript/envjs.bootstrap.js @{runnerList}" />
  </exec>
 </sequential>
</macrodef>

This is the results of running a spec in our build as seen in the terminal.

     [exec] Launching runner: /trunk/bin/debug/_slider/_sliderTest.runner.html
     [exec] 
     [exec] Runner Started.
     [exec] _slider : should have 100 hundred items after the method addItem is called 100 times ... 
     [exec] Passed.
     [exec] _slider : should have 99 items after the method removeItem is called ... 
     [exec] Passed.
     [exec] _slider : should have zero items after the method removeAllItems is called ... 
     [exec] Passed.
     [exec] _slider : should show slider when content extends past the width of the slider ... 
     [exec] ***FAILED***
     [exec] _slider : should hide slider when content does not extend past the width of the slider ... 
     [exec] Passed.
     [exec] _slider : should remove padding from the left side of the viewport ... 
     [exec] Passed.
     [exec] _slider : should add the class bby-slider-item-first to the first item in the slider ... 
     [exec] Passed.
     [exec] _slider : should recieve the second item out of five and the HTML should match ... 
     [exec] Passed.
     [exec] _slider: 7 of 8 passed.
     [exec] Runner Finished.
     [exec] 
     [exec] Done with runner: /trunk/bin/debug/_slider/_sliderTest.runner.html

This is one of our runner files. The highlighted parts are what the build inserts into the file.

<!DOCTYPE HTML><html lang="en"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link href="../css/__common/__common.css" rel="stylesheet" type="text/css" media="all">
<link href="../css/_slider/_slider.css" rel="stylesheet" type="text/css" media="all">
<script type="text/javascript" src="../js/__common/libraries.js"></script>
<script type="text/javascript" src="../js/_slider/_slider.js"></script>
<link rel="stylesheet" type="text/css" href="../js/lib/jasmine-1.2.0/jasmine.css" />
<script src="../js/lib/jasmine-1.2.0/jasmine.js"></script>
<script src="../js/lib/jasmine-1.2.0/jasmine-html.js"></script>
<script type="text/javascript" src="../js/specs/_slider.spec.js"></script>
</head><body>
<script src="../js/lib/jasmine-dom/jasmine-dom-matchers.js"></script>
<script src="../js/lib/jasmine-dom/jasmine-dom-fixtures.js"></script>
<script src="../js/lib/jasmine.console_reporter.js"></script>
<script src="../js/lib/jasmine.junit_reporter.js"></script>
<script type="text/javascript">
$(function() {
    jasmine.getEnv().addReporter(new jasmine.JUnitXmlReporter());
    jasmine.getEnv().currentRunner_.name = "__common";
    jasmine.getEnv().execute();
})
</script></body></html>

I will note here that most of our runner files have actual content in the body. The specs for this runner insert some test content into the body before the spec is run. The scripts in the body are inserted just before the </body> tag.

Project Euler

I've always had a fondness for math.  I've always been pretty good at solving math problems too.  Today, a friend at work made me aware of Project Euler.  For those of you who don't know (probably most of you), Project Euler is "a series of challenging mathematical/computer programming problems that will require more than just mathematical insights to solve".  Man, solving math problems with programming?  Where do I sign up?

So, I've begun my struggle to get through the 381 problems listed on the site.  Problems 1 and 2 were easy, things that we had to do in college.  Problem 3 is a little tougher, but still pretty easy.  That's how far I've gotten in an hour.  I'm going to keep going though, I'll update the blog with my progress occassionally.

Spoiler alert: I'm posting answers to problems 1 and 2 below.  Don't read if you're going to attempt this.  I'm using Java as my language of choice to solve these problems.

Problem 1:

If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9. The sum of these multiples is 23. Find the sum of all the multiples of 3 or 5 below 1000.

I first solved this recursively, but was getting stack overflow errors, so I went to the simpler method of brute force.

private static int MAX = 1000;
private static int calculate() {
int sum = 0;
for(int index = 0; index < MAXindex++)
if(index % 3 == 0 || index % 5 == 0)
sum += index;
return sum;
} //end of calculate method

Problem 2:

Each new term in the Fibonacci sequence is generated by adding the previous two terms. By starting with 1 and 2, the first 10 terms will be: 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, ...  By considering the terms in the Fibonacci sequence whose values do not exceed four million, find the sum of the even-valued terms.

private static int MAX = 4000000;
private static int calculate() {
int sum = 0;
int first = 1;
int second = 2;
while(second <= MAX) {
int temp = first + second;
if(second % 2 == 0)
sum += second;
first = second;
second = temp;
} //end of while loop
return sum;
} //end of calculate method

There you have it.  Notice that I haven't posted the results of running these.  Gotta leave something to you guys!