Node Defender: Building a Websocket Game with Node

A short talk on the process and tools we used to create a websocket game geared towards developers.

Transcript

1. Node Defender Building a Websocket Game with Node
2. Chris Saylor Lead Engineer Stephen Young Senior Engineer @cjsaylor @young_steveo 185 countries 14 million weekly class participants 15 million monthly pageviews ~30 million monthly service requests Zumba Fitness @zumbatech
3. What is Node Defender?
4. Node Defender is a game for developers where the objective is to craft the best possible strategy to defend against the server's onslaught of enemies.
5. What does it look like?
7. Why did we build this? We wanted to build something that would be fun for developers to hack on at our booth. We wanted to build a tool that can help teach javascript. We wanted to experiment with real-time applications.
8. Infrastructure
9. Overview Two servers (Heroku dynos) Client server for hosting game assets and interface Game server for hosting game logic and leaderboard MongoDB - Sessions and Game results Redis - Multi-server socket.io pubsub
11. Using allows easy scaling, configuration changes, and viewing logs from the command line. Uses for deployments. HTTPS supported for free for the h e r o k u a p p domain. In general, your app configurations should be using environment variables: p r o c e s s . e n v . S O M E V A R Gotcha: Heroku dynamically assigns an internal port via the environment variable: P O R T Uses to run your application, hence the requirement for a P r o c f i l e Provides "addons" which are very convenient services that have SSO and create access configurations automatically. Heroku Toolbelt Git Foreman
12. Game Design
13. Design Goals Simple: easy to grok in 5 minutes. Accessible: beginners should be able to play. Challenging: stay interesting & hard to master. Fun: it's a game where you write code, for crying out loud.
14. Our Process Started with an idea: a Programming Game! Decided from the start to build it in Node.js Collaborated on game design document in Google Drive. Did a lot of brainstorming. a little too much... Threw away ideas that we deemed too complex. Developed game logic using BDD (jasmine tests) Relied on Github issues to track features and bugs
15. The Prototype steps to play the game 1. checkout the client repository 2. modify the strategy files 3. set environment variables 4. run the game with n p m s t a r t 5. all feedback in the console 6. "visualize" the battle in your head somewhat involved but it was fun!
16. So, we built a browser client. Node Template Engine & browser based code editor Canvas framework Bootstrap 3.0 jade Sass Compass RequireJS Ace KineticJS howler.js
17. Grunt! The Javascript Task Runner Seriously, without Grunt this game wouldn't be what it is.
18. What Grunt Did for Us Lint our source files with g r u n t - c o n t r i b - j s h i n t Automate Sass build with g r u n t - c o n t r i b - c o m p a s s Quickly run jasmine tests with j a s m i n e - n o d e All in a matter of milliseconds.
19. If you work with Javascript do yourself a favor and install Grunt. n p m i n s t a l l - g g r u n t - c l i
20. Play Online tinyurl.com/zumbagame Top scores will receive prizes!