Your SlideShare is downloading. ×
0
The Realtime Web: Stateful and Programmable
The Realtime Web: Stateful and Programmable
The Realtime Web: Stateful and Programmable
The Realtime Web: Stateful and Programmable
The Realtime Web: Stateful and Programmable
The Realtime Web: Stateful and Programmable
The Realtime Web: Stateful and Programmable
The Realtime Web: Stateful and Programmable
The Realtime Web: Stateful and Programmable
The Realtime Web: Stateful and Programmable
The Realtime Web: Stateful and Programmable
The Realtime Web: Stateful and Programmable
The Realtime Web: Stateful and Programmable
The Realtime Web: Stateful and Programmable
The Realtime Web: Stateful and Programmable
The Realtime Web: Stateful and Programmable
The Realtime Web: Stateful and Programmable
The Realtime Web: Stateful and Programmable
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

The Realtime Web: Stateful and Programmable

255

Published on

The Web is

The Web is

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
255
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
2
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • 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.
  • Some JavaScript Engines for .NET
  • Transcript

    1. The New WebStateful, Realtime, ProgrammableChris Gomezchris@chrisgomez.comwww.chrisgomez.comTwitter: @SpaceShot
    2. Eventboard Use Eventboard to evaluate presentationstoday. Available for Windows 8, and Mobile… iOs,Android, Windows Phone
    3. Definitions “AJAX” – xmlhttprequest, calling back toserver without page refresh “HTML5” - “Modern Browsers” – Latest Firefox orChrome, IE 9 or 10 (lean towards 10).
    4. 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
    5. 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…
    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?RequestsWebServerThis is Chris, I movedtoken #1 to 100,100John moved token #2to 400,100
    8. 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.
    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 theonly guy looking at this
    11. HTML5 Canvas “Immediate Mode” rendering <canvas> tag Only accessible via JavaScriptUse a library or toolkit!
    12. EaselJS Part of CreateJS Suite (www.createjs.com)
    13. 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
    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 buildhttp://channel9.msdn.com/Events/Build/2012/3-034/player
    16. I maintain & update gamestate as it happensI deliver HTML/JS tobootstrapWeb Server--MVC on IIS—RequestsGame Board ArchectitureConsole AppSignalR“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 APIor platform There are Javascript developers already out there! No one writes CustomSuperDuperScriptXPlus!
    18. Hosting JavascriptConsole AppJavaScript Engine ContextExposes a CLR object like “map”Exposes public methods: GetTokenList()

    ×