Building a Todo app using Ember.js & Firebase

A Step-By-Step tutorial on building a realtime Todo app using Ember & Firebase.

Ember.js is just awesome! It is a framework for creating ambitious web applications. A Javascript framework that does all the heavy lifting for you. To see it in action let’s write a simple Todo app using ember.

We are going to focus on front-end so let’s just leave the rest to Firebase which will act as a backend data store. Firebase provides a really simple API to store and sync data in real-time and it works really well with ember.

Tomster logo credits emberjs.com

So Let’s get started!

Ember CLI setup

Ember CLI is a really great command-line tool for ember.js and this uses Broccoli for the asset pipeline. It adds a conventional structure to your ember app which makes it more manageable.

Prerequisites:

• Node.js
• Bower
• Git

npm install -g ember-cli

Create a new ember app using ember new app-name. This will setup the app structure for us. To start the app cd app-name and type ember s which should serve content at http://localhost:4200 by default.

ember new todo0 
cd todo0 
ember s

A few basic things

Let’s add a few basic things first before we start hacking. Bootstrap provides a basic styling for our app so that we don’t have to do everything from scratch. We will also be writing our css using Sass which has some really cool features. The following commands will fetch Bootstrap and Sass packages.

bower install --save bootstrap 
npm install --save-dev broccoli-merge-trees 
npm install --save-dev broccoli-sass 
npm install --save-dev broccoli-static-compiler

Let’s add the assets to our asset pipeline using broccoli tree. We can import the asset files and merge it with the app tree. Here’s how our Brocfile.js might look.

EmberFire

EmberFire is the official adapter for Ember data developed and maintained by firebase core team. With Emberfire integration our app seamlessly works with Firebase (Out-of-the-box!). I must say that the Firebase team has done a really good job. And there is a ember-cli addon for it. Checkout the quickstart guide.

Change your firebase URL in config/environment.js

firebase: 'https://YOUR-FIREBASE-NAME.firebaseio.com/'

Okay, Start Hacking!

First step is generating our todo model. We can use ember g model generator for that which will generate the model and test files for us.

ember g model todo task:string completed:boolean

Listing Todos

Since this is a single page application we need to aggregate the todos in index route.

Then in templates/index.hbs loop through the records and display.

<h4><b>ToDos</b></h4> 
<ul id="todos"> 
  {{#each todo in model}} 
     <li>{{todo.model.task}}</li> 
  {{/else}} 
     No Tasks to do 
  {{/each}} 
</ul>

Adding & Removing Todos

<form> 
  {{input value=newTask type='text' placeholder='Task name'}}    
   <button {{action 'addTodo'}} {{bind-attr disabled=state}}>   
   </button>
</form>

The above template will generate an input field and a button which performs the addTodo action defined in the index controller. Additionally the button disabled attribute is bound to state property which validates the record.

Next generate index controller using ember g controller index.

To remove a todo item just call the removeTodo action.

<a {{action 'removeTodo' todo}} href>remove</a>

Edit Todo

For editing a todo we will add a button to toggle the inline form. We need to specify the itemController which handles the item’s action.

{{#each todo in model itemController=todo}} 
   <li> 
     {{#if todo.isEditing}} 
       {{partial 'partials/edit-todo'}} 
     {{else}} 
       //todo 
     {{/if}} 
  </li> 
{{/each}}

Note: Since ObjectController will be deprecated soon we can extend Ember.Controller instead which requires us to reference properties in templates and controllers. Check the following links: notable-deprecations-in-1–11
https://github.com/TryGhost/Ghost/pull/4748

<form> 
  {{input type='text' placeholder='Task name' value=todo.model.task}} 
  <button {{action 'updateTodo'}} {{bind-attr disabled=todo.state}}>update</button> 
  <button {{action 'cancel'}}>cancel</button> 
</form>

Adding Finishing touches

Now one thing we haven’t covered yet is the status of the todo item. Let us add a checkbox to toggle completed & pending states and strike off the item using css once it is completed. Just add a css class and bind it to the list item.

.strike { 
  text-decoration: line-through; 
}
_______________________________________________________________
<h4 {{bind-attr class="todo.completed:strike"}}> 
  {{input type="checkbox" checked=todo.completed class="toggle"}}
  {{todo.model.task}}          
</h4>

Add the completed property to app/controllers/todo.js

completed: function(key, value) { 
  var todo = this.get('model'); 
  var _this = this; 
  if(value === undefined) { 
    return todo.get('completed'); 
  } else { 
    todo.set('completed', value); 
    todo.save().then(function(){ 
      if(value) { 
        _this.notify.info('task ' + todo.get('task') + '  
        completed'); 
      } 
    }); 
    return value; 
  }
}.property('model.completed')

To add some final touches to the app we can add an alert message when an action is completed. We can use ember-notify which gives us a really nice notification at the bottom right of the page.

this.notify.info('your awesome message!');

Deploy

Firebase is so awesome that you can even deploy it on their servers. Read more at Hosting on Firebase.

That’s it. Enjoy!

Checkout source code on Github and the demo.

P.S: This is my first post on Ember. Comments are welcome. Do hit the recommend button below if you liked it!

Originally published at sudharti.github.io.