How to build a realtime TO-DO List App with appbase.io

Appbase.io is a tool that enables creating modern web apps, without the complexity of tooling a LAMP or MEAN stack together. Create, Read, Update and Delete tasks (CRUD) can be performed out of the box. And they can be done in realtime, with no additional considerations.

In this post, we will explore building a Todo list app and use it to contrast against the simplicity of the service. To kick the tires, we will take a boilerplate TO-DO list app from the open source project TodoMVC. It provides examples in a number of different JavaScript frameworks — AngularJS, Backbone.js, Ember.js, KnockoutJS, Vue.js, and React among others. We will be working with the React example for this tutorial, but the same principles will be applicable to others.

An Interactive Pen to run the To-Do List App, press Show Embed if doesn’t open directly.

Currently, the app does all the CRUD operations using your browser’s LocalStorage API. Take a note of the number of lines by browsing to the Babel panel: It’s at 439 lines. See the diagram below on how the code is currently structured:

Image: React Todo App’s view breakdown

This app view is composed of four React components: TodoApp, TodoFooter, TodoItem and TodoModel. The component TodoApp renders TodoFooter and all TodoItem. Once an item is rendered, it keeps listening for state changes. When a change occurs, an action is triggered from TodoModel to render the updated view. Below is how the magic happens in the code:

let model = new TodoModel('react-todos')
let render = () => {
  ReactDOM.render(
    <TodoApp model={model}/>,
    document.getElementsByClassName('todoapp')[0]
  )
}
model.subscribe(render)
render()

Here is a list of CRUD related actions it does: add, toggleAll, toggle, destroy, save, and clearCompleted. All actions are done in the TodoModel class:

class TodoModel {
  constructor (key) {
  }
  
  addTodo (title) {
  }
  
  toggleAll (checked) {
  }
  
  toggle (todoToToggle) {
  }
  
  destroy (todo) {
  }
  
  save (todoToSave, text) {
  }
  
  clearCompleted () {
  }
}

This is how the To-Do app is designed. We will now change the TodoModel to be synced in realtime. To keep things modular, we will create a new DBaaS layer and use it to communicate with the TodoModel.

Image: Adding the DB layer for CRUD

We will be adding this DB layer inside the TodoModel CRUD actions. No other class or code changes. Even when you are looking at other frameworks like Angular or Vue, this same principle holds. The table below shows our changes.

Image: A one-to-one comparison of the CRUD To-Do App with LocalStorage vs using appbase.io as the DB layer

In terms of number of lines, both the codes are almost similar, and our migration was relatively effortless to say the least. We can dive more into the details of how the appbase.io API works.

var appbaseRef = new Appbase({
  url: 'https://scalr.api.appbase.io',
  appname: 'talks_2016',
  username: 'aWSlJvIUk',
  password: '58e3edd6-8933-4f61-a648-231c0404d4d7'
})

I have just created a fresh environment below to get started with a blank slate with appbase.io.

Interactive boilerplate app with appbase.io methods

Yes, the app credentials are shared. Feel free to use them in a responsible way.

Next and finally, we add the above boilerplate code to the original To-Do App to create a realtime synced To-Do list.

Our final interactive To-Do App that works in realtime, try opening it in a new tab and change something!

Try opening this app in multiple tabs and change something. For instance, add a new todo, toggle an existent todo, edit one of them and so forth. The change will be synced across all tabs. Cool. So far so good in terms of realtime stuff.

Some other alternatives for building realtime apps include Firebase and Backand. What makes appbase.io unique from these and others is it’s transparent support and use of Elasticsearch. The folks at appbase.io have built an open-source project to showcase the power of it’s querying API — Mirage.

An intro video to Mirage, a GUI for exploring Elasticsearch Queries.

Summary

In this post, we walked through the process of building a realtime CRUD app with appbase.io using To-Do App as our project. It took us ~100 additional lines to migrate our LocalStorage based app to one that used appbase.io.

If you liked this post, you should recommend it or dropping a comment. In an upcoming post, I will talk more about the benefits of realtime databases.