The New WebStateful, Realtime, Programmable

Chris Gomezchris@chrisgomez.comwww.chrisgomez.com

Twitter: @SpaceShot

Eventboard

Use Eventboard to evaluate presentations today.

Available for Windows 8, and Mobile… iOs, Android, Windows Phone

Definitions

“AJAX” – xmlhttprequest, calling back to server without page refresh

“HTML5” - “Modern Browsers” – Latest Firefox or

Chrome, IE 9 or 10 (lean towards 10).

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

RavenDBHTTP

AJAXASP.NET Web APICassandra

CouchDB

NodeJS

Jade

JSONP

CookiesLinq to SQL

SQL Server ExpressSQL Server Compact

ASP.NET MVCEF Code

First

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

Great, thanks!Here’s howthe web pagelooks now!

Finally…

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?

RequestsWeb Server

This is Chris, I movedtoken #1 to 100,100

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

I maintain & update game state as it happens

I deliver HTML/JS to bootstrap

Web Server--MVC on IIS—

Requests

Game Board Archectiture

Console AppSignalR

“GameHub”

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 ContextExposes a CLR object like “map”

Exposes public methods: GetTokenList()