InterMine Lists Client "Töskur"

A client side app maintaining InterMine Lists offering folder/tag organization and live searches.

The app is powered by Chaplin that itself wraps Backbone.js.

Stack

The whole stack is built on top of the node.js platform, make sure it is installed.

Brunch

Brunch is a HTML5 application builder that's agnostic to programming langs and frameworks.

config.coffee contains brunch configuration, package.json contains brunch plugins and node config.

For the latest in Brunch documentation, head over to Read the Docs.

Chaplin

Chaplin is a framework on top of Backbone.js that adds some great predefined structure, like ModelView, Controller, mediator, Application.

We further extend it by adding classes such as the Garbage one, that consumes objects to dispose of automatically when they are no longer needed.

All View objects, when instantiated, will publish a message on the notification channel saying that they have rendered.

Eco

Eco lets you embed CoffeeScript logic in your markup. It's like EJS and ERB, but with CoffeeScript inside.

Stylus

Stylus is a CSS preprocessor with flexible syntax that looks similar to CoffeeScript, mixins, variables and utility functions for color manipulations that make it easy(-ier) to develop themes.

Flatiron

Flatiron is used to serve files and data. Does not play a large role here.

Getting started

Install the dependencies:

$ npm install -d

Run the server and compile the client watching for changes:

$ npm start

Visit http://127.0.0.1:1111.

Production

To build the files for production, execute the process with the minify option:

$ node_modules/.bin/brunch build --minify

Requirements

Following is a list of high level architectural, design and feature requirements as is/will be implemented/not. Strikethrough are implemented.

Features

1. Have folders and subfolders for lists (Boris, Enrico)
   1. Drag & drop lists. Like in Google Docs
   2. Organize lists into a folder. Like in Google Docs
   3. Create a new folder. Like in Google Docs
   4. Drag & drop folders.
2. Venn diagrams showing overlap between multiple lists selected (Jie)
3. Order lists by date, name, number of objects and have this setting stick around (Simon, Enrico)
4. Have tags that can be searched to filter lists (Enrico)
5. Filter lists by their name (Enrico)
6. Export lists.
7. Edit list description and date (Hilde)
8. When upgrading a list say how big it is and how long the upgrade process will probably take (Sergio)
9. Share lists with others (new functionality added by Daniela)

Architecture

1. Client side JavaScript architecture. Using Chaplin wrapped around Backbone
2. Maintainable templating language. Eco lets us use CoffeeScript inside HTML
3. CSS preprocessor for easy theming. Stylus as it looks closest to CoffeeScript and has coolio features like Color operations darken() and clear cut functions.
4. Automagically package resources. Brunch
5. Make JS files required through CommonJS/AMD. Brunch
6. Automagically reload the client on changes. Brunch
7. A nicer more readable language for classes. CoffeeScript
8. CSS based off of a library. Twitter Bootstrap
9. Manage resource usage of a client side app. Chaplin dispose() and our class Garbage
10. Implement assertions especially on init of methods/classes to catch the unexpected. our class AssertException
11. Cross-module communication using the Mediator and Publish/Subscribe patterns. Chaplin
12. Make local links accessible from the outside. Lists and Folders map through routes and Flatiron always serves the index.html regardless of the route requested and the Chaplin instantiates the appropriate controller method.

Design

1. classify list objects so that they can be custom styled by the different mines.