mozilla/talkilla — pull request #9 by n1k0 (2013-03-24 15:10:22+00:00)
Title: Frontend tools & code organization

**Disclaimer**: this is an opiniated proposition, it mostly aims at starting a discussion.

This PR suggests an architecture and tools for the Talkilla project. It's far from perfect, but I think it's a good start.

## Tools

I've selected tools I know & I'm comfortable with. They might be not the best, but they do the job for me:

- [jquery](http://jquery.com), obviously ([Zepto](http://zepto.org/) could be used as an alternative)
- [requirejs](http://requirejs.org/), for js code modularization and dependency handling
- [backbone](http://backbonejs.org/) as a MV* framework
- [handlebars](http://handlebarsjs.com/) for client-side templating
- [bower](http://twitter.github.com/bower/) to handle frontend package management
- [twitter bootstrap](http://twitter.github.com/bootstrap/) as a UI framework

The obvious reason to use such tools is to:

- avoid reinventing the wheel
- help structuring the code through well known conventions
- avoid writing much boilerplate code to concentrate on implementing features
- ease contributions

Yes, every point is possibly debatable and matter of taste, that's why this is a pull request aimed at starting a discussion.

## Project structure & files organization

Let's walk through the `/static` folder, as we're mostly talking frontend here:

```
$ tree static
static
├── index.html # main html file
└── scripts # app frontend scripts
├── app.js # main app script
├── collections # backbone collections
│ └── users.js # users set
├── common.js # common stuff (a.k.a `utils`)
├── config.js # requirejs dependencies configuration
├── models # backbone models
│ └── user.js # user model
├── routers # backbone routers
│ └── router.js # main app router
├── templates # handlebars templates
│ ├── login.html # login template
│ └── users.html # users list template
└── views # backbone views
├── login.js # login view
└── users.js # users list view
```

## Setup

Installation:

$ make install

Running the app:

$ make runserver

Head to [http://127.0.0.1:5000](http://127.0.0.1:5000), ou should get something like this:

![](http://cl.ly/image/0q3U37303z2I/Capture%20d%E2%80%99%C3%A9cran%202013-03-24%20%C3%A0%2016.01.35.png)

Take a bit of your time to walk through the diff, and give your feedback.

### Notes

- @fqueze's [PR #7](https://github.com/mozilla/talkilla/pull/7) is already merged here;
- known issue: if you refresh the page, you'll loose your current authentication status; storing it through localStorage might be a solution