How I Built DaeIt.com

Published 11th September 2011

Recently designer James McDonald got in touch with me and asked me if I would build him a simple todo app (yes another one) with a focus on being simple and beautiful. James in an amazing designer and fulfilled the “beautiful” spec very easily. So now it was my turn to make the design come to life.

Backbone.js

So the first thing I set about doing was looking at how to build the front-end. I decided to try out Backbone.js. Backbone is a framework for javascript heavy web apps that provides you with structural models, collections and views and connects automatically to your back-end using a RESTful JSON interface.

I won’t lie, I’ve never really built a javascript heavy app and I found learning Backbone a bit steep. However the benefits it provides in terms of simplicity motivated me to continue learning to use it. A model, a collection, two views and a controller later, I had built the entire front end of DaeIt with less than 400 lines of javascript. Not bad.

Now that the front-end was completed, I had to link it in with a database through a back-end. As I said above Backbone connects automatically to your back-end using a RESTful JSON interface. This basically means it automatically sends POST, GET, PUT and DELETE HTTP requests when things change in the model in the front-end (following a CRUD methodology). So I needed a PHP framework that would allow me process these requests easily.

PHP Fat Free

Enter PHP Fat Free (F3). The thing I love about F3 is it is lightweight and flexible enough to allow you to build a tiny CRUD framework, or a full-blown MVC framework depending on what you need. I needed simple for this project and F3 seemed to fit the bill.

So I set about setting up routes to capture the requests that were being sent by Backbone and attaching functions to process these requests and send a response. In F3 this is as simple as:

F3::route('POST /todos*', 'create'); F3::route('GET /todos', 'read'); F3::route('GET /todos/@id', 'read'); F3::route('PUT /todos/@id', 'update'); F3::route('DELETE /todos/@id', 'delete'); function create(){ $data = json_decode(@file_get_contents('php://input')); // Do some SQL... echo json_encode($data); } function read(){ // Do some SQL... echo json_encode($data); } function update(){ $data = json_decode(@file_get_contents('php://input')); // Do some SQL... echo json_encode($data); } function delete(){ // Do some SQL... }

This was exactly the level of simplicity and maintainability I wanted. The php://input thing is simply because Backbone sends its params as JSON in the HTTP body, and seemingly PHP doesn’t have great support for reading data from the request body.

I’m now using F3 for another (larger) project and really beginning to love how flexible it is. It literally allows you to build your own framework, quickly and easily, depending on your needs.

Everything Else

Pretty much everything else was standard web development (with Google fonts and CSS3 magic thrown in). So that’s how I built DaeIt.com. You should head on over and try it out and let me know what you think.