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.

Advertisements

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

    • Hi suguna, if you can give me more details I would appreciate it. I have assumed that the code you download from github has to be run in your favorite IDE properly set up (maven, jboss AS, MySQL DB, etc)

  1. Ken says:

    Hey Friend, I use maven and eclipse Kepler… can you recommend a JavaScript editor plugin… something really nice that does it all… ooops and cannot forget… a debugger… that can do the same ? I have seen alot of attempts to pull all of this together with other frameworks but this is a very elegant concise snapshot of a minimal throw together that makes for a very good cookie cutter. Its very generous of you. I think my lesson for today will be integrated SHIRO and maybe I will steal the instance and property based security code from that broken down toy of a framework TYNAMO… how easy it is to watch and see people grow old. But this is Olympic grade… I Like ! : )

  2. Rishi says:

    Hi, thanks for sharing all the details about the project. One of the workflows I didn’t understand is how are you integrating all the HTML pages in tpl folder into index.html. Like when I open the browser I see the HomeView.html along with Index.html, did you integrate all of this in mystyle.css??

  3. Hi, the integration is done by the js function templateLoader in webapp/js/utils.js using underscore.js under the hood. Afterwards, this function is called by webapp/js/main.js in this way: templateLoader.load([“HeaderView”,”HomeView”,… ], passing the names of the views that reflect the name of the html files. Try to have a look at the js files I mentioned above. Hope this can help.
    Cheers.

  4. Hi,

    I have a question about your wonderfuly awesome example. Like it has helped me so much!

    I don’t understand the way you fill up the detailview page using the ID value of a specific account?

    account.fetch({success: function(){
    $(“#content”).html(new DetailsView({model: account}).el);
    $(‘#lastUpdate’).text(convertDate(account.get(‘modifyDate’)));
    }});

    Like how does this bit of code fill out the detailsview with the desired data?

    If you can elaborate on that i’d be really be at your debt!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s