Sencha Touch Rails

Why to mix front-end MVC framework with back-end MVC framework?

There is a trend in web programming for increasingly widespread use of javascript MVC frameworks like Angular JS , Backbone or Sencha Touch. Since we have the power of Ruby on Rails model-view-controller architectural pattern, what is the point to duplicate it on the front? The server resources are expensive and the clients are already powerful enough to deal with the visualization part of the application. Once the application is loaded, we can use Rails back-end more like API, providing data in permissive way and keeping our network and computing resources.

Therefore I upgraded my good old sencha-touch-rails gem and now will explain a little how to use it.
It provides the GPL version of Sencha Touch to Rails assets pipeline. After adding the gem to your project Gemfile, you can load the javascript part of Sencha Touch in your application.js file with:


//= require sencha-touch-rails

It will insert only the core of Sencha Touch framework, but with enabled Ext.Loader, so the components will be loaded on the fly when it’s requested.

Now lets rename our application.css to application.scss, and we’ll be able to use @import rather than *= require (Sencha Touch is using a lot of Sass mixins and variables in different places, so @import is more friendly to it and does not require extra tuning and load order attention).


@import "sencha-touch/themes/sencha-touch";

Sencha Touch comes with set of ready to use themes (sencha-touch, cupertino, cupertino-classic, tizen, bb10, wp and mountainview).
As I start a fresh project, I wonder how to name my first controller…  Thе minimum is not to create controller at all. I’m gonna create a blank action with enabled layout in my ApplicationController, and forward root to ‘application#blank’. It’s working.


def blank; render inline: "", layout: true; end


root 'application#blank'

We need a Sencha application initialization script, and it will be nice to use coffeescript. Create file:


  name: 'Sencha'
  launch: ->
    Ext.create "",
      fullscreen: true
      tabBarPosition: 'bottom'
      items: [
        title: 'Home'
        iconCls: 'home'
        html: 'Home'
        title: 'Settings'
        iconCls: 'settings'
        html: 'Settings'

That’s it. We have a nice looking page with bottom navigation bar and page transition effect.


5 thoughts on “Sencha Touch Rails

  1. Hi,

    I would like to try to use sencha-touch-rails.

    Having an issue… When I run my app, I get a “ReferenceError: Ext is not defined” in the browser javascript console. Guess it’s not liking the init.Coffee.

    Any idea what to do to fix it?



    • Make sure that sencha touch is loaded before your application init script. Check the application.js “//= require sencha-touch-rails” should be on top (before “//= require_tree .”)


  2. Hi. When i’m tying to start `rails s` it fails with `/Users/aingelevic/.rbenv/versions/2.2.2/lib/ruby/gems/2.2.0/gems/sencha-touch-rails-2.0.2/lib/sencha-touch/rails/engine.rb:11:in `block in ‘: undefined method `register_engine’ for nil:NilClass (NoMethodError)`


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s