Aaron Murray & Eric Schoffstall@WeAreFractal

Building a GeoChat mobile app and the birth of a web framework

What are we building?

Chattr is a mobile chat app that lets you open up a chatroom based on your geographic location

What are our technical requirements?

• Node.js • Websockets• Native Mobile App for iOS, Android• Coffescript friendly

What do we need?

• Native Mobile Bridge– Titanium, Phonegap

• Mobile Web Framework – JQuery Mobile, Titanium, Sencha Touch, Dojo Mobile, Zepto.js

• Communication– Socket.io, Now.js

• Database– MongoDB, CouchDB, Redis

• ORM – Mongoose

• Application Framework– Express, SocketStream

Native Mobile Bridge

• Compile JS + HTML + CSS + Titanium APIs to native code• Native UI• Use your web skills to build

Titanium Mobile (http://www.appcelerator.com/products/)

Native Mobile Bridge

Titanium Mobile (http://www.appcelerator.com/products/)

Native Mobile Bridge

• ACTUALLY native web technologies • Wrapped in a webkit renderer• Bridged to iOS and android • Have to run vanilla eclipse (not aptana)• Android emulator is absurd – debug on your phone

http://www.phonegap.com/

JQuery + Now.js PoChttps://github.com/wearefractal/Chattr-JQuery-PoC

JQuery + Now.js PoChttps://github.com/wearefractal/Chattr-JQuery-PoC

var fs = require('fs');var server = require('http').createServer(function(req, response){ fs.readFile(__dirname+'/chattr.html', function(err, data){ response.writeHead(200, {'Content-Type':'text/html'}); response.write(data); response.end(); });});server.listen(8080);var nowjs = require("now");var everyone = nowjs.initialize(server);

everyone.on("connect", function(){ console.log("Joined: " + this.now.name);});

everyone.on("disconnect", function(){ console.log("Left: " + this.now.name);});

everyone.now.distributeMessage = function(message){ everyone.now.receiveMessage(this.now.name, message);};

JQuery + Now.js PoChttps://github.com/wearefractal/Chattr-JQuery-PoC

Pros• Super easy + fast • Looks good

Cons• Was in alpha forever• Beta = alpha• Orientation on device rotate etc• Just not quite there

Zepto + Now.js PoChttps://github.com/wearefractal/Chattr-Zepto-PoC

Pros• Super lightweight (~2k filesize)• JQuery-compatible syntax• Decent skin OOTB

Cons• Not mature enough

http://zeptojs.com/

We went with Sencha Touch

Pros• Very mature• Good looking

Cons• Code• Licensing

http://www.sencha.com/products/touch/

Now.jshttps://github.com/wearefractal/Chattr-JQuery-PoC https://github.com/wearefractal/Chattr-Zepto-PoC

Pros• Super easy to set up client -> server communication • Has baked-in grouping (pub-sub)

Cons• WTF is a magic pocket?• Almost 2k LoC – WTF??

http://nowjs.com

We went with

http://socket.io/

Database

• Document-oriented DB• Dynamic Schemas, Auto-sharding, Map-reduce, Geo support• Best for storing structured data • Best drop-in replacement for MySQL or similar imo• http://www.mongodb.org/display/DOCS/Comparing+Mongo+DB+and+Couch+DB

http://www.mongodb.org/

http://mongoosejs.com/

• ORM-like module for node

Database

• In-memory, persistent, journaled key-value store• Achieve persistent shared memory

Mongo vs Redis

2 different use cases for us –• Mongo for traditional persistence• Redis for pub-sub for chat

http://redis.io/

Application Framework

Pros• Lots of traction, examples • 3rd party modules• Projects built on it • Website looks good?

Cons• Too much code!• Focus on routing, view rendering, etc do not need• Older-style paradigm imo

http://expressjs.com/

Application Framework

Pros• Embraces Single Page Application (SPA) paradigm• websockets, no HTTP routing• Coffeescript friendly

Cons• Too many features / too much code!

https://github.com/socketstream/socketstream

• DDD-based – only artefacts: Models, Services, Commands, Views• o. = jquery-like convienence lib for both client and server• single entry-point for incoming data, all data is sanitized before it’s accesed by services • only models are passed from client to server, no loose vars• tuneable communication layer abuse levels • obfuscation

ModelRequest{ module: 'Chat', model: 'Chatroom', type: 'find', query: {

}, mid: 'SessionID'}

Plugs• Commander – CLI microframework for node.js• Orchid web framework• Kyuzo

Demo / QA