Top 5 Benefits OF Using Muvi Live Paywall For Live Streams
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!
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!
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.