CSC/ECE 517 Fall 2014/ch1b 34 kr

AngularJS + Rails

Overview

AngularJS is an open source client-side Javascript framework for creating web applications with dynamic web pages and is maintained by Google. AngularJS has extended HTML's syntax and implemented it with Model-View-Controller architecture so that the various components of Javascript can be expressed clearly. It provides functionalities like data binding and dependency injection which helps shorten the crude javascript code. It has a simple object model that supports testability and clean code organization.<ref>http://code.tutsplus.com/tutorials/5-awesome-angularjs-features--net-25651</ref>

Rails is an open source web application framework written in Ruby by David Heinemeier Hansson. It is extremely productive for developing database-backed web applications. It uses Model-View-Controller architecture and requires fewer total lines of code than other frameworks thus making it atleast ten times faster.

Background

AngularJS

AngularJS was developed by Misko Hevery and Adam Abrons at Brat Tech LLC in 2009 as the software behind an oline JSON storage service. Later, it was released as an open source library. The library is being developed and maintained by Hevery with his fellow Google employees.

Rails

Rails was extracted from Basecamp, a project management tool by 37signals but it was released as an open source project in July 2004. It gained fame after Apple decided to ship it with Mac OS X, which was released in October 2007.

Why AngularJS + Rails?

One of the key reasons of using AngularJs is API-Driven Application approach, i.e. separation of User Interface from back-end (Rails in our case). Increasing number of application these days (Rails Application) are building their own APIs which can they interface with mobile applications (like iOS), or other developer applications can communicate with their applications, and in our case to communicate with front-end applications. By following this paradigm, developers gets an opportunity to build a front-end as well as back-end APIs along with your application, it means front-end exposes its methods to the JSON API in the back-end and the front-end API can be clubbed with any back-end and vice-versa without any need for re-configuration.<ref>https://www.codeschool.com/courses/shaping-up-with-angular-js</ref>

So the question is why to club AngularJS with Rails and what are its advantages? AngularJS is a front-end framework, what this means is, it is designed to run on the client side, therefore for any real application requiring CRUD operations a back-end is necessary. This is where Rails comes into picture, it provides a back-end to the AngularJS application so that large amount of data can be stored in database. Another issue with using standalone AngularJS application is that it creates Single-page Applications (SPA), i.e. the same page or components on the page gets refreshed, which makes Search Engine Optimization extremely tricky, as a result the possibility of making the web page searchable reduces drastically. Whereas in case of Rails the web pages are rendered by Rails on the server, which makes them available to Google for SEO based search.<ref>http://joelhooks.com/blog/2013/09/15/why-i-built-an-angularjs-training-site-on-rails</ref>

Getting Started<ref>http://sebastien.saunier.me/blog/2014/02/04/angular--rails-with-no-fuss.html</ref>

Prerequisites

AngularJS

Following are the pre-requisites for learning AngularJS:<ref>http://angular-rails.com/</ref>

1. Moderate knowledge of HTML, JavaScript and CSS.
2. Basic Model-View-Controller concepts.
3. The Document Object Model.
4. JavaScript functions, events, and error handling.

Rails

1. Comprehensive knowledge of Ruby.
2. Moderate knowledge of databases.
3. Basic Model-View-Controller concepts.

Download AngularJS

Download AngularJS from AngularJS website. We need to download file: angular-mocks.js

Step 1: Creating Base Rails app

We will start with creating a basic Rails application that performs CRUD operations. We shall use PostgreSQL and Rspec here.

Lets call this application: Restauranteur <ref>http://www.honeybadger.io/blog/2013/12/11/beginners-guide-to-angular-js-rails</ref>

Initial Setup

To create project:

$ rails new restauranteur --database=postgresql --skip-test-unit

To create PostgresSQL user:

$ createuser -P -s -e restauranteur

Add Rspec to your Gemfile:

gem "rspec-rails", "~> 2.14.0"

Install Rspec

$ bundle install
$ rails g rspec:install

Create the database:

$ rake db:create

Step 2: Creating the Restaurant model

Our next step is to create a model class in Rails

$ rails generate scaffold restaurant name:string

Make sure that Restaurant Names are unique:

# db/migrate/[timestamp]_create_restaurants.rb

class CreateRestaurants < ActiveRecord::Migration
  def change
    create_table :restaurants do |t|
      t.string :name

      t.timestamps
    end

    # Add the following line
    add_index :restaurants, :name, unique: true
  end
end

Add this in Model:

class Restaurant < ActiveRecord::Base 
  validates :name, presence: true, uniqueness: { case_sensitive: false }
end

then run Migration

$ rake db:migrate

and finally Seed the database:

# db/seeds.rb

Restaurant.create([
  { name: "The French Laundry" },
  { name: "Chez Panisse" },
  { name: "Bouchon" },
  { name: "Noma" },
  { name: "Taco Bell" },
])

Step 3: Introduce AngularJS

Now we need to make use of the downloaded AngularJS, and move the files into app/assets/javascripts.

Add it to Asset Pipeline, to tell our application we need AngularJs and to make sure it gets loaded before other dependent files. Add the following lines:

//= require angular
//= require main

Now, AngularJS being an MVC framework requires its own Controller. Now we will create controller for it in directory /assets/javascripts/angular/controllers. Let's call the controller HomeCtrl

# app/assets/javascripts/angular/controllers/HomeCtrl.js.coffee

@restauranteur.controller 'HomeCtrl', ['$scope', ($scope) ->
  # Notice how this controller body is empty
]

Step 4: Create Templates and Modify Controller

Make changes in the layout:

<!-- app/views/layouts/application.html.erb -->

<html>         ==>   <html ng-app="restauranteur">

<%= yield %>   ==>   <div ng-view> <%= yield %> </div>

Make template for restaurants (this can be created anywhere), we are making it under public directory and create and index page:

<!-- public/templates/restaurants/index.html -->

<a href="/#">index</a>
<ul ng-repeat="restaurant in restaurants">
  <li><a ng-click="viewRestaurant(restaurant.id)">{{ restaurant.name }}</a></li>
</ul>

create Restaurant Index Controller

# app/assets/javascripts/angular/controllers/RestaurantIndexCtrl.js.coffee

@restauranteur.controller 'RestaurantIndexCtrl', ['$scope', '$location', '$http', ($scope, $location, $http) ->
  $scope.restaurants = []
  $http.get('./restaurants.json').success((data) ->
    $scope.restaurants = data
  )
]

Step 5: Adjust Routing in main.js

Now modify routing so that new Restaurant Index page is called.

# app/assets/javascripts/main.js.coffee

@restauranteur = angular.module('restauranteur', [])

@restauranteur.config(['$routeProvider', ($routeProvider) ->
  $routeProvider.
    when('/restaurants', {
      templateUrl: '../templates/restaurants/index.html',
      controller: 'RestaurantIndexCtrl'
    })
])

It's done! Now go to URI /#/restaurants to see list of Restaurants we added.

Testing

For testing we are going to use Rspec, Karma, and Jasmine framework. We start by first installing Karma server:

For Ubuntu

sudo npm install -g karma
sudo npm install -g karma-ng-scenario

For Windows

Install via Git bash

npm install -g karma

Step by step Testing Procedure

Create Test Folder

mkdir spec/javascripts

Write Tests

# spec/javascripts/controllers_spec.js.coffee

describe "Restauranteur controllers", ->
  beforeEach module("restauranteur")

  describe "RestaurantIndexCtrl", ->
    it "should set restaurants to an empty array", inject(($controller) ->
      scope = {}
      ctrl = $controller("RestaurantIndexCtrl",
        $scope: scope
      )
      expect(scope.restaurants.length).toBe 0
    )

Add Configurations

// spec/javascripts/restauranteur.conf.js

module.exports = function(config) {
  config.set({
    basePath: '../..',

    frameworks: ['jasmine'],

    autoWatch: true,

    preprocessors: {
      '**/*.coffee': 'coffee'
    }, 

    files: [
      'app/assets/javascripts/angular.js',
      'app/assets/javascripts/angular-mocks.js',
      'app/assets/javascripts/angular/controllers/RestaurantIndexCtrl.js.coffee',
      'app/assets/javascripts/angular/*',
      'spec/javascripts/*_spec.js.coffee'
    ]  
  });
};

Start Karma Server

karma start spec/javascripts/restauranteur.conf.js

Go to go to http://localhost:9876/ and test will run and be successful.

Comparison with other front-end frameworks

The most popular front end frameworks these days include AngularJS, BackboneJS and EmberJS. These can be compared on the basis of the following factors<ref>http://www.airpair.com/js/javascript-framework-comparison</ref>:

Community

Community is the most important factor to consider when choosing a framework as a strong and large community means strong support and help towards the framework. More questions will be answered, more tutorials will be available. In short, larger the community means more the number of resources to exploit.

So, if compared on the basis of community, AngularJS is the clear winner as there are more StackOverflow questions , YouTube tutorials, GitHub Contributors available for Angular then the rest of the frameworks. Also, in the recent years AngularJS has gained more and more popularity compared to the other two.

Framework Size

For a website to be successful, it should have good page load speed as users these days need good speed of browsing. In order to load pages fast, the front end framework should be as small as possible so that they can be loaded faster. If we compare the sizes of the frameworks, BackboneJS (6.5 kb) is the smallest among AngularJS(39.5 kb) and EmberJS(90 kb). But, BackboneJS needs UnderscoreJS(5 kb) and jQuery(32 kb) along with some other third party plugins which makes the size large. Thus, AngularJS is the clear winner among these frameworks.

Templating

Front end frameworks generally use different kind of templates to style their code in a specific way. There are many kinds of templates available that an be used. BackboneJS doesn't provide any templating engine of its own but AngularJS and EmberJS have there own templating system. The difference between the templating engines of the three frameworks can be understood from the following examples :

AngularJS

Angular's templating engine simply extends HTML syntax. It uses binding expressions to bind variables between controllers and models. These binding expressions are enclosed by doubly curly braces. For example:

<ul> 
  <li ng-repeat="recipe in recipes" 
     title="{{recipe.title}}"> 
    {{recipe.description}} 
  </li> 
</ul>

EmberJS

EmberJS uses Handlebars template engine. Handlebars is an extension of Mustache templating engine. It does not understand the Document Object Model structure so it is not aware of the context in which it is being used. It just does the simple string transformation. Another templating engine is being developed called HTMLBars which works on these flaws of the Handlebars. Since, HTMLBars is not yet ready therefore Handlebars is currently being used. For example:

<ul>
   {{#each recipes}}
     <li {{bind-attr title=name}}>
        {{desc}}
     </li>
   {{/each}}
</ul>

BackboneJS

BackboneJS doesn't have any templating engine of its own but it can be integrated with many third party templating engines. Since, Underscore is a Backbone dependency so it is used by default for the templating purposes. But, underscore has a very basic templating engine and it has to be used in the mix with javascript. For example:

<ul>
   <% _.each(recipes, function(recipe) { %> 
     <li title="<%- recipe.name %>"> 
       <%- recipe.desc %> 
     </li> 
   <% }); %>
</ul>

Reference Material

Following are the references to learn Ruby on which Rails is based :

1. Ruby Monk
2. Ruby Learning

Following are the references to learn Rails :

1. Rails for Zombies
2. Ruby on Rails Tutorial
3. Rails Guides

Following are the references to learn AngularJS :

1. AngularJS
2. AngularJS Tutorials
3. AngularJS Training Videos

References

<references/>

AngularJS + Rails<ref>http://rigor.com/wp-content/uploads/2014/09/angularjs+rails.jpg</ref>
Name	AngularJS + Rails
Category	Open Source Software
Type	Web Application Framework