Download - The Realtime Web: Stateful and Programmable
![Page 2: The Realtime Web: Stateful and Programmable](https://reader036.vdocuments.site/reader036/viewer/2022081513/559226061a28aba44a8b4637/html5/thumbnails/2.jpg)
Eventboard
Use Eventboard to evaluate presentations today.
Available for Windows 8, and Mobile… iOs, Android, Windows Phone
![Page 3: The Realtime Web: Stateful and Programmable](https://reader036.vdocuments.site/reader036/viewer/2022081513/559226061a28aba44a8b4637/html5/thumbnails/3.jpg)
Definitions
“AJAX” – xmlhttprequest, calling back to server without page refresh
“HTML5” - “Modern Browsers” – Latest Firefox or
Chrome, IE 9 or 10 (lean towards 10).
![Page 4: The Realtime Web: Stateful and Programmable](https://reader036.vdocuments.site/reader036/viewer/2022081513/559226061a28aba44a8b4637/html5/thumbnails/4.jpg)
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
![Page 5: The Realtime Web: Stateful and Programmable](https://reader036.vdocuments.site/reader036/viewer/2022081513/559226061a28aba44a8b4637/html5/thumbnails/5.jpg)
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…
![Page 6: The Realtime Web: Stateful and Programmable](https://reader036.vdocuments.site/reader036/viewer/2022081513/559226061a28aba44a8b4637/html5/thumbnails/6.jpg)
When does this approach break down?
Loading of complex and fast changing state Realtime updates to the browser Working around the “page cycle”
![Page 7: The Realtime Web: Stateful and Programmable](https://reader036.vdocuments.site/reader036/viewer/2022081513/559226061a28aba44a8b4637/html5/thumbnails/7.jpg)
What’s a “Stateful” Web Server?
RequestsWeb Server
This is Chris, I movedtoken #1 to 100,100
John moved token #2 to 400,100
![Page 8: The Realtime Web: Stateful and Programmable](https://reader036.vdocuments.site/reader036/viewer/2022081513/559226061a28aba44a8b4637/html5/thumbnails/8.jpg)
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.
![Page 9: The Realtime Web: Stateful and Programmable](https://reader036.vdocuments.site/reader036/viewer/2022081513/559226061a28aba44a8b4637/html5/thumbnails/9.jpg)
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
![Page 10: The Realtime Web: Stateful and Programmable](https://reader036.vdocuments.site/reader036/viewer/2022081513/559226061a28aba44a8b4637/html5/thumbnails/10.jpg)
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
![Page 11: The Realtime Web: Stateful and Programmable](https://reader036.vdocuments.site/reader036/viewer/2022081513/559226061a28aba44a8b4637/html5/thumbnails/11.jpg)
HTML5 Canvas “Immediate Mode” rendering <canvas> tag Only accessible via JavaScript
Use a library or toolkit!
![Page 12: The Realtime Web: Stateful and Programmable](https://reader036.vdocuments.site/reader036/viewer/2022081513/559226061a28aba44a8b4637/html5/thumbnails/12.jpg)
EaselJS Part of CreateJS Suite (www.createjs.com)
![Page 13: The Realtime Web: Stateful and Programmable](https://reader036.vdocuments.site/reader036/viewer/2022081513/559226061a28aba44a8b4637/html5/thumbnails/13.jpg)
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
![Page 14: The Realtime Web: Stateful and Programmable](https://reader036.vdocuments.site/reader036/viewer/2022081513/559226061a28aba44a8b4637/html5/thumbnails/14.jpg)
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!!
![Page 15: The Realtime Web: Stateful and Programmable](https://reader036.vdocuments.site/reader036/viewer/2022081513/559226061a28aba44a8b4637/html5/thumbnails/15.jpg)
Building Real-time Web Apps at buildhttp://channel9.msdn.com/Events/Build/2012/3-034/player
![Page 16: The Realtime Web: Stateful and Programmable](https://reader036.vdocuments.site/reader036/viewer/2022081513/559226061a28aba44a8b4637/html5/thumbnails/16.jpg)
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”
![Page 17: The Realtime Web: Stateful and Programmable](https://reader036.vdocuments.site/reader036/viewer/2022081513/559226061a28aba44a8b4637/html5/thumbnails/17.jpg)
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!
![Page 18: The Realtime Web: Stateful and Programmable](https://reader036.vdocuments.site/reader036/viewer/2022081513/559226061a28aba44a8b4637/html5/thumbnails/18.jpg)
Hosting Javascript
Console App
JavaScript Engine ContextExposes a CLR object like “map”
Exposes public methods: GetTokenList()