Angular & Rails: A Perfect Match
The example application mentioned in this post can be found here: https://justcheckin.herokuapp.com
Ruby on Rails has been around for a good amount of time. It is a popular choice for many startups and side projects due to its keen ability to keep things simple. A simple app from development to deployment can be done in less than an hour if you know what you’re doing. If you need a technical solution done quickly and scalability is not your end concern (an entire conversation in itself), Ruby on Rails is a great choice.
Now one of the big drawbacks of Ruby on Rails, in my opinion, is the use of JavaScript within the View layer of the application. With the trend of many applications leading towards not having to reload the page to depict the necessary information, Rails really lacks in this area with the use of JavaScript. There are many ways to get around this by rendering JS ERBs from the controller, having listeners on certain clicks to execute JavaScript, or even executing inline within the HTML, but all of them feel kind of dirty/hackish. Well it just so happens there is an easy solution to this, and it comes in the form a framework called AngularJS.
JavaScript frameworks are extremely popular nowadays and are used to alleviate the pain of integrating JavaScript into your application. JavaScript is what makes the browser come to life when you use a website. By popping up notifications on the screen, letting you switch between tabs, or rendering a new object on the page if you select a button, JavaScript breathes life into any web application.
AngularJS is really popular due to it being easy to work with and the fact that you can bind a lot of behavior to your HTML views without having to write that much JavaScript. Angular has a concept called Directives, which let you bind behavior to specific elements on your page. Directives can perform things such as showing, hiding, repeating, and much more. You can also create custom directives that will let you make your views more modular and reusable. So why does it make sense to use Rails and Angular together?
Well Ruby on Rails comes with the ability to make your controller endpoints RESTful out-of-the-box. So making all of your endpoints available to pull records and post new records can be easily made accessible as an API. This will let you integrate with AngularJS very easily with their $http services. AngularJS has three methods to retrieve data from an endpoint: a Service, Factory, and Provider. These services can be injected into a given angular controller and allow you to interact with the endpoint, which then in turn can be bound to DOM objects on the page. Once you get it up and running, it is pretty seamless to interact with your API fluidly throughout your AngularJS application. So once you get your application up and running with Rails and AngularJS, iterating and adding new endpoints becomes very easy and allows you to quickly build out features and enhancements.
In hopes of showing off how easy both are to work with, I whipped up a simple application call CheckIn, which tracks basic data from the user’s browser as they checkin to the site. Then it shows you this data in a graphical manner as more checkins occur. It leverages AngularJS as the frontend and Ruby on Rails as the backend and only took a few hours to create and deploy. Over the next few weeks I will be following up this post with more posts around how to create an app like this.