/ batmanjs

How to Introduce BatmanJS to existing Rails application

While evaluating [BatmanJS(BatmanJS)][1] for one of the biggest application here @Kiprosh, I found it very much Rails like and started drawing parallels when I was doing MVP with Rails and BatmanJS.

Note: This is not a tutorial for [getting started(Getting Started)][2] or [building rails app with BatmanJS(Another getting started)][3] . I personally like [Zack hubert's blog(Zack hubert's blog)][4] and [Batman for SuperHeroes(Batman for super heroes)][5]

If you are book lover, you will certainly like [cookbook(Cookbook for BatmanJS)][6]

I am sharing my experience on possible approaches/concepts to move view-layer from existing Rails application to BatmanJS.

Routes in BatmanJS

It is very straight-forward in BatmanJS. In the main JS file you can define routes, just as you do in Rails, here is an [(example)][7] :

  
  class Realvolve extends Batman.App
    # @resources 'products'
    # @resources 'discounts', except: ['edit']
    # @resources 'customers', only: ['new', 'show']

    # @resources 'blogs', ->
    #   @resources 'articles'

    # @resources 'pages', ->
    #   @collection 'count'
    #   @member 'duplicate'
  

Rails Partials to data-partial in BatmanJS

One of the easiest way to translate partials into BatmanJS is using data-partial:


  "data-partial" => "posts/_form"

You can also use 'source' in views:


  // In views/layouts/left_pan_view.js.coffee
  class Realvolve.LeftPaneView extends Batman.View
    source: 'layouts/_left_pane'

  // In html/layouts/_left_pane.html
  
Some html code goes here...

Where would I start?

I started with a small piece, mainly from layouts. While whole application is being served from Rails, I picked one page where view is being drawn by BatmanJS. With this approach, I not only got a chance to play with BatmanJS, but I understand how existing app's view layer can be moved to BatmanJS as well.

How about AJAX calls from view?

Unfortunately, there is no direct documentation on this, but that is the fun part to explore it. Later it turned out to be very simple, by making use of data-event-, here is an example:


// Somewhere in my search.html file


// In my controller/search_controller.js.coffee
class Realvolve.SearchController extends Realvolve.ApplicationController
  routingKey: 'search'
  // controllers in Batman can make AJAX calls too (Batman.request)!
  index: (params) ->
    new Batman.Request
      url: "/search?search=#{params.value}"
      success: (data) ->
        return data
      error: (err) ->
        return err
    return undefined
// this would return search results(may be JSON) and later you can use this to show results, by using data-foreach binding.

Challenges?

Main challenge I see is converting pretender logic into BatmanJS. Pre-render is great for rails applications, but it also makes code a little convoluted and makes it difficult to change. Off-course comparison with AngularJS/EmberJS/etc will always be there. I personally prefer AngularJS, because of ease of learning and simpler syntax/structure of code than BatmanJS.
[1]: http://batmanjs.org/
[2]: http://batmanjs.org/docs/index.html
[3]: http://requiremind.com/ruby-on-rails-4-and-batman-dot-js-another-getting-started-tutorial/
[4]: http://www.zhubert.com/blog/categories/batmanjs/
[5]: http://jster.net/blog/batman-js-mvc-for-superheroes
[6]: https://www.softcover.io/read/b5c051f3/batmanjs_mvc_cookbook
[7]: http://batmanjs.org/docs/api/batman.app_routing.html