The New Web

acceptableseashoreSecurity

Nov 5, 2013 (3 years and 9 months ago)

78 views

The New Web

Stateful, Realtime, Programmable


Chris Gomez

chris@chrisgomez.com

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

NoSQL

MongoDB

RavenDB

HTTP

AJAX

ASP.NET Web API

Cassandra

CouchDB

NodeJS

Jade

JSONP

Cookies

Linq

to SQL

SQL Server Express

SQL Server Compact

ASP.NET MVC

EF 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 Session

State!

Great, thanks!

Here’s how

the web page

looks 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?

Requests

Web
Server

This is Chris, I moved

token #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 build

http://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 App

SignalR


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 Context

Exposes a CLR object like “map”


Exposes public methods:
GetTokenList
()