This project aims to be the cleanest and most up to date way to build Web UI on a Java-based server.

Of course, this implies lots of framework and architecture choices which are mine and can be discussed.

This repo is in constant evolution but you can find in branches the major architectures switch. At this time, there is one old branche which is jQuery UI that I replaced by BackboneJS (I know that the two technologies are not the same but I still replaced on by the other).

This version is less ambitious than the previous one as there is only read only features, I apologize but have unfortunatly my own planning constraints.

My goal is to fully comment the code and the Git repository to explain how the different technologies are integrated.

As described in the main title, the major technologies are JPA 2, Spring 3.1 and Backbone JS 0.9 but this is the complete list of architecture choices:

• Hibernate 4.0 as JPA 2 implementation
• JPA 2 as persistence API
• Spring Data JPA 1.1 as DAO layer implementation
• Spring Framework 3.2 as main IoC container
• Spring MVC 3.2 as web framework
• Spring Data Rest 3.2 as REST exporter
• Spring Security 3.1 as security framework

• RequireJS 2.0 as JavaScript file and module loader
• jQuery 1.8 as main JavaScript framework
• BackboneJS 0.9 as Web UI structure
• Twitter Bootstrap as front-end framework

• Single-page application (even for the login)
• RESTful JSON API

This sections contains a quick description of the key integration points between all technologies with a link to the file involved.

Servlet 3.0 and Spring 3.1 adds support of full Java based configuration replacing web.xml and applicationContext.xml. It allows smaller and compiled configurations for building XML free applications.

This application demonstrate this new way of configuration. As I writing this, Spring Security doesn't implement XML free configuration. Security configuration and Maven configuration are the last XML file of the application.

Repository layer of the application is fully implemented by Spring Data JPA. The configuration is in the file applicationContext.xml with the namespace "jpa". As you can see, only the root package for repository interfaces is needed.

The Spring Data JPA implement standard JpaRepository interface methods and the specifics defined in the interface.

Spring Data Rest is very good new idea of Spring Source team and build a bridge from Spring Data to Spring MVC. It allows us to automatically published a Spring Data models.

Spring MVC is used to publish a more specialized service which is the ajax login. in very standard way. The DispatcherServlet is declared in the web.xml.

The web application respect the concept of Single-page application even for the login phase.

In order to do that, all the web application code (HTML, CSS, JS) is not secured but only the JSON RPC calls are. It's the JavaScript application which starts to check user authentication with the server and open a modal popup if needed.

In the Spring Security side, all is configured in applicationContext.xml, the filtering is triggered only on "/rest/*" with an exception on "/rest/login" to be able to log on. The standard Spring Security's configuration with a automatic form login is also removed and replaced by a simpler "403 Forbidden" handler.

The LoginController.java handles login request mapped with HTTP methods : GET for status, POST for login and DELETE for logout. This class is a little more tricky because there is sadly no standard "Ajax login" implemented in Spring Security and we have to manage Spring Security context.

Finally, there is the login.js module which handle login behaviors in the gui. It handles a globally accessible status variable, start with a checking on login status, open the login dialog and publish a logout function.

The JavaScript application is structured with the Asynchronous Module Definition (AMD) API. It structure the code with modules, handles JavaScript files loading and dependencies.

RequireJS is the implementation used to do this. The application's JavaScript bootstrap start in the index.html with the require.js script and a "data-main" attribute which target the main.js root script. This root script configure RequireJS, define some dependencies and bootstrap the application including the login module.

The Web UI is structured with Backcbone JS. All concepts of Backbone are used in the project : Model with the login status, Collections with the users and skills, View with all components of the interface : login popup and data grids, and finally Router which drive the Url hashtags listening.

All Backbone objects are defined as RequireJS modules with dependencies on js and text files.

Hateoas used in Spring Data Rest are structured JSON data which allow to abstract parsing and automatically construct Backbone models and collections to navigate into data.

Data mapping in the project are mostly generic and placed in a special Hateoas Backbone extension which implements this concept.