Kevin Colten kevincolten

This tutorial came out of many frustrating google searches trying to find a decent end-to-end boilerplate example of incorporating React as the view component in Backbone. The three components I wanted in a tutorial were:

Build something more than a single page TODO
Involved routing and controllers
Included a build process using a modern build tool
Optimization and source-mapping
Done in an organized manner with descriptive naming patterns

What we'll be building in this tutorial is a basic blog viewer. The source can be found here and the finished product can be found here. When complete, we'll be able to write the blog post in markdown in a gist with the title starting with a key word (ex. @post Here's My Post Title!) and display it in all its html glory.

So let's get started.

ClientDataStore operations

Stores actual columns of data on the client. Used by lightweight "data source" models. Supports performing the following CRUD operations.

create new columns
replace all columns

	class ApplicationController < ActionController::Base
	protect_from_forgery
	before_filter :cor

	def cor
	headers["Access-Control-Allow-Origin"] = "http://localhost:8000"
	headers["Access-Control-Allow-Methods"] = %w{GET POST PUT DELETE}.join(",")
	headers["Access-Control-Allow-Headers"] = %w{Origin Accept Content-Type X-Requested-With X-CSRF-Token}.join(",")
	head(:ok) if request.request_method == "OPTIONS"
	end

	# Check for Homebrew,
	# Install if we don't have it
	if test ! $(which brew); then
	echo "Installing homebrew..."
	ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
	fi

	# Update homebrew recipes
	brew update

	SPARK_CLASSPATH=../mysql-connector-java-5.1.35/mysql-connector-java-5.1.35-bin.jar bin/spark-shell

	val jdbcDF = sqlContext.load("jdbc", Map(
	"url" -> "jdbc:mysql://localhost:8889/employees?user=root&password=root",
	"dbtable" -> "(SELECT employees., departments., salaries.salary, titles.title FROM employees JOIN dept_emp ON dept_emp.emp_no = employees.emp_no JOIN departments ON departments.dept_no = dept_emp.dept_no JOIN dept_manager ON dept_manager.emp_no = employees.emp_no JOIN salaries ON salaries.emp_no = employees.emp_no JOIN titles ON employees.emp_no = titles.emp_no) AS employees",
	"driver" -> "com.mysql.jdbc.Driver",
	"partitionColumn" -> "emp_no",
	"lowerBound" -> "10001",
	"upperBound" -> "499999",
	"numPartitions" -> "10"

	import csv
	from collections import deque

	with open('weekly_stock_trends.csv', 'rb') as f:
	reader = csv.reader(f)
	weekly_trends = list(reader)

	headers = weekly_trends.pop(0)
	new_headers = []

	from bokeh.embed import components
	from bokeh.models import AjaxDataSource, Callback, Slider
	from bokeh.plotting import figure, output_file, show, vplot
	from jinja2 import Template
	import webbrowser
	import os
	import six

	source = AjaxDataSource(
	data_url='http://54.80.255.253:5000/subsample/0/180/0/360/350/800/0',

	$ ps aux \| grep mysql
	$ sudo kill -9 629 513 #1, 5, 9 (varying levels of process killing)