How do I install it?

Installation happens via Rubygems. Tres depends on Ruby if you're planning on developing apps with it. Packaged apps run with just a browser.

Run the following command in the console:

$ gem install tres

What exactly is Tres?

Tres is a development suite, focused on mobile devices (phones, tablets). It features automatic compilation of template formats such as Haml, as well as transparent CoffeeScript and Compass support (and thus, Sass.). The idea is you'd develop a mobile web app locally, package it, and then use it with whatever other back-end you want.

Tres also provides default/desirable styles for creating mobile applications, such as headers, lists, buttons, and other common mobile app design patterns.

It also provides helpful JavaScript classes to easily implement behaviour and connect the UI with real data from say, an API.

Creating a new app

In the console:

$ tres new app-name

Where app-name is the directory where your Tres app will live in.

Tres will create 3 folders and a file in the root directory. You can pretty much ignore that file, as it's only necessary in case you plan on deploying the application to the clouds.

Running an app

In the app directory which you just created with $ tres new, run the command:

$ tres server

That will run a local web server on port 4567. Point your browser to http://localhost:4567. Unless you're using a mobile emulator such as the iOS Simulator for developing your mobile app, you'll want to point your mobile browser to http://<IP address>:4567.

TIP: Overall, it's safe to develop a Tres app using a desktop web browser as it tends to be quicker and has the benefit of easy debugging with browser inspectors. So long as you also test the app with a mobile browser of course.

What are the folders for?

Tres creates an assets folder, a templates folder, and a build folder.

The assets folder is where your JavaScripts (or CoffeeScripts) and stylesheets (and Sass files) are kept, respectively in the javascripts and stylesheets directories.

The templates folder is where you keep your application templates in. That is, the templates that will be available for your JavaScripts to use.

The build folder works like a "public" folder for your application. When you package a Tres app, it compiles every non-static asset/script/template (CoffeeScripts, Sass, Haml) and puts it there, so you can copy it's contents and put it somewhere else to use with, say, a Rails or a node.js application.

Tres and Sprockets

Tres uses sprockets with it's local preview server. That means you can use directives such as require and require_tree, and sprockets will automatically handle inclusion of those for you.

By default, Tres creates assets/javascripts/ and assets/stylesheets/all.scss, which are required in the default index.html file via /javascripts/all.js and /stylesheets/all.scss. Those are actually "manifests" so to speak which include everything you need to build a basic app.

Should you add, say, another JS library to your app, or your own scripts outside of the generator ones, it's advisable to include it by adding it to the manifest instead of sourcing it directly in the index.html file, so you get the benefit of serving it along in a single request.


Your JavaScripts and CoffeeScripts will be in assets/javascripts. Tres will also create 3 other subfolders in this folder: screens, collections, and models.

The screens folder contains the scripts for each of your app's screens. The collections folder keeps your Backbone.js collections, and the models folder, your Backbone.js models.

JavaScripts that are served via a URL like /javascripts/all.js will map to the file assets/javascripts/all.js, or assets/javascripts/ Tres will recognise all .coffee files automatically as .js if you refer to them with the extension.

The file assets/javascripts/ is your JavaScripts manifest. If you read it's source, you'll notice it's set to require everything in the screens, models, and collections folders. That's so when you create a new instance of any of these via the console generator, they get automatically picked up by your app.


Sass and CSS files should be kept in assets/stylesheets. Tres' default all.scss (the stylesheets manfiest) file includes the base styles (tres/base.scss), and the default theme (tres/themes/default.scss). Those files are part of the gem installation and won't exist in your app's directory.

Note that Tres makes Compass available in your load path automatically. So if in one of your stylesheets you try to include one of Compass' sub libraries, for example:

@import 'compass/css3/border-radius';

It will just work.

Font Awesome

Tres comes with Font Awesome bundled by default. So if you apply a class of icon-* (refer to the previous link) to an element, it'll just work.

Font icons make for a much better option than images, given the different pixel ratio available on mobiles nowadays.

In a gist

The whole idea of Tres is:


Tres.App is the main app class. It mostly exists to map URLs to screens.


The class that all screen objects inherit from.


Attaches a common "iOS-like" (don't sue me bro) list behavior and look to a list element.


General data integration for forms, along with some helpers for accessing elements by their name.


The global Tres application router. Controls navigation, and events that happen before a route fires.

The approach in Tres is keeping it simple by suggesting best practices: I find that having more than one router in an application doesn't really help. Hence Tres has a single, global object which you can refer to from anywhere in your code.

Tres.Router's methods are the same as Backbone.Router's.


Device facilities, like tilting, orientation change, etc.


Display of notifications. Already in place, but it needs some ironing out. Use at your own risk!