The last time Hackerfall tried to access this page, it returned a not found error. A cached version of the page is below, or clickhereto continue anyway

AngularJS + MongoDB: Goodbye middle tier? (part 1 of 2)

With the advent of client side JavaScript frameworks, it seems like the middle tier has become Java’s last resort. But as a Java developer myself, I have to admit there are compelling alternatives to a full-blown enterprise server. For this blog post, I want to push this thought to the limit and try out whether we really need the middle tier at all…

The tool set

For the build environment:

For the application stack:

A RESTful stack

Thus, the tech stack looks like this:

You can clearly see that something is lacking here – there’s no such thing as a middle tier. As MongoDB has been extended with a REST interface through RESTHeart and AngularJS has been extended with a REST interface through Restangular, these two tiers can communicate directly with each other.

The beauty of a RESTful API which is taken advantage of here is that

Technology choice

Please skip this section unless you’re interested in why I chose the technologies mentioned for my stack.

The example application

Based on above tech stack, I created a simple web application with CRUD functionality for these two business entities:

Each entity is uniquely identified by its id which is auto-generated on persist.

A customer can have one or more payments, and one payment is associated with exactly one customer. A customer of employment type

unemployed

must not have a company name.

There will be a master view (list of all entities) and a detail view (edit page for current entity) for the customer entity. The payments master view will be integrated in the detail view of the parent customer entity which provides editing options for its payments though popup windows.

Note that the complete source code of the example project is available on its GitHub repository.

This is actually a recreation of

the very same example application I created just two weeks ago with the server-side JSF stack

which, for me, added to the fun of creating a middle-tier-less application. (In fact, I even reused the HTML markup generated by the JSF application for this one.)

Setup

Setting up the whole stack really is just a matter of following the tutorials provided with each tool.

However, setting up Restangular for use with RESTHeart deserves some more explanation.

Restangular + RESTHeart

RESTHeart’s HAL+JSON document format doesn’t quite match Restangular’s default expectations, but luckily, Restangular provides a clever API to tweak its configuration.

Having Restangular included into the AngularJS application (script included, dependencies declared), one can configure Restangular like so:

angular.config(function (RestangularProvider) {
    RestangularProvider.setBaseUrl('http://localhost:8080/restangularOnMongoDb/');

    // we are mapping the id of each element to the _id field.
    RestangularProvider.setRestangularFields({
      id: "_id.$oid",
    });

    RestangularProvider.addResponseInterceptor(function (data, operation, what, url, response, deferred) {
        var extractedData;
        // look for getList operations
        if (operation === "getList") {
            // the actual entities are in the _embedded section
            extractedData = data._embedded['rh:doc'];
        } else {
            extractedData = data;
        }
        return extractedData;
    });
    
    RestangularProvider.addFullRequestInterceptor(function (data, operation, what, url) {
        if (operation !== "getList") {
            if (typeof data._etag !== 'undefined') {
                return {headers: {"If-Match": data._etag.$oid}};
            }
            if (typeof data._id.$oid === 'undefined') {
                data._id = null;
            }
        }
        return {};
    });
});

Continue reading on www.codebulb.ch