Blog archives

Javascript MVC tutorial: create a todo list using Stapes.js in less than 100 lines of code (part 1)

3 comments

As a Javascript programmer you might have read the term ‘MVC’ or ‘Model-View-Controller’ here and there. Or, maybe a friend has recommend you look into a ‘MVC framework’ like Backbone or Ember.js.

So, what’s this whole MVC thing? You could try reading the Wikipedia article but it might be a little abstract. In practice MVC is really nothing more than separating your applications data (model) and presentation (view).

But why would you do such a thing? The most important reason is maintainability, your code becomes more readable and, hence, more maintainable. You’ll also notice that you will become a better programmer, and it becomes easier to add features to a project.

This still might sound a little abstract, so let’s write some code! We’ll be using a super tiny MVC framework called Stapes.js which, not completely coincidental, is something i wrote myself to learn MVC. Stapes is pretty relaxed about how you structure your code, so this approach is just one approach. Feel free to structure your code in every way you want.

For this tutorial i’ll assume you have some basic knowledge about HTML and Javascript and you know how to get a simple webserver running.

We’ll be writing a really simple todo (task list) application. There’s actually a really cool project called TodoMVC that collects todo examples written in multiple frameworks (here’s the one for Stapes). However, those examples are usually pretty complicated and might not give you the best introduction to MVC. So’ll we be doing something a lot simpler in this tutorial.

Setting up

We’ll start by setting up a HTML file. Open your favorite text editor and copy-paste this code, and save it as index.html.

Let’s add some Javascript! Create a new file called app.js and save it in the same directory.

We will be using jQuery for DOM manipulation. With Stapes you’re free to use any Javascript library you want, or just use vanilla DOM scripting. I’ll just assume everyone knows jQuery, so that’s why we’ll be using it.

Okay, let’s set up our TodoModel, TodoView and TodoContoller using the Stapes.subclass method:

Try reloading your webbrowser and entering a todo in the input field. If all went well you should be seeing new todos appearing.

Analyzing the code

Let’s analyze this code a little bit.

With Stapes it doesn’t really matter what you call your objects. Other MVC frameworks might force you into using pre-defined models or views. That’s not a bad thing per se, but with Stapes the philosophy is that you can manage conventions for yourself. So’ll we just end the module variable names with Model or View to indicate the type.

The subclass function creates a new class that you can later instantiate with new. Note how we have a property called constructor. This is the function that is executed when calling new and that you use to setup properties. All other properties in the object given to subclass become part of the class prototype.

Let’s take a look at the TodosView. The constructor exists of an event handler for the input field.

On to the code in constructor: note that we use the bind method on the function in the event handler. This is to fix a common problem in Javascript event handlers where this is scoped to the global window variable instead of the current object. bind on functions is included in all modern browsers, but if you’re using an older browsers (such as Internet Explorer 8) you might need to include a polyfill like the one from MDN.

Here’s the most important line of the view:

$input.val() gets the todo we entered in the input field. The push method of the model adds the todo to its internal data store and automatically assigns an unique id. This action also does something else, it triggers a change event that can be used to update a view. We listen to this event in the TodoController:

Every Stapes object can trigger events using the emit method. We can listen to these events using the on method.

Some methods automatically trigger events, such as push. An event can contain event data in the callback, which you can see in this example. The todoId variable holds the unique id the model automatically assigned when we did the push in the TodoView.

We want to get the text for this todo, so we use get on the model to get the todo text. We then append it using jQuery to the #todos list.

Wrapping it up

Here’s Model-View-Controller in its most basic form: a user action triggers an
event, that is used to update the model. The model fires a ‘change’ event, which is used by the controller to update the view.

If you want to experiment with this example try the jsFiddle i’ve setup.

Hungry for more? Read the second part of this tutorial and i’ll show you how to use templating, remove todos and save the todos to localStorage.

Add a comment

3 comments

Leave a comment