A Sample Web Application with Twitter Bootstrap, Backbone JS, RESTFul and J2EE/JPA backend.

In this post, I want to share with you my passion for cutting-edge web technologies and I want to demonstrate how to build modern full-stack web applications with lightweight frontend layer (entirely built up with Javascript and HTML techs), RestFul web services and J2EE/JPA backend.

Inspired by Christophe Coenraets‘ blog that I usually follow and read, I have decided to make my own app realizing the Java Backend that it is not still implemented in Christophe’s sample app Employee Directory.

To do this I have created an application called Account Manager. Do you know how many username and passwords you need to remember for each internet service and social network account ? Well,  the aim of this sample app is to organize your internet account data ( name, username, password, etc. ) in a good-looking web app, far away from desktop and old-style applications.

This is a sample app so I have overlooked security and cryptography topics ( like hashing of password, etc.)  on purpose.

You can run an hosted version of the application on my OpenShift server @

http://accountsmanager-ccarella.rhcloud.com

and you can find the source code on my GitHub repository @

https://github.com/carminecarella/Accounts_Manager

Some screenshots of Account Manager. The application consists of an home page,

accmansc1

a page Accounts with the list of accounts with a subset of information displayed and pagination too,

accmansc2

for each account, a detail page where you can modify account’s data, upload a picture and delete the account itself.

accmansc4

Technology Stack

The technology stack used in this app is showed below:

setoftechs

Some considerations:

  • A front-end layer essentially built up with Javascript  is inclined to a lack of structure in the code and it doesn’t take long before it becomes a mess. For this reason, MVC Javascript frameworks (like Backbone JS or Angular JS ) give us help to structure your code (making it more readable)  and to make your app more flexible.
  • The powerful abstraction that RestFul services provide, let you to completely separate the back-end layer from front-end one. Moreover, Backbone JS lets to connect it all to your existing API over a RESTful JSON interface in a simple way.
  • As ORM framework I have chosen to use JPA with Hibernate implementation. In my code you will see that I use generic JPA API to write queries in order to not tie the database layer to a specific implementation. In this way, you can switch easily from Hibernate to Oracle TopLink for istance.

Architecture

In the picture below is showed the full-stack architecture of Account Manager.

arc

Code Highlights

Frontend layer

The front-end layer is built up with Twitter Bootstrap, Backbone JS and Underscore JS. Bootstrap is a front-end framework and I have used it for building a clear and intuitive GUI. Underscore JS helps to use templating for splitting the code on several html pages. Backbone JS is used for managing GUI’s events, navigation between html pages and to communicate with RestFul services and Java backend.

Backend layer

The RestFul classes use the interface a session bean to go down in the stack, and the implementation of these interfaces (the session bean itself) are the unique access point for communicating with the database layer.

In this project is widely used the Dependency Injection pattern. So you will find code like @EJB, for istance, to  let the container performs injection when the component is created.

The interfaces used by RESTFul classes are annotated with @Local annotation.  The meaning of that is to expose the business methods to local clients which are running in same application server. It sounds a good choice for my purpose as the client side and server one are in the same project which runs on the same JBoss AS server.

Next steps

I will came back soon with more posts about implementation details of some functionalities of Account Manager.