The Realtime Web: Stateful and Programmable
Download as PPT, PDF0 likes679 views
This document discusses the evolving web from a stateless to a stateful and real-time model. It describes challenges with the traditional stateless web and introduces concepts like WebSockets and SignalR that enable real-time functionality. Examples are given of a multiplayer game that maintains a shared game state and allows players to update and see changes in real-time. Frameworks like EaselJS, SignalR, and hosting JavaScript engines on servers are presented as technologies to build such stateful and real-time web applications.
The Realtime Web: Stateful and Programmable
- 1. The New Web Stateful, Realtime, Programmable Chris Gomez chris@chrisgomez.com www.chrisgomez.com Twitter: @SpaceShot
- 2. Eventboard Use Eventboard to evaluate presentations today. Available for Windows 8, and Mobile… iOs, Android, Windows Phone
- 3. Definitions “AJAX” – xmlhttprequest, calling back to server without page refresh “HTML5” - “Modern Browsers” – Latest Firefox or Chrome, IE 9 or 10 (lean towards 10).
- 4. 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 RavenDB HTTP AJAX ASP.NET Web APICassandra CouchDB NodeJS Jade JSONP CookiesLinq to SQL SQL Server Express SQL Server Compact ASP.NET MVC EF Code First
- 5. 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…
- 6. When does this approach break down? Loading of complex and fast changing state Realtime updates to the browser Working around the “page cycle”
- 7. 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
- 8. 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.
- 9. 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
- 10. 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
- 11. HTML5 Canvas “Immediate Mode” rendering <canvas> tag Only accessible via JavaScript Use a library or toolkit!
- 12. EaselJS Part of CreateJS Suite (www.createjs.com)
- 13. 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
- 14. 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!!
- 15. Building Real-time Web Apps at build http://channel9.msdn.com/Events/Build/2012/3-034/player
- 16. 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”
- 17. 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!
- 18. Hosting Javascript Console App JavaScript Engine Context Exposes a CLR object like “map” Exposes public methods: GetTokenList()
Editor's Notes
- #5: 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.
- #13: 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.
- #14: 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)
- #15: Find the latest documentation here: http://createjs.com/Docs/EaselJS/classes/Touch.html
- #16: 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.
- #17: Learn from the source! This build talk is the most direct information on SignalR’s intent, goals, and future.
- #19: Some JavaScript Engines for .NET