Back

Web Sketchpad Developer Orientation

 

Web Sketchpad Developer Orientation

Contents

Introduction

Web Sketchpad follows the fundamental design of the existing C based desktop application architecture, adapting that to native Javascript idioms. For example, where the C code uses function pointers and casts, the Javascript code will use object inheritance.

What's Where

Basic Developer Setup

Any decent unix system should do, though the following instructions are OS X centric.

Here's a known good toolchain. The rest of the configuration assumes this, though the changes to target a different toolchain should not be too deep.

Install XCode

Install via the "App Store" app

Install Command Line Tools that come with XCode.

xcode-select --install

Install Npm and Node

Get it at http://nodejs.org/download/

Install Homebrew

ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"
brew doctor

Install Ant

brew install ant

Configure Apache

Edit /etc/apache2/httpd.conf uncommenting:

#LoadModule php5_module libexec/apache2/libphp5.so

Start Apache:

sudo apachectl start

Install Java

Get it at http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.html

Getting the Code

Configuring Git

Set up your git username and email (which will appear in your commits). 

git config --global user.name "Your Name"
git config --global user.email "your@email.address"

Configure "git difftool" visual difference to use TextWrangler. Add to your ~/.gitconfig 

[diff]
    tool = "twdiff"
[difftool]
    prompt = false
[difftool "twdiff"]
    cmd = /usr/bin/twdiff --wait --resume "$LOCAL" "$REMOTE"

Set up a righteous ~/.gitignore file

CVS
.#*

.hg
.hgignore

bin
obj
Debug
Release
TestResults
*.obj
*.suo
*.ncb
*.user
*.tli
*.tlh
*.idb
*.pdb

build
*.pbxuser
*.perspectivev3
.DS_Store

*.old
*.log
*.out
*.cache

Accessing the Source Repository

An administrator will need enable access to the git repository.

Then, in a Terminal, cd to the directory where you wish to put the source, and clone the repository.

cd ~/mysrc
git clone gitolite@dn.kcptech.com:WebGSP

After a bit, you should have a WebGSP directory containing the source. In that directory, there is a .git subdirectory which contains your copy of the git repository.

Building the Source

cd to the WebGSP directory. Here at the top level is where the ant build.xml and build.properties files are. Build the app:

ant

The resulting build will be in the target subdirectory.

Create a soft link to WSP build in the Apache Document Root directory:

cd /Library/WebServer/Documents/
sudo ln -s /Users/mlitwin/dev/WebGSP/target wsp

Access the build at http://localhost/wsp/

Get the Desktop Version of Sketchpad

Follow the instrictions at http://localhost/wsp/create-web-sketches.php

Additional Configuration

Once you have the code, and can build and run, there are some additional niceties that are worth attending to.

Visual Text Editor

We use the free version of BBEdit - Text Wrangler. This provides decent JavaScript and JSON text file editing, and file diffs. It also has a good command line interface, which you should also install (TextWrangler -> Install Command Line Tools...)

Bash Prompt

You can augment your command line prompt to give git status you are in a git directory. Modify/create your ~/.profile (or equivalent), appending: 

parse_git_branch() {
  git branch --no-color 2> /dev/null | sed -e '/^[^*]/d' -e 's/* \(.*\)/\ →\ \1/'
}
 
export PS1='\u\[\e[1;37m\]@\[\e[1;32m\]\h\[\e[1;37m\]:\[\e[1;31m\]\W\[\e[1;33m\]$(parse_git_branch)\[\e[0;39m\] '
export PROMPT_COMMAND='echo -ne "\033]0;${PWD}\007"'

Tracking Memory Usage

Under chrome, the test suite will report on how much memory is being consumed by the javascript heap (click the "test-results" button). To enable this, launch chrome with the command-line flag --enable-precise-memory-info, for example: 

/Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --enable-precise-memory-info

Monitoring Log Errors

A tip from Jon Brooks. I frequently find I miss exceptions and errors in WSP code because somebody somewhere is catching it. Here's a little javascript shim that will at least turn WSP error events into an alert that you can't miss. Borrowing from Lyn's bookmarklet trick, here are a few bookmarks you can make in your browser.

To alert on errors, make a new bookmark in your browser and edit the address to be the following:

  javascript:(function()%7B%24(document).on(%27gLog%27%2C%20function%20(evt%2C%20args)%20%7B%20if%20(args.logType%20%3D%3D%3D%20%27error%27)%20alert(args.message)%3B%7D)%3B%7D)()

To alert on debug log statements:

javascript:(function()%7B%24(document).on(%27gLog%27%2C%20function%20(evt%2C%20args)%20%7B%20if%20(args.logType%20%3D%3D%3D%20%27debug%27)%20alert(args.message)%3B%7D)%3B%7D)()

Style Guidelines

Web Sketchpad code style.