The New Web Stateful, Realtime, Programmable

The New WebStateful, Realtime, Programmable Chris Gomezchris@chrisgomez.comwww.chrisgomez.com Twitter: @SpaceShot

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

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

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

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

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

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.

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

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

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

EaselJS • Part of CreateJS Suite (www.createjs.com)

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

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!!

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

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

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!

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

The New Web Stateful, Realtime, Programmable