Saturday, August 10, 2013

Changing workflow from Java to Node.js (JSF to JavaScript)

Over the last year I've been working in a small team on an ambitious project to build a web application that will bring together information from a range of disparate sources within the company and provide all of the key information in a concise manner. It started out as a Java web application generated from a Maven Archetype with dependencies on JSF 2.1, Spring, Hibernate, and Primefaces.

This tried and tested workflow meant that the project was able to advance at a good pace. As the application grew however there seemed to be an ever increasing battle with JSF. We're dealing with a lot of dynamic content on our pages and although our web-app was good it just didn't have the speed we wanted.

The decision was made to move away from JSF and Spring in favour of using a Javascript MVC framework. The application was split into server-side code that would provide a REST interface and our client-side resources. We still use Java for the backend which connects to our various systems and provides a the API for the UI to connect to.

Using this approach all the required layout data is sent to the users browser during the initial page load. After that, most of the data going back and forth is just json. When the browser receives a new json object, it can be added to the page using the appropriate template which is already available. Changing to this new way of doing things has made a massive improvement to the user experience.

The new front end is built using a collection of tools that are run using Node. So instead of Maven, Tomcat, Spring, JSF, Primefaces, and the like, we're now using:
Node.js
Bower
Grunt
Handlebars
Yeoman
Ember
LESS or Sass
Bootstrap
So there's a fair amount of reading and tutorials to do to get up to speed but results more than make up for the initial learning curve.

The new user interface started life using a scaffolding tool called Yeoman. Much like using Maven archetypes, Yeoman can be used to generate a project structure for you based on a variety of available generators such as generator-webapp, generator-ember, generator-heroku, generator-chromeapp, generator-firefox-os, and so on. Yeoman should be installed globally using NPM:
npm install -g yo
The install will also include Grunt and Bower. Grunt is used to build your project and Bower handles dependencies such as Bootstrap and other client-side stuff.

There are various client-side MVC frameworks around, the two major contenders being Ember and AngularJS. We went with Ember (more on this in future posts), so the next step is to install the generator for an Ember application:
npm install -g generator-ember
Before using the Ember generator you need to make sure you have ruby & compass installed. You'll also need to install 'grunt-contrib-compass' via NPM:
sudo gem install compass
sudo npm install -g grunt-contrib-compass
By now you should be ready to generate an Ember web app:
yo ember
This will download various packages and create your project structure. When finished you should see the following files and directories in your current directory:
app
node_modules
test
Gruntfile.js
bower.json
package.json
Yeomans job is now done. From now on you'll just need to use Grunt & Bower. When updating or adding dependencies to bower.json you'll need to run 'bower update' or 'bower install'. For now though why not start the application up, just run:
grunt server

No comments: