Tips for working with front-end in Grails

I have implemented few web projects with Grails and some techniques while working with Grails front-end turned out to be better than other. When I didn’t follow them later on I usually had to refactor the code and did it the correct way.

If you are reading this blog you noticed that I write very often about developing front-end with Grails. The reason is not that I am the best in the front-end but the reason is that I am the worst in the front-end. I am back-end developer and what I was missing in the majority of web frameworks was impossibility to make front-end more modular. In Grails this is easily to achieve thanks to Grails templates and tags. And then you are almost to code in the normal java code.

But come back to tips.

Tip 1: Always create one gsp page per state of the result.

Tip 2: Use templates and tags to make your pages more modular.

Tip 3: When ever it gives sense send custom model classes to the gsp page (not the domain classes).

Well tips are nothing without some example. As an example I will take my latest project fun things to do with kids.

In the first installment home page had following responsibilities:

• As a starting point for visitors
• To display found places to go with kids
• To inform user that the city provided cannot be uniquely identified (there is more than one city with provided name)
• To inform user that no attractions were found around provided city

As you can see that is obvious break of the SRP (single responsibility principle). Because of too much responsibilities the model I was sending to the page was quite complex and the page contained number of if blocks. And you must admit that having if blocks in the html page is not the best practice. Another side effect was that page had about 300 lines that is simply too much.

So what I did? Well, of course I did some refactoring.

I have created one page per responsibility and depending on result controller decide which page to display and provides correct data model (is this maybe kind of strategy pattern?). This way it is much easier to understand what pages are doing. And now they are up to 30 lines long.

But if you check pages you can see they are quite similar:

To see home page navigate to: spend day with kids
To see page with results navigate to: things to do with kids in Nottingham
To see page where there are multiple cities e.g. search for Malinovo. Select Malinovo, Slovakia to see places to visit nearby my home :)
To see page where there are no results check e.g. for Belgrade.

If you checked all these pages you can notice that they are very similar but little bit different. So how do you solve similarities. Very easy. Use templates and tags.

And the last but not the least, it is obvious that the data models delivered to the pages can be quite different and even some cases need not to contain any domain classes.

So I hope that those tips will help you while working on your own grails projects.