Lightbend Activator

Play Framework with Backbone.js

Play Framework with Backbone.js

December 25, 2013
playframework backbonejs java scala

A starter application with Play Framework and BackboneJS.

How to get "Play Framework with Backbone.js" on your computer

There are several ways to get this template.

Option 1: Choose hello-play-backbone in the Lightbend Activator UI.

Already have Lightbend Activator (get it here)? Launch the UI then search for hello-play-backbone in the list of templates.

Option 2: Download the hello-play-backbone project as a zip archive

If you haven't installed Activator, you can get the code by downloading the template bundle for hello-play-backbone.

  1. Download the Template Bundle for "Play Framework with Backbone.js"
  2. Extract the downloaded zip file to your system
  3. The bundle includes a small bootstrap script that can start Activator. To start Lightbend Activator's UI:

    In your File Explorer, navigate into the directory that the template was extracted to, right-click on the file named "activator.bat", then select "Open", and if prompted with a warning, click to continue:

    Or from a command line:

     C:\Users\typesafe\hello-play-backbone> activator ui 
    This will start Lightbend Activator and open this template in your browser.

Option 3: Create a hello-play-backbone project from the command line

If you have Lightbend Activator, use its command line mode to create a new project from this template. Type activator new PROJECTNAME hello-play-backbone on the command line.

Option 4: View the template source

The creator of this template maintains it at

Option 5: Preview the tutorial below

We've included the text of this template's tutorial below, but it may work better if you view it inside Activator on your computer. Activator tutorials are often designed to be interactive.

Preview the tutorial


This tutorial aims to show you how to use backbone.js with play framework.

Application Overview

The application basically consist of a single view defined in the app/views/index.scala.html file. This view uses backbone.js (and it's dependencies) which makes RESTful calls to app/controllers/MessageController.scala controller.


This template is inspired from the equivalent JAVA template

Running the Application

On the left-hand side we can see the console output, which tells which port is used. Simply browse to given address. By default: http://localhost:9000

Running the Test

There is also a Specification test for the CountingActor located in the test/sample/SpringTest.scala file. It is structured in the same way as the Main application.

The result of running the test is shown in the Test tab. On the left-hand side we can see the console output.

Exploring the Code

To be able to use the backbone.js First we need to reference them in our main view app/views/index.scala.html. Inside this view we reference out javascript files using play framework asset management. jQuery and Underscore.js are dependencies.

And the BackboneJS components are inside index.js

Inside index.js there is Message model which represent the message coming from server. There is MessageView which represents the view that will be rendered. The view simply handles the button clicks on "Get JSON Message" button and makes fetch call on Message model. And whenever a change happens on MessageModel a render is called for this view with the new model.

app/controllers/MessageController.scala is the controller that responds to calls on /message for JSON message.