▓▒░ ♔ Daniel ♔ ░▒▓ easierbycode

Understanding Backbone

In this post I will gradually refactor our map framework from how I used to write JavaScript into Backbone.js models, collections, views and events.

Let's start with map load:

locations = []

If Michael Myers came into your office and asked for a quote on his slick new web app, would your backend team be more scared of his empty stare and 10" inch bloody serrated blade, or the idea that they might have to learn something new?

Let's imagine we somehow managed to get past the obvious red flags, and agreed to take on his unique request.

We sit down and begin to define the minimum viable product. It's a location-based app that will allow our customer to track time, place, and events, information he can use to create reports which will help him to optimize his serial killer activities.

With a Fitbit strapped to our masked man, and an off the shelf gateway we bought from a Silicon Valley startup, we can now get to work on the web app which will make use of the realtime, aggregated, and inferred events now flowing into our database.

since it's 2012, our app might look something like this:

The way of the `substack`

With over 200 modules in npm, and many such as browserify, dnode, optimist, etc. relied upon day-to-day by developers all around the world, substack is a pretty damn productive guy.

Plus, he's got an awesome philosophy on programming to boot (yes, there is a programming philosophy! ... no comprende? Let me explain later).

BTW, how do I know this? I got to talk to him at campjs as he wrote & published a module (lexical-scope to be exact). He was super friendly and shared alot of his thoughts on many topics.

All in all, it was really cool to meet someone that's completely congruent with what he says & lives out as a programmer. It almost felt Bret Victor-like.

	module TripsHelper

	# ...

	def generate_js_locations(readings)
	# javascript Date does not take time zone into account
	trip_offset = Time.at(@trip.start_at).in_time_zone(@trip.time_zone).utc_offset * 1000
	s = "var local_offset = new Date(#{@trip.start_at}).getTimezoneOffset() * 60000;\n" # js offset is in minutes
	# subtract an hour if browser is in DST
	s << "if (new Date().dst()) {\n"

	#= require date-utils
	#= require map
	#= require hamlcoffee
	#= require underscore
	#= require backbone
	#= require_tree ../templates

	@e = (id) -> document.getElementById(id)

	@resizeApp = ->

	// http://bit.ly/gettingclosure

	for (var i = 1; i <= 3; i++) {
	(function(i){
	// All variables (including i)
	// are now scoped to this block

	// On click, alerts '1', '2' and '3'
	$elem.click(function() { alert(i); });
	})(i);

	var Klass = function () {
	this.someProp = 'someVal';
	};

	Klass.classMethod = function (arg) {
	return arg;
	};

	Klass.prototype.instanceMethod = function (arg) {
	return arg;

	# 0. Make sure you have Ruby 1.9.3 installed, and optionally RVM and PostgreSQL

	# 0.2 If you are on the Mac, make sure you have a c compiler by installing XCode Command Line Tools or gcc4.2 with homebrew
	# https://github.com/mxcl/homebrew/wiki/Custom-GCC-and-cross-compilers

	# 0.5 Make sure you have bundler version ~> 1.2 as Rails depends on it
	gem install bundler

	# 1. Get edge Rails source (master branch)
	git clone https://github.com/rails/rails.git

	fake_trips = []
	hour = 60 * 60 # 3600

	calc_mi =->duration,mph {(duration.to_f / hour) * mph}

	25.times do
	mph = 25
	duration = rand(1..5) * 60

	fake_trips.push({ duration:duration*1000, miles:calc_mi.(duration, mph), highest_speed:rand(25..35) })

	// Logging TCP proxy. Forwards traffic to the given host/port and logs
	// everything in both directions.
	//
	// e.g.
	// $ node tcpproxy 4567 www.songkick.com 80
	// $ curl -H 'Host: www.songkick.com' localhost:4567/

	var net = require('net'),
	me = process.argv[2],
	host = process.argv[3],

▓▒░ ♔ Daniel ♔ ░▒▓ easierbycode

Understanding Backbone

The way of the substack

The way of the `substack`