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?
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.
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
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.)
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.