More or less, it’s been two decades of the web. At first, we just made http calls from browsers and rendered markup. Things have changed quite a bit, in terms of the frameworks we use.
Consider EaselJS, part of CreateJS (www.CreateJS.com) or KineticJS (http://kineticjs.com/) for HTML5 canvas libraries. You also can consider ImpactJS if you are interested in games, as it is focused squarely on game development.
Create a new stage, add “children” which can be Bitmaps, SpriteSheets, Shapes, or other drawings. Tell the Ticker how fast you want your render loop to go (17 means update every 17ms which comes out to 60 frames per second)
Find the latest documentation here: http://createjs.com/Docs/EaselJS/classes/Touch.html
SignalR is now 1.0! You now longer have to set to “Include Prerelease” to get the NuGet Packages. SignalR used to have a home on the web at http://SignalR.Net, but that wasn’t working recently and there is an official ASP.NET home at: http://www.asp.net/signalr.
Learn from the source! This build talk is the most direct information on SignalR’s intent, goals, and future.
The Realtime Web: Stateful and Programmable
The New WebStateful, Realtime, ProgrammableChris Gomezchris@chrisgomez.comwww.chrisgomez.comTwitter: @SpaceShot
Eventboard Use Eventboard to evaluate presentationstoday. Available for Windows 8, and Mobile… iOs,Android, Windows Phone
Definitions “AJAX” – xmlhttprequest, calling back toserver without page refresh “HTML5” - “Modern Browsers” – Latest Firefox orChrome, IE 9 or 10 (lean towards 10).
XMLRuby On RailsSinatraODBCRequestsDeveloping for the WebDatabase WebServerClassic ASPAccess Static HTMLCGI/ISAPIASP.NET (WebForms)SQL ServerNoSQLMongoDBRavenDBHTTPAJAXASP.NET Web APICassandraCouchDBNodeJSJadeJSONPCookiesLinq to SQLSQL Server ExpressSQL Server CompactASP.NET MVCEF CodeFirst
RequestsThe Stateless Web(or “Who are you? What’s going on here?”)Database WebServerHey, it’s John BairdWho?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?RequestsWebServerThis is Chris, I movedtoken #1 to 100,100John moved token #2to 400,100
Board game scenario All players can join at any time and view the gamestate 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 scriptinglanguage.
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 theonly guy looking at this
EaselJS Part of CreateJS Suite (www.createjs.com)
EaselJS APIStage – Manages a canvas for youTicker – Represents the “Game loop” or “render loop”Bitmap – Represents a bitmap on a canvasSpriteSheet – Assists in keyframe (flipbook) styleanimationTouch – 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 gamestate as it happensI deliver HTML/JS tobootstrapWeb Server--MVC on IIS—RequestsGame Board ArchectitureConsole AppSignalR“GameHub”