Hangman for the MassesA Showcase of Web Tech

Who Am I• Ex-Googler• M.S. Electrical Engineering, UCLA• B.S. Electrical Engineering, UTSA• CTO, GMG Agency, LLC• MooTools Core Developer• Tech Tuesdays Organizer

Expectations• Have fun and learn something new• Invite you to code, or pay someone to code• Appreciate Web Tech• Don’t read the code, unless you want to

Code Available on Githubgithub.com/ibolmo/hangmanapp

Building Hangman, or An App1.Requirements2.Research3.Implementation4.Deployment5.Have a Brewski (Profit), and repeat

Requirements (Business Logic/Specs)

• Anyone can take turns• Anyone can contribute solutions and hints• Display a running countdown• Show points accumulated• Show show animated hangman• Show spaces left to be guessed...

Requirements (Platform/Technical Reqs.)

• Real-time updates• Broadcast updates to all players• Mobile-ready (lightweight, and responsive)• Cross-browser (Chrome, Firefox, Safari, IE)

Research (Real-time Updates)

CurrentPrevious

Frameworks

Tech WebSocketsRefresh

Long PollingFlash

Ajax Push Engine

Research (Real-time Updates Winner)

• Pure Javascript• Data Synchronization• Latency Compensation• Live Updates• Hot Code Pushes

I’m in no way associated with Meteor.com

meteor.comMeteor is an open-source platform for building top-

quality web apps in a fraction of the time.

Tech Review: Node.JS nodejs.org

Arguably in Everyone’s Mind

Ruby on Rails

Node.JS

Credit: Google Trends Jan. 2012 to Oct. 2013

Tech Review: JavaScript Language

Virtually Guaranteed a JobCredit: Google Trends Jan. 2012 to Oct. 2013

JavaScript 50,091

C++31,426

Python23,392

Ruby14,347

Implementation• Installation and Test• Prepare Client• Prepare Models• Prepare Server• Secure• Deploy

Incoming Code

Focus on explanation, and review code later.

hangmanapp.meteor.com

• Mac / Linux Only (Windows coming soon™) > curl https://install.meteor.com | /bin/sh• Create project > meteor create hangman && cd hangman• Test > meteor

Installation

Prepare Client (client.js, hangman.html)

Objective: Define client sections/content that is dynamic and programmable.

• Create your layout• Convert to template sections• Define the Templates for each section

Prepare Client (client.js, hangman.html)

Example: How to define sections, templates, and the display logic.

Prepare Client (model.js)

Objective: Define the data you’d like to keep.

• Optionally, define code that is shared between the client and the server.

Prepare Models (model.js)

Example: Complete contents of the model.js file.

Prepare Server (server.js)

Objective: Define the how the client should interact with the server, and any business logic.

• Define processing and publishing of data• Referee and arbitrate the game

Prepare Server (server.js)

Example: Methods available to the client.

Prepare Server (client.js, server.js)

Example: How does the guess method get called?

Secure the ApplicationBy default the application is insecure and all clients receive a copy of all the data.

Why? Because it’s easier to develop the app.

To secure you remove the autopublish and insecure packages. Then, define what is allowed and published.

Prepare Server (server.js, client.js)

Example: Securing the application.

Deploy the ApplicationAs simple as running a single command > meteor deploy hangmanapp.meteor.com

Once deployed all clients will receive the latest code.

hangmanapp.meteor.com

• Real-Time Dashboards• Chatrooms (Help Desk/Live Chat)• Auto-Updating/Optimizing Websites• Advertising/Interactive Displays

Other Applications

Quick-Plug: Hackathons• Bi-weekly event• 7:30 PM until bust (or 2 a.m.)• Moonbeans on 10th St.• Join Meetup group for more info:

www.meetup.com/mcallen-tech-developers

Questions?

Olmo Maldonado@ibolmo

github.com/ibolmo

www.gmgagency.com