Presented at Tech Tuesdays in Edinburg, TX. In this presentation, a sample Hangman game made with MeteorJS. Source code available at: github.com/ibolmo/hangmanapp

1. Hangman for the Masses
A Showcase of Web Tech

2. 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

3. 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 Github
github.com/ibolmo/hangmanapp

4. Building Hangman, or An App
1.Requirements
2.Research
3.Implementation
4.Deployment
5.Have a Brewski (Profit), and repeat

5. 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
...

6. Requirements (Platform/Technical Reqs.)
• Real-time updates
• Broadcast updates to all players
• Mobile-ready (lightweight, and responsive)
• Cross-browser (Chrome, Firefox, Safari, IE)

7. Research (Real-time Updates)
CurrentPrevious
Frameworks
Tech WebSockets
Refresh
Long Polling
Flash
Ajax
Push
Engine

8. 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.com
Meteor is an open-source
platform for building top-
quality web apps
in a fraction of the time.

9. Tech Review: Node.JS
nodejs.org
Arguably in Everyone’s Mind
Ruby on Rails
Node.JS
Credit: Google Trends Jan. 2012 to Oct. 2013

10. Tech Review: JavaScript Language
Virtually Guaranteed a Job
Credit: Google Trends Jan. 2012 to Oct. 2013
JavaScript
50,091
C++
31,426
Python
23,392
Ruby
14,347

11. Implementation
• Installation and Test
• Prepare Client
• Prepare Models
• Prepare Server
• Secure
• Deploy
Incoming Code
Focus on explanation,
and review code later.

12. hangmanapp.meteor.com

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

14. 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

15. Prepare Client (client.js, hangman.html)
Example: How to define sections, templates, and the display logic.

16. 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.

17. Prepare Models (model.js)
Example: Complete contents of the model.js file.

18. 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

19. Prepare Server (server.js)
Example: Methods available to the client.

20. Prepare Server (client.js, server.js)
Example: How does the guess method get called?

21. Secure the Application
By 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.

22. Prepare Server (server.js, client.js)
Example: Securing the application.

23. Deploy the Application
As simple as running a single command
> meteor deploy hangmanapp.meteor.com
Once deployed all clients will receive the
latest code.

24. hangmanapp.meteor.com

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

26. 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

27. Questions?
Olmo Maldonado
@ibolmo
github.com/ibolmo
www.gmgagency.co
m