Routers are a common way for web frameworks to translate a URL to an action. On backbone they are used when creating single page applications to refresh the content of the page without actually refreshing the page.

Lets see an example of how they work:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
var MyAppRouter = Backbone.Router.extend({
  // Define the routes we want to listen to
  routes: {
    '': 'indexAction',
    'main': 'mainAction',
    'listing/:page': 'listingAction',
    'profile/:id(/:username)': 'profileAction',
    'anything/*all': 'anythingAction'
  },

  // Acts as a constructor
  initialize: function() {
    console.log('Router started');
  },

  indexAction: function() {
    console.log('Index action');
  },

  // Now we list our router actions
  mainAction: function() {
    console.log('Main page');
  },

  listingAction: function(page) {
    console.log('Show page ' + page);
  },

  profileAction: function(id, username) {
    console.log('You passed id: ' + id + ' and username: ' + username);
  },

  anythingAction: function(all) {
    console.log(all);
  }
});

// We need to instantiate it
var router = new MyAppRouter();

// This tells backbone to start listening for URL changes
Backbone.history.start();

Collections are a convenient way to group models together. An example usage of them is when you want to show a list of elements in your page. You can create a simple collection using Backbone.Collection (I am using the models I defined on Introduction to Backbone.js):

1
2
3
4
5
6
7
8
9
10
// Create some people
var juan = new Person({'weight': 80});
var carlos = new Person({'weight': 70});
var alicia = new Person({'weight': 75});

var persons = new Backbone.Collection([
  juan,
  carlos,
  alicia
]);

Git submodules is a way to organize your code so you can include libraries or other projects into your project. You want to treat these libraries as a separate repository so they are by themselves versioned by git in another repository.

Lets start with a very simple, but not very practical example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
# Create a git repository
mkdir somedir
cd somedir
touch file
git add file
git commit -m 'Added file'

# Create another repository inside the current repository
mkdir submodule
cd submodule
touch submodule_file
git add submodule_file
git commit -m 'Added file'

# Add the child repository to the parent repository as a submodule
cd ..
git submodule add ./submodule/
git commit -m 'Added submodule'

For this post I am assuming you have already a Django environment setup.

Django apps

Once you have your environment set up, you will want to create apps for your project. Here is what Django documentations has to say about apps:

What’s the difference between a project and an app? An app is a Web application that does something — e.g., a Weblog system, a database of public records or a simple poll app. A project is a collection of configuration and apps for a particular Web site. A project can contain multiple apps. An app can be in multiple projects.

We can use manage.py to help us create our apps. Just go to your project folder and type this command in a terminal:

1
python manage.py startapp crud

I chose crud as the name of my app because I am just going to show a simple CRUD(Create, Read, Update, Delete) interface to a DB table.

PHP 5.4 introduced a technique called traits. This technique aims to provide code re-usability functionality similar to mixins in other programming languages. The most common use case is to reuse methods among different classes.

Here is an example of the syntax;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
trait someMath
{
    function add($a, $b)
    {
        return $a + $b;
    }

    function multiply($a, $b)
    {
        return $a * $b;
    }
}

class Calculator
{
    use someMath;
}

$cal = new Calculator();
echo $cal->add(4, 6); // echoes 10

As you can see traits syntax is very similar to the syntax to create a class. We just need to change the keyword class for trait. Then we can apply the trait inside a class using the use keyword.

Android doesn’t support ant anymore. Take a look at: Building an Android project from scratch using Gradle to learn how to create a project with gradle.

Getting the environment set up

There are two packages needed for developing android applications. One is the Java Development Kit and the other is the Android SDK. You can install JDK with this command:

1
sudo apt-get install default-jdk

You can get Android SDK from this site: http://developer.android.com/sdk/index.html. The site will give you two options, to download ADT (Android Development Tookit), which is the SDK + Eclipse or just the SDK. Choose to download only the SDK.

After downloading the package you need to unzip it, open a terminal, navigate to the folder where you downloaded it, go the the tools folder and run the android script:

1
2
cd /android-sdk/tools
./android

In reality you probably don’t want to host you websites on your local computer unless you have a very good computer, a very good internet connection and you are an expert system administrator, but this is very useful to learn how the internet works.

In this case I am doing this because I want to be able to develop on my computer no matter where I am. So I want to be able to SSH to my machine, modify my files and view my changes from a web browser. Here are the things that need to be done:

• Setup a local HTTP server
• Allow inbound traffic on port 80
• Setup a free DNS service
• Setup an SSH server
• Forward requests to port 22 on your router to your computer

Backbone.js is a JavaScript framework that facilitates the separation between models and views. It’s lack of controllers make me think of it as being similar to Django framework, so familiarity with Django may make it easier to understand backbone.

Backbone comes packaged in a js file that you can download from backbonejs.org. If you are not planning to hack backbone you should probably download the production version. Backbone can be used with any templating system but it comes with underscore.js support by default. For this reason to use backbone you will also need to download it from underscorejs.org. jQuery is another dependency of backbone, so you also need to include it in your bundle.

In all the examples I show I assume that you have already included jQuery, underscore.js and backbone.js with something similar to:

1
2
3
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="underscore.js"></script>
<script type="text/javascript" src="backbone.js"></script>

This post is the next step from my PHP Code Static Analysis post. Once I had a way to run static analysis on my project with just one command, I wanted to make this an automatic check every time something was committed.

This would have been a super simple task except that there was one feature that didn’t come out of the box from my build file. I wanted the build to fail when PHPDoc issues a warning so code is not committed without their respective doc blocks.

Git hooks

Git hooks are really easy to create. You just need to go to .git/hooks/ in your repository and you will find a list of the available hooks followed by the .sample extension. To activate the hook you just need to remove the .sample extension and give the file execution permissions. The content of the hook can be any script that can be executed from a terminal.

JSLint is a Code Static Analysis tool created by Douglas Crockford. JSLint is written in JavaScript so it can easily be run from a browser but since I want to be able to check all my JS files automatically in a CI environment I will use Rhino, a JS engine written in Java that can be run from the command line. To install Rhino in Ubuntu just do:

1
sudo apt-get install rhino

Once installed you can take it out for a ride:

1
2
3
4
5
6
7
8
9
adrian@me:~$ rhino
Rhino 1.7 release 3 2012 05 18
js> var a = 4;
js> a;
4
js> a + 7;
11
js> quit();
adrian@me:~$