Reasons My Code Is Crying

.java, .js, .* - by Pieter Grobler

Creating an Application With Wildfly (Java EE REST) and backbone.js - Part 3

So far I have:

In this post I will ramble on about setting up the environment for the front-end, our state-of-the-art AMD-module enabled backbone.js application.

For the sake of brevity, I will exclude the following requirements from the explanation - but they will indeed be necessary to be in place if you wanted to play along:

These are all brilliant platforms on whom we will piggy-back in order to automate the otherwise tedious bits of the development process. In fact, if you haven’t started using these as a Javascript developer, I would now use the opportunity to strongly argue that you look into them now. (I’ll wait here.)

By the way, I, like many other people, despise unfounded strong opinions around platforms, frameworks and libraries. That said, here’s mine: If you consider using Subversion on a new project and you have control over which version control software to use, don’t. Just don’t. Use Git.

Now, where was I? Let us extend the capability of Grunt to assist us with our project scaffolding. That is, instead of creating our own skeletal folder and file structures, we’ll instead opt for the magic that is grunt-init. If you haven’t seen this yet, prepare to be amazed. This is the maven archetype:generate equivalent for Javascript.

First, install it, because it has been split of recently from the main grunt project. After successful installation, which you can verify by opening the terminal and typing

grunt-init --version

I’d love for you to navigate to ~/.grunt-init, or %USERPROFILE%/.grunt-init if you are on Windows, like me. We now want to clone a Git repository from Github, resulting in a folder in this location called standardstack. That name is not well chosen, and I do feel guilty about it. Nevertheless, carry on by now executing the following:

git clone https://github.com/onehumanunit/grunt-init-standardstack.git standardstack

Now create a folder for your new project. I’ve picked this location:

c:/development/todo

Point a terminal there (cd c:/development/todolist), and simply type:

grunt-init standardstack

It will prompt you for a project name and title, and subsequently give you a list of further commands to execute. Execute them one after the other, just as instructed:

npm install
bower install
grunt

I encourage you to now look inside that project folder and find the awe-inspiring structure there, all set up and welcoming you as its hero who will raise it from its skeletal simplicity into the beast that it will become.

grunt-init standardstack

I always cry here. No, be strong. We soldier on.

If we could set up a server and point an alias to the /dist folder there, we could simply add changes to any of our files, and refresh the browser to see the updates. This is made possible by virtue of grunt’s watch task that listens in on changes in the specified folders.

To do that, let’s install WAMP and add an alias:

add alias step 1

add alias step 2

We can now point our browser to:

localhost/todolist/

and constantly refresh there after each change is saved in our project. Everything is concatenated, minified and compiled on the go.

Finally, I recommend one more tool - an IDE this time - Brackets. After some terrible sleepless nights, I have come to the point where I can definitely say Eclipse is just a bit too heavy for js development. I mean, I’ve allocated 4GB of juice to it - -Xmx4096m, having 16GB in total available. It doesn’t use all of that, to be fair, but it tries to help so much that it slows me down and I find myself waiting for it to catch up too often. Too often, I tell you. So, Brackets is my new best friend, and I haven’t looked back yet. Well, I have, but only to give Eclipse that look you give an ex.

So now, for those of you who are into that sort of thing, you could download the grunt and git extensions for Brackets, and manage everything inside the IDE. This is not a requirement, but I’ll tell you, I myself have done that, and I am still thrilled to have the grunt tasks listed in a sparkly GUI. It’s just nice.

I recommend the above setup for a broad range of projects. Automation is generally very rewarding. There is a plethora of very practical grunt-init powered setups out there. I challenge you to search grunt-init in GitHub. You’ll soon see what I mean.

This brings us to the end of this post. In the next one, we’ll create the to-do list. Thanks for reading!

Comments