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.
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:
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 yoThe 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.
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-emberBefore 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 compassBy now you should be ready to generate an Ember web app:
sudo npm install -g grunt-contrib-compass
yo emberThis will download various packages and create your project structure. When finished you should see the following files and directories in your current directory:
appYeomans 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: