Geo chat

3,593 views

Published on

Published in: Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,593
On SlideShare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
29
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Geo chat

  1. 1. Building a GeoChat mobile app <br />and the birth of a web framework<br />Aaron Murray & Eric Schoffstall<br />@WeAreFractal<br />
  2. 2. What are we building?<br />Chattr is a mobile chat app that lets you open up a chatroom based on your geographic location<br />What are our technical requirements?<br />Node.js <br />Websockets<br />Native Mobile App for iOS, Android<br />Coffescript friendly<br />
  3. 3. What do we need?<br />Native Mobile Bridge<br />Titanium, Phonegap<br />Mobile Web Framework <br />JQuery Mobile, Titanium, Sencha Touch, Dojo Mobile, Zepto.js<br />Communication<br />Socket.io, Now.js<br />Database<br />MongoDB, CouchDB, Redis<br />ORM <br />Mongoose<br />Application Framework<br />Express, SocketStream<br />
  4. 4. Native Mobile Bridge<br />Titanium Mobile<br />(http://www.appcelerator.com/products/)<br />Compile JS + HTML + CSS + Titanium APIs to native code<br />Native UI<br />Use your web skills to build <br />
  5. 5. Native Mobile Bridge<br />Titanium Mobile<br />(http://www.appcelerator.com/products/)<br />
  6. 6. Native Mobile Bridge<br />http://www.phonegap.com/<br />ACTUALLY native web technologies <br />Wrapped in a webkit renderer<br />Bridged to iOS and android <br />Have to run vanilla eclipse (not aptana)<br />Android emulator is absurd – debug on your phone<br />
  7. 7. JQuery + Now.js PoChttps://github.com/wearefractal/Chattr-JQuery-PoC<br />
  8. 8. JQuery + Now.js PoChttps://github.com/wearefractal/Chattr-JQuery-PoC<br />varfs= require('fs');<br />var server = require('http').createServer(function(req, response){<br />  fs.readFile(__dirname+'/chattr.html', function(err, data){<br />    response.writeHead(200, {'Content-Type':'text/html'}); <br />    response.write(data); <br />    response.end();<br />  });<br />});<br />server.listen(8080);<br />varnowjs= require("now");<br />var everyone =nowjs.initialize(server);<br />everyone.on("connect", function(){<br />  console.log("Joined: " +this.now.name);<br />});<br />everyone.on("disconnect", function(){<br />  console.log("Left: " +this.now.name);<br />});<br />everyone.now.distributeMessage=function(message){<br />  everyone.now.receiveMessage(this.now.name, message);<br />};<br />
  9. 9. JQuery + Now.js PoChttps://github.com/wearefractal/Chattr-JQuery-PoC<br />Pros<br /><ul><li> Super easy + fast
  10. 10. Looks good </li></ul>Cons<br /><ul><li> Was in alpha forever
  11. 11. Beta = alpha
  12. 12. Orientation on device rotate etc
  13. 13. Just not quite there</li></li></ul><li>Zepto + Now.js PoChttps://github.com/wearefractal/Chattr-Zepto-PoC<br />http://zeptojs.com/<br />Pros<br /><ul><li> Super lightweight (~2k filesize)
  14. 14. JQuery-compatible syntax
  15. 15. Decent skin OOTB </li></ul>Cons<br /><ul><li> Not mature enough</li></li></ul><li>We went with Sencha Touch<br />http://www.sencha.com/products/touch/<br />Pros<br /><ul><li> Very mature
  16. 16. Good looking</li></ul>Cons<br /><ul><li> Code
  17. 17. Licensing </li></li></ul><li>Now.jshttps://github.com/wearefractal/Chattr-JQuery-PoC https://github.com/wearefractal/Chattr-Zepto-PoC<br />http://nowjs.com<br />Pros<br /><ul><li> Super easy to set up client -> server communication
  18. 18. Has baked-in grouping(pub-sub)</li></ul>Cons<br /><ul><li> WTF is a magic pocket?
  19. 19. Almost 2k LoC – WTF??</li></ul>We went with<br />http://socket.io/<br />
  20. 20. Database<br />http://www.mongodb.org/<br /><ul><li> Document-oriented DB
  21. 21. Dynamic Schemas, Auto-sharding, Map-reduce, Geo support
  22. 22. Best for storing structured data
  23. 23. Best drop-in replacement for MySQL or similar imo
  24. 24. http://www.mongodb.org/display/DOCS/Comparing+Mongo+DB+and+Couch+DB</li></ul>http://mongoosejs.com/<br /><ul><li> ORM-like module for node </li></li></ul><li>Database<br />http://redis.io/<br /><ul><li> In-memory, persistent, journaled key-value store
  25. 25. Achieve persistent shared memory </li></ul>Mongo vsRedis<br />2 different use cases for us –<br /><ul><li> Mongo for traditional persistence
  26. 26. Redis for pub-sub for chat </li></li></ul><li>Application Framework<br />http://expressjs.com/<br />Pros<br /><ul><li> Lots of traction, examples
  27. 27. 3rd party modules
  28. 28. Projects built on it
  29. 29. Website looks good?</li></ul>Cons<br /><ul><li> Too much code!
  30. 30. Focus on routing, view rendering, etc do not need
  31. 31. Older-style paradigm imo</li></li></ul><li>Application Framework<br />https://github.com/socketstream/socketstream<br />Pros<br /><ul><li> Embraces Single Page Application (SPA) paradigm
  32. 32. websockets, no HTTP routing
  33. 33. Coffeescript friendly </li></ul>Cons<br /><ul><li> Too many features / too much code!</li></li></ul><li>
  34. 34.
  35. 35.
  36. 36. <ul><li> DDD-based – only artefacts: Models, Services, Commands, Views
  37. 37. o. = jquery-like convienence lib for both client and server
  38. 38. single entry-point for incoming data, all data is sanitized before it’s accesed by services
  39. 39. only models are passed from client to server, no loose vars
  40. 40. tuneable communication layer abuse levels
  41. 41. obfuscation</li></ul>ModelRequest<br />{   module: 'Chat',   model: 'Chatroom',   type: 'find',   query: {   },   mid: 'SessionID'}<br />
  42. 42. Plugs<br /><ul><li> Commander – CLI microframework for node.js
  43. 43. Orchid web framework
  44. 44. Kyuzo</li></li></ul><li>
  45. 45. Demo / QA<br />

×