Web App Development with the Junior Framework and Firebase

In the first part of this tutorial, we designed a simple ToDo list app using Junior framework. We used Ratchet components to design the UI.

In this part of the tutorial, we’ll implement Firebase as the back end for our ToDo list app.

Source code from this tutorial is available on GitHub.

Getting Started

To get started, clone the previous tutorial source code from GitHub.

git clone https://github.com/sitepoint-examples/Junior_App_Part_1

Once cloned, navigate to the project directory and install the required dependencies.

bower install

Now open the Junior_App_Part_1/app.html page and you should see the app running.

Include Firebase reference

We’ll be using BackboneFire to hook up our application to Firebase.

To use BackboneFire, we’ll need jQuery and Underscore. Download and include both the libraries as references in app.html. The version of backbone.js included in Junior is also too out of date, so download a newer version into the same folder.

<script src="lib/javascripts/jquery-1.11.1.min.js"></script>
<script src="lib/javascripts/underscore-min.js"></script>

Once the above references are added, include the references to Firebase and BackboneFire as shown below:

<script src="https://cdn.firebase.com/js/client/2.0.6/firebase.js"></script>
<script src="https://cdn.firebase.com/libs/backbonefire/0.5.0/backbonefire.min.js"></script>

Setting Up Firebase

Before pushing data to Firebase, we’ll need to set up our account. Sign up for an account on Firebase, if you don’t already have one. Once an account has been created, log into the account and click on Manage App.

Click on the plus icon on the Firebase URL in the dashboard to create a new sub node.

Firebase Dashboard

Add a new sub node with name ToDo and value as 0. Once added you’ll have a URL like

https://burning-fire–1723.firebaseio.com/ToDo

We’ll be adding our ToDo list data to the above firebase URL. The reason we made the sub node is to organize our data.

Inserting data to Firebase

In the add task page, we’ll attach a click event to the save task button. Open app.js and inside the AddTaskView add a new click event for Save Task button as shown:

events: {
    'click #btnBack': 'onClickBack',
    'click #btnAdd': 'onClickAdd'   //Newly added
  },

Now, define the onClickAdd method inside the AddTaskView as shown:

onClickAdd: function() {
     console.log('Save Task clicked');
     return false;
},

In the AddTaskTemplate variable set the id for the Save Task button as btnAdd.

var AddTaskTemplate = [

  '<nav class="bar bar-standard">',
  '<header class="bar bar-nav">',

  '<button id="btnBack" class="btn btn-link btn-nav pull-left">Back</button>',
  '<h1 class="title">Add Task</h1>',
  '</header>',
  '</nav>',

  '<div class="bar bar-standard bar-header-secondary">',
  '<form>',
  '<input type="text" placeholder="Full name">',
  '<input type="search" placeholder="Search">',
  '<textarea rows="3"></textarea>',
  '<button id="btnAdd" class="btn btn-positive btn-block">Save Task</button>',
  '</form>',
  '</div>'

].join('\n');

Save the changes and open app.html. Click to add a new task and on pressing Save Task you should see the message we set above in the browser console.

Let’s add the code to save data to Firebase. Change the HTML code for AddTaskTemplate as shown below to make the search field a text field and adding a placeholder for a textarea field.

var AddTaskTemplate = [

  '<nav class="bar bar-standard">',
  '<header class="bar bar-nav">',

  '<button id="btnBack" class="btn btn-link btn-nav pull-left">Back</button>',
  '<h1 class="title">Add Task</h1>',
  '</header>',
  '</nav>',

  '<div class="bar bar-standard bar-header-secondary">',
  '<form>',
  '<input id="txtName" type="text" placeholder="Full name">',
  '<input id="txtTitle" type="text" placeholder="Title">',
  '<textarea id="txtDesc" placeholder="Description" rows="3"></textarea>',
  '<button id="btnAdd" class="btn btn-positive btn-block">Save Task</button>',
  '</form>',
  '</div>'

].join('\n');

To save data to Firebase, we need to create a firebase collection object using BackboneFirebase. Open app.js and define a TaskCollection object:

var TaskCollection = Backbone.Firebase.Collection.extend({
    url: "https://burning-fire-1723.firebaseio.com/ToDo"
});

When defining the routes for addTask, we had created a new AddTaskView instance:

addTask: function(){
    var addTaskView = new AddTaskView();
    this.renderView(addTaskView);
  }

To save the task data to firebase we’ll need to pass the TaskCollection object to the AddTaskView view. Amend the code above as shown:

addTask: function(){
    var collection = new TaskCollection();
    var addTaskView = new AddTaskView({ collection: collection });
    this.renderView(addTaskView);
  }

Inside the AddTaskView view we need to attach a listenTo event to the collection passed to listen for any changes. Add the following code to the AddTaskView:

initialize: function() {
    this.listenTo(this.collection);
},

Inside the onClickAdd function, we’ll read the values from the view and call a create method on collection to save the data to firebase.

onClickAdd: function() {

    var name = $('#txtName').val();
    var title = $('#txtTitle').val();
    var desc = $('#txtDesc').val();
    this.collection.create({
        name: name,
        title: title,
        description: desc
    });
    return false;
}

Save all the changes and open the application. Add a new task, enter some details and click Save Task. Open firebase and you should be able to see the data added.

Querying Data and Rendering data

To query the data, all we need to do is attach a listenTo event to the collection and once the data is added, it will fire a callback function with updated data.

Open app.js and inside HomeView add an initialize attribute with a listenTo event attached to the collection object.

initialize: function() {
    this.listenTo(this.collection, 'add', this.addOne);
},
addOne: function(todoList) {
   console.log(todoList);
   // Rendering code will be here !!
}

Go to the router section in app.js and when creating the HomeView instance, pass the TaskCollection object:

home: function() {
    var collection = new TaskCollection();
    var homeView = new HomeView({
        collection: collection
    });
    this.renderView(homeView);
},

In the onClickAdd event call, add the following code to redirect to the home view after a task has been added.

onClickAdd: function() {
    var name = $('#txtName').val();
    var title = $('#txtTitle').val();
    var desc = $('#txtDesc').val();
    this.collection.create({
        name: name,
        title: title,
        description: desc
    });
    AppRouter.navigate("/home", true);
},

Save the changes and try to browse app.html. Try to add a new task and when you get redirected to the home view, check the browser console. You should have the list of items added in the console.

Objects in Console

Next, we’ll bind the returned data as a list in the home view. Inside the addOne function add the following code to add the returned data as lis to the ul.

addOne: function(todoList) {
    var name = todoList.attributes.name;
    var title = todoList.attributes.title;
    var desc = todoList.attributes.description;
    $('#lst').append('<li class="table-view-cell">' + title + ': ' + desc + ' by ' + name + '</li>');
}

In HomeTemplate set the ul element’s id as lst.

Save the changes and try to add new task. Once added you should have a screen like:

ToDo List

Conclusion

In this tutorial, we saw how to read and insert data from Firebase using BackboneFirebase for our app created using the Junior framework, a framework for creating HTML 5 mobile apps.

What do you think about Junior? Does it have any advantages over many of the other mobile UI frameworks?

Web App Development with Junior and Firebase