AngularJS and Rails integration. The AMEE way

Applying and experimenting with various client side technologies can help provide a attractive and engaging user experience. At AMEE we are applying AngularJS to obtain this. AngularJS is a framework developed and supported by Google that enables you to achieve a high testability plus rapid development and productivity. In addition, Angular helps extend HTML by using directives, which is part of the current trend towards the future approaches like Web Components. In this post, my purpose is to explain the way we integrate AngularJS with Rails to improve our data representations and offer an enriched user experience

Please, take a look at our template project for further details about the described configuration

The AMEE way: step by step

  • We render the different views of the webapp as HAML templates that will serve as assets.

  • Now, we manage the different views by using the ui.router library. This will define our views as a state machine and will allow navigation through different view states. In addition, ui-router can aggregate partial views in a single view, create nested views and resolve dependencies during transition states

  • We turn the backend into a REST service layer by skinning the Rails controller to an API- like controller

  • Use active serializers to take control over how and what information will be in the response to the client as JSON.

  • Apply Jasmine and Angular Mocks to do the tests.

Benefits and drawbacks:

We lose the helpers from Rails to perform the binding with the user interface. Instead, we keep the server from rendering the view, we skin the controller to an API-like one (because we only need to obtain, process and serialise the information), and therefore the controller is faster and more efficient. The service orientation permitted by the API REST treats the browser as an ordinary client by extending the application to other platforms and simply generating a new client for that API. Treating the HAML templates as static assets allows the browser to cache the resources, achieving a reduction in the network traffic and an improvement in the performance.

A note about scalability

During the integration process we face some scalability problems due to the big amount of data we usually manage. We overcome these problems by improving some ActiveRecord queries and mostly by changing the JSON serializer engine for OJ 


A list with some references that we found helpful in the process of integrate Ruby On Rails and AngularJS

Back to AMEE Blog