JavaScript matters for prototypes

firebase, backbone

Oct 2014

Building visual languages are key for reaching the goals of digital products. For web apps, visual language is woven into page navigation, the content or the transitions in between.

Why would you, as PHP or Ruby developer, want to start with JavaScript and Node, before doing “cleaner” OOP design?

Answering this question was the talk I promised to deliver at Frontend Zurich. Unfortunately, I did not quite get there back then.

Sorry if you were in the audience of my talk. You were probably wondering what the backend of a half-baked startup idea has to do with frontend technology?

The message was: HTML and JavaScript is a great medium to inspire action. And, with nobackends it has never been easier.

This can be seen from the following 10 steps, from zero to working prototype of a goal sharing prototype.

0) Goals of the app

Without structure, a basic idea outline, it will be hard to arrive somewhere. So, the goals of the burners app are:

  • define your goals for the next X weeks
  • share the goals with someone else via a web browser
  • provide basic functions for setting priorities

Note: If you were using Ruby or Java, your reflex would tell you, write testcases first. But for this blog post, I want to skip writing tests. The main test of the app will be whether a user grasps its purpose.

1) Init divshot

To get some raw HTML, I like:

$ divshot init

divshot is a command -line tool that - besides providing a basic project structure - allows you to continuously deploy a static page from the command line.

2) Init npm

For re-using code, you want to make use of the world’s largest code repository, don’t you? So, before going further, make sure you have a valid package.json. One way to do this, is:

$ npm init

3) Get your favorite JS libs

Next, you could use yeoman to fetch some basic libraries and a project structure. Actually, I am quicker by hand for simple prototypes:

$ npm install --save -d underscore jquery-untouched backbone

With these libs, you can easily handle browser events, DOM manipulations, as well as run XMLHttpRequest (or Ajax) requests.

4) Setup a build process

Browser apps are special in that sense, that they require developers to think, how to package an app.

In this example, I chose a Makefile and browserify (see next step). Not much, is simpler.

5) Setup Browserify

I like the idea of sharing structures between browser and server REPL environments. To sort and poke with your goals, you want to write something along:

> goals = require('collections/goals')

The same as on the server! And, you can experiment directly with your goals in a console, (e.g. extend sort logic), no matter where.

6) Templates

Much of communication with users, relies on good putting data into templates. I like handlebars, and with handlebones, it combines great with Backbone.js.

7) Backend and admin interface with Firebase

Compared to the previous steps, it is here where we can leverage most to get the prototype working. A number of backend as a services are interesting. Especially, I think the open-source ArangoDB and Foxx have a nice future. But staying with today, as first step, let’s take Firebase.

On a sidenote, you can use Firebase later for a basic admin service too. See Firebase and Backbone for more information here.

8) Wire up the backend

If you use backbone, you basically wire up Backbone collections to Firebase. You can find some directions on this in my book or at its code repository.

9) Fill up the HTML and CSS

So far, we mainly stayed with JS and some build processes. It is time to add more static assets, such as HTML and some basic CSS. (Note: I am not a CSS wizard, so, feel free to comment how to make my CSS better.)

10) Enjoy!

Finished. By setting the access rights for your data at Firebase, you can easily change who can read and write goals. The goals I had before summer are public now. Take a look!. Did I reach my goals in the meanwhile? Well, it depends. I found out what will matter most to me. And, more important, I did not lose (too much) time, with writing code, I probably won’t need anyway.

So, the code repository is here, rather sandbox like and without too much documentation. If you want to learn more on Node.js or Backbone.js, I suggest you take a look at my book.


This post got some nice feedback at Reddit. Espeically, insert-css looks nice!

Leave me feedback

Follow me on Twitter here.

comments powered by Disqus