Fundamental Changes Between Environments of Fedena, Uzity & Flux: Experience with Ruby on Rails – Part I

Ruby (1)

 
During the course of working at Foradian for about 3 years, I had the chance to work as a developer in different applications including Fedena, Uzity and Flux. All three applications based on Ruby on Rails but in different versions of both rubies and rails. Fedena is an Education Institution Management System, Uzity is a Learning Management System(LMS) which was recently launched and Flux is an in-house task assignment tracker.
 
This is a series of articles comparing the different rails environments, beginning with this one covering the fundamental changes between environments of Fedena, Uzity and Flux.
 
In all of the three applications, the stable versions of both Ruby and Rails were set as the environment while the application development was initiated. The operating environment of the three are:
 

Fedena

Uzity

Flux

Ruby

1.8.7

1.9.2

2.1.1

Rails

2.3.5

3.2.1

4.0.5

 

CLI commands

 
Tasks like generating a rails application, starting the server, entering the console, creating its elements like models, controllers, views, migration etc, requires some terminal commands. These had also seen some major changes with these environments. While using rails 2.3.x, most commands were prefixed with script whereas it got replaced by ‘rails’ in versions 3.2 and 4.0.

 

Command

Fedena environment
(Rails 2.3.5)

Uzity environment
(Rails 3.2.1)

Flux environment
(Rails 4.0.5)

New application

rails <app name>

rails new <app name>

rails new <app name>

Start server

script/server

rails server
or
rails s

rails server
or
rails s

Open console

script/console

rails console
or
rails c

rails console
or
rails c

Generate

script/generate <generator>

rails generate <generator>
or
rails g <generator>

rails generate <generator>
or
rails g <generator>

Destroy

script/destroy

rails destroy <generator>
or
rails d <generator>

rails destroy <generator>
or
rails d <generator>

About

script/about

rake about

rake about

Plugin install

script/plugin install

rails plugin install

(feature removed)

 
The trouble while switching from a 3.2 version of rails or higher to 2.3.5 is the use of rails command. Any command following ‘rails’ will create a new app with the name in the folder.
 
Plugins & Gems
 
Plugins and gems can be used to expand the features and capabilities of a rails application. Both can be shared and reused. Plugins have to be loaded from the ‘vendor/plugins’ directory whereas the gem will be accessed through rubygems. Gems are packages as per the specifications of RubyGems and can be upgraded whenever needed, Also, a gem can define its dependencies and a gem can be used by more than one application. Plugin can be considered as an extension of Rails and need to be added manually in the application and hooked into the ‘init.rb’ file in order to use that. Plugins need to be installed and upgraded manually whereas gems can be managed centrally using bundler. Plugins are present in both Rails 2.3.x and rails 3.2. Plugins got deprecated with rails 3.2 which means it will no longer be supported by rails 4. Plugin is a good way to increase the capabilities of an app without modifying the base application. Plugin system is used in Fedena to add more and more features without modifying the core.
 
Asset pipeline
 
Asset pipeline was introduced by default in Rails 3.1. Prior to that its functionality could be added manually by using ‘sprockets’ gem. This technique is used to combine and minify javascript and stylesheets. Using Asset pipeline, assets can be centralized to a single file of the asset type and will be compressed. This can reduce the number of browser requests.To make the minified file unique and to prevent using the browser cache version, an md5 digest will be appended to the filename. The assets are located in app/assets folder and the javascripts and stylesheets have been moved into this folder from ‘public’ directory.
 
Asset loading in Uzity
 

Javascript and Stylesheets loading in Fedena

 
Bundler
 
In rails 2.3.x, the initial setup to get an app running was a tedious job due to the vagueness in specifying the gems. Bundler is a gem which can track and install exact versions of Gems needed in the project. The gem and their specified version will be added to a file, ‘Gemfile’ in the root folder of the application. Bundler was originated as a gem which could be added manually to the application and was later added by default in Rails version 3.2 and higher. Usage of bundler makes the application gem requirements much easier just by running the command ‘bundle install’. Entire set of gems unless version specified can be updated with a single command ‘bundle update’ to their latest stable versions. Bundler is present in Uzity and Flux. Bundler is not present in Fedena by default, but had been added in some cases.
 
Turboli nks
 
Like Bundler, Turbolinks is another gem which originated as a standalone gem and was added to a rails application by default. Turbolinks was added to Gemfile by default in rails 4.0. Turbolinks make use of pushstate in HTML5 supporting browsers. In this, an arbitrary data will be inserted into the session history. Instead of recompiling javascripts and css between url change, only head and body content in the loaded instance of the page. This can bring about a single page app like feel and performance between page navigation. Flux being a rails 4 app, Turbolinks has been used and has aided in making the application very much faster.
 
JavaScript frameworks
 
There are several Javascript libraries in existence. They make writing JavaScript much simpler and adds a lot of functionality to the browser, especially AJAX. Rails 2.3.5 includes prototype by default, so does Fedena. Rails 3 replaced by jquery using jquery-rails gem. In addition to the prototype js, jQuery is also used in Fedena in noconflict mode. In addition to jQuery, Uzity also uses backbone for structure of the app. Flux also makes use of jQuery.
 
CoffeeScript
 
CoffeeScript is a little language that compiles into JavaScript. CoffeScript can reduce the lines of script needed. CoffeeScript is a relatively new script and had been added as default through gem in Rails 3.1 onwards. Both Uzity and Flux uses CoffeeScript. Most of the modern browsers supports CoffeeScript, but for the sake of compatibility it is still compiled into JavaScript and delivered to browsers. Usage of CoffeeScript in this way does not impact the runtime. The efficiency of CoffeeScript compared to JavaScript can be illustrated in this example in which both does the same task.
 
CoffeeScript example
 

adjust_slim: () ->
   if $('#tab-content').length != 0
     target_height = $(window).height() - $('#tab-content').offset().top
     $('.people .slimScrollDiv:first').css('height',target_height+'px')
     $('.people .slimScrollDiv div:first').css('height',target_height+'px')
$(window).resize =>
   @adjust_slim()

 

JavaScript version of the same

 

({
 adjust_slim: function() {
   var new_height;
   if ($('#tab-content').length !== 0) {
     new_height = $(window).height() - $('#tab-content').offset().top;
     $('.people .slimScrollDiv:first').css('height', new_height + 'px');
     return $('.people .slimScrollDiv div:first').css('height', new_height + 'px');
   }
 }
});
$(window).resize((function(_this) {
 return function() {
   return _this.adjust_slim();
 };
})(this));

SASS

SASS, Syntactically Awesome Stylesheets is a new scripting language that will be converted into css. It is added as a default gem from rails 3.1 and newer through Gemfile. SASS written in ‘SCSS’ format is used in both Uzity and Flux. SASS provides variables, mixins, nesting etc.. Frequently used colors and dimensions etc.  can be added as variables and called so that change can be made in the variable alone to have an overall impact like changing a theme. Also nesting can be used here which CSS does not support. Using mixins already defined style can be reused.

example:

scss:

$color1: #333333;
$color2: #c0392b;
body{
  color: $color1;
  .grey-link{color:$color2;}
  .hover{
    .grey-link{color: $color1;}
    .grey-link:hover{color: $color2;}
    button{background:$color2;}
  }
}

css of the same

body {
  color: #333333;
}
body .grey-link {
  color: #c0392b;
}
body .hover .grey-link {
  color: #333333;
}
body .hover .grey-link:hover {
  color: #c0392b;
}
body .hover button {
  background: #c0392b;
}

These are some of the basic concepts that have been undergone some changes including deprecation and inclusions throughout from rails 2.3.x to 4.0.x. Changes in caching, routing, eager loading, deployment etc will be covered in the next part.

This article is written by:

TP

 

Sooraj T P

 
A hard core coder. A gadget freak. An unsung designer. There is hardly anything which Sooraj doesn’t talk about, be it tech, gadget, design, automobile or more. Sooraj is the “Tech Saint in making”.
 

Share Button

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.

We are sorry that this post was not useful for you!

Let us improve this post!

Tell us how we can improve this post?