Massive Fun
  Building Scrabbly


   Grant Goodale
 twitter: @ggoodale
Scrabbly?

• http://scrabb.ly
• Massively Multiplayer “Crossword Game”
• Original version built in 48 hours
• http://nodeknockout.com
• @aviel, @damon, @railsjedi & me
Scrabbly!
The good stuff

• Implemented entirely in HTML5, CSS and
  Javascript - front to back.
• (Okay, map generation is in ruby.)
• Works in Safari, Chrome, FF, IE, Mobile
  Webkit
Lots of Open Source
Awesome Services
How it works

• Front end is a JQuery client-side web
  application
• Node backend exports a simple JSON API
• MongoDB stores game state
• Browser events handled via Pusher
How it works

• Node.js as the back end: http://nodejs.org
• Google’s V8 JS engine with evented I/O
  added
• Blazingly fast, stable (for us)
• Note: Not an Apache replacement
How it works

• Express Web framework:
 • http://expressjs.com
 • Similar to Sinatra for ruby
• Middleware: Connect
 • Like Rack (again, for ruby)
How it works
• MongoDB on the back end
 • http://mongodb.org
 • Awesome for rapid development
 • 2d geospatial indexing makes Scrabbly
    possible
• Several 3rd party hosting companies
How it works
• Messaging handled via Pusher
 • http://pusherapp.com
 • trivial to implement, rock solid
 • 500k messages/hour peak
 • 170 avg. simultaneous connections first
    day
The World
The Experience




http://www.startupmonkeys.com/2010/09/
building-a-scrabble-mmo-in-48-hours/
The Experience

• 48 hours is NOT very long.
• Do everything you can ahead of time: paper
  prototypes, UI designs
• Feedback! Show it around. Iterate.
• Aggressively scope. Leave an out.
Questions?

• Twitter: @ggoodale
• Email: grant@moreblinktag.com
• Go play! http://scrabb.ly

Scrabbly GTUG presentation

  • 1.
    Massive Fun Building Scrabbly Grant Goodale twitter: @ggoodale
  • 2.
    Scrabbly? • http://scrabb.ly • MassivelyMultiplayer “Crossword Game” • Original version built in 48 hours • http://nodeknockout.com • @aviel, @damon, @railsjedi & me
  • 3.
  • 4.
    The good stuff •Implemented entirely in HTML5, CSS and Javascript - front to back. • (Okay, map generation is in ruby.) • Works in Safari, Chrome, FF, IE, Mobile Webkit
  • 5.
  • 6.
  • 7.
    How it works •Front end is a JQuery client-side web application • Node backend exports a simple JSON API • MongoDB stores game state • Browser events handled via Pusher
  • 8.
    How it works •Node.js as the back end: http://nodejs.org • Google’s V8 JS engine with evented I/O added • Blazingly fast, stable (for us) • Note: Not an Apache replacement
  • 9.
    How it works •Express Web framework: • http://expressjs.com • Similar to Sinatra for ruby • Middleware: Connect • Like Rack (again, for ruby)
  • 10.
    How it works •MongoDB on the back end • http://mongodb.org • Awesome for rapid development • 2d geospatial indexing makes Scrabbly possible • Several 3rd party hosting companies
  • 11.
    How it works •Messaging handled via Pusher • http://pusherapp.com • trivial to implement, rock solid • 500k messages/hour peak • 170 avg. simultaneous connections first day
  • 12.
  • 13.
  • 14.
    The Experience • 48hours is NOT very long. • Do everything you can ahead of time: paper prototypes, UI designs • Feedback! Show it around. Iterate. • Aggressively scope. Leave an out.
  • 15.
    Questions? • Twitter: @ggoodale •Email: grant@moreblinktag.com • Go play! http://scrabb.ly