Slide 1

Slide 1 text

Node Defender Building a Websocket Game with Node

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

What is Node Defender?

Slide 4

Slide 4 text

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.

Slide 5

Slide 5 text

What does it look like?

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

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.

Slide 8

Slide 8 text

Infrastructure

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

Game Design

Slide 13

Slide 13 text

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.

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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!

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Grunt! The Javascript Task Runner Seriously, without Grunt this game wouldn't be what it is.

Slide 18

Slide 18 text

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.

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

Play Online tinyurl.com/zumbagame Top scores will receive prizes!