8 steps to move Rails view to Marionette

From Rails to Marionette.js in a few simple steps.

Let's start with the structure of our app:

We will use users#show view as an example.

Step 1 - Structure

Create in backbone/apps/ a new app for users and add users_show_controller, users_show_views and users_app files:

Step 2 - Split page

Now it is time to think- how should I divide my page? In our example, users show page has 3 regions.

• user base info - avatar, name, email etc.
• user extended info - skills, education, job etc.
• sidebar with a list of user's friends

So our next step is to create a layout view with 3 regions.

Add your template to show/templates.

You can choose from different templates:

• Haml Coffee Assets
• Handlebars
• or something else

And add basic views for those regions:

Next in the controller:

We can pass region to the controller (see the previous step) or we can use App.mainRegion that should be defined in app.coffee. For example: App.addRegions({ mainRegion: "#main-region" }).

Step 3 - Show views in layout

Now we will show our empty views in proper regions

Step 4 - Templates

This is in some cases a hard part. Why? We need to change every helper method to a proper tag (you can check rendered HTML for a Rails view). This should be your first step - rewrite templates to a simple HTML (hbs/HAML).

A simple example:

to:

Step 5 - Entities

Now it's time to add some logic. A good thing with rewriting templates is that you see what kind of information you will need from server and which you can do on a client side (like text, date formatting).

In our example we will add a User entity:

Note: Routes is from js-routes. You could also add a simple string or use url option instead of urlRoot.

If you have a backbone view and you use gon you could use it instead of creating an entity. You can move to step 7 if you want to stick with gon. :warning: Be aware that it is only a temporary solution and you should replace it with an entity and API.

We can now use it in our controller:

and pass it to views:

Step 6 - API

In this step you have 2 options:

1. you can use current controller for users#show action
2. you can create new controller in another namespace like API::UsersController

To render json you can use:

1. ActiveModel::Serializers
2. Jbuilder
3. RABL

Example controller + serializer:

Step 7 - Use entity in views

Now we can use our user entity in templates and add events to your views and controller. If you have an old backbone view you can move your events and other stuff to your marionette views.

Step 8 - Replace Rails view

There is a simple solution to replace your Rails view with Marionette view:

Add feature flag for your new page - you can use flip or something else. We will use backbone_users_show flag:

Next add if/else to your Rails view:

and to users_app.coffee:

Vilà!

Useful resources: Screencasts, documentation, libraries

• BackboneRails
• Marionette documentation
• Building API - course about building API.
• Marionette.js and backbone, a perfect match?