This document discusses the evolving web from a stateless to a stateful and real-time model. It describes challenges with the traditional stateless web and introduces concepts like WebSockets and SignalR that enable real-time functionality. Examples are given of a multiplayer game that maintains a shared game state and allows players to update and see changes in real-time. Frameworks like EaselJS, SignalR, and hosting JavaScript engines on servers are presented as technologies to build such stateful and real-time web applications.

1. The New Web
Stateful, Realtime, Programmable
Chris Gomez
chris@chrisgomez.com
www.chrisgomez.com
Twitter: @SpaceShot

2. Eventboard
 Use Eventboard to evaluate presentations
today.
 Available for Windows 8, and Mobile… iOs,
Android, Windows Phone

3. Definitions
 “AJAX” – xmlhttprequest, calling back to
server without page refresh
 “HTML5” -
 “Modern Browsers” – Latest Firefox or
Chrome, IE 9 or 10 (lean towards 10).

4. XML
Ruby On Rails
Sinatra
ODBC
Requests
Developing for the Web
Database Web
Server
Classic ASP
Access Static HTML
CGI/ISAPI
ASP.NET (WebForms)
SQL Server
NoSQLMongoDB
RavenDB
HTTP
AJAX
ASP.NET Web APICassandra
CouchDB
NodeJS
Jade
JSONP
CookiesLinq to SQL
SQL Server Express
SQL Server Compact
ASP.NET MVC
EF Code
First

5. Requests
The Stateless Web
(or “Who are you? What’s going on here?”)
Database Web
Server
Hey, it’s John Baird
Who?
Ugh, you forgot?
Try a cookie?
Hold a sec…
Let’s see…
Jim Bear…
John Barker…
John… Baird!
Here’s Session
State!
Great, thanks!
Here’s how
the web page
looks now!
Finally…

6. When does this approach break down?
 Loading of complex and fast changing state
 Realtime updates to the browser
 Working around the “page cycle”

7. What’s a “Stateful” Web Server?
Requests
Web
Server
This is Chris, I moved
token #1 to 100,100
John moved token #2
to 400,100

8. Board game scenario
 All players can join at any time and view the game
state as it currently is
 All players can join a chat and talk in real time
 All players can move game tokens around at any time
 Other players see the tokens in motion
• The environment is extensible via a common scripting
language.

9. File > New Project
 ASP.NET MVC 4 Web Application
 Empty Project (nothing done for you)
 No Unit Tests / Razor
 Just using MVC as a means to quickly deliver a web page

10. Steve Sanderson’s “App” Layouts
 http://blog.stevensanderson.com/2011/10/05/full-
height-app-layouts-a-css-trick-to-make-it-easier/
 Don’t think this is the only way or the only place or the
only guy looking at this

11. HTML5 Canvas
 “Immediate Mode” rendering
 <canvas> tag
 Only accessible via JavaScript
Use a library or toolkit!

12. EaselJS
 Part of CreateJS Suite (www.createjs.com)

13. EaselJS API
Stage – Manages a canvas for you
Ticker – Represents the “Game loop” or “render loop”
Bitmap – Represents a bitmap on a canvas
SpriteSheet – Assists in keyframe (flipbook) style
animation
Touch – assists with Touch support in Chrome.Firefox, IE10

14. SignalR
 Started as open source project (within Microsoft ASP.NET team)
 In PreRelease as a full member of ASP.NET.
 Moving into Microsoft.AspNet.SignalR
 Supporting web clients and ASP.NET servers
 Also supports .NET Clients and WinRT clients.
 You can “self-host”
Version 1.0!!

15. Building Real-time Web Apps at build
http://channel9.msdn.com/Events/Build/2012/3-034/player

16. I maintain & update game
state as it happens
I deliver HTML/JS to
bootstrap
Web Server
--MVC on IIS—
Requests
Game Board Archectiture
Console App
SignalR
“GameHub”

17. JavaScript Engines
 NOT the same as letting user script run in the browser
 This is running on the server
 Use a Javascript implementation to drive adoption of your API
or platform
 There are Javascript developers already out there!
 No one writes CustomSuperDuperScriptXPlus!

18. Hosting Javascript
Console App
JavaScript Engine Context
Exposes a CLR object like “map”
Exposes public methods: GetTokenList()