Development ofRich Internet Appswith ASP.NETHrvoje Hudoletnjak
AgendaLittle bit of HistoryKnockout (Open Source)Microsoft ASP.NET Web API (Open Source)HTML5 (Open Source)SignalR
Little bit of HistoryThenHTML + CSSFlash / FlexSilverlightNowHTML5 / CSS3 / JavaScriptFuture?Native or plugin?
What is a Single Page App?Server-Side AppPage rendered from the serverASP.NET WebForms / MVCSinglePage AppPage rendered fr...
Why Single Page Apps?The problem with server-side apps:Server-Side Apps are StatelessThe Presentation Layer is Miles AwayS...
KnockoutMVVM for JavaScriptOpen-source framework created by Steven SandersonIncluded with ASP.NET MVC 4 (works with Web Fo...
KnockoutObserver Pattern:An object maintains a list of observers. When the object changes, theobservers are notified.
// Create view modelvar viewModel = {product: {name: ko.observable("Milk"),price: ko.observable(2.99)},updateProduct: func...
Server ClientWeb UIHTML/CSS/JSData servicesJSON/XMLApplication layerJavaScriptVisible UIHTML/CSSData access layerJavaScrip...
What is the ASP.NET Web API?ASP.NET MVC Controllersreturn views (HTML)derives from Controller base classASP.NET API Contro...
What is the ASP.NET Web API?What is it Good For?Public Web APITwitter, Salesforce.com, StackOverflowSingle Page Apps (SPA)...
Model BindingConverts form post into a strongly typed C# class:{ “id”: 23, “title”: “Star Wars”, “director”: “Lucas”}Conve...
ValidationYou can use validation attributes with the Web API:Required, StringLength, Range, and so on
AuthorizationYou can perform authorization declaratively by using the [Authorize]attribute with API controller methods.You...
HTML5HTML5 (and related standards) adds support for:Client-Side Validation – Input validation in the browser.Web Storage –...
Web SocketsFull duplex client-server communicationSignalR (Open Source)WebSockets on IIS 8 + IE10/Chrome/FirefoxFallback t...
Thank you! Questions?Hrvoje Hudoletnjak software developer, MVP for ASP.NET/IIShttp://hudosvibe.nethttp://twitter.com/hhrv...
Upcoming SlideShare
Loading in...5
×

RIA / SPA with ASP.NET

1,604

Published on

How to develop SPA apps with ASP.NET

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

No Downloads
Views
Total Views
1,604
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

RIA / SPA with ASP.NET

  1. 1. Development ofRich Internet Appswith ASP.NETHrvoje Hudoletnjak
  2. 2. AgendaLittle bit of HistoryKnockout (Open Source)Microsoft ASP.NET Web API (Open Source)HTML5 (Open Source)SignalR
  3. 3. Little bit of HistoryThenHTML + CSSFlash / FlexSilverlightNowHTML5 / CSS3 / JavaScriptFuture?Native or plugin?
  4. 4. What is a Single Page App?Server-Side AppPage rendered from the serverASP.NET WebForms / MVCSinglePage AppPage rendered from the browserOnly one actual page is loadedASP.NET REST API + Client side code
  5. 5. Why Single Page Apps?The problem with server-side apps:Server-Side Apps are StatelessThe Presentation Layer is Miles AwayServer-Side Apps don’t respect the web
  6. 6. KnockoutMVVM for JavaScriptOpen-source framework created by Steven SandersonIncluded with ASP.NET MVC 4 (works with Web Forms)Available through NuGet with:Install-Package KnockoutJS
  7. 7. KnockoutObserver Pattern:An object maintains a list of observers. When the object changes, theobservers are notified.
  8. 8. // Create view modelvar viewModel = {product: {name: ko.observable("Milk"),price: ko.observable(2.99)},updateProduct: function() {alert(viewModel.product.name());}};// Bind view model to DOMko.applyBindings(viewModel);Name:<input data-bind="value:product.name" />Price:<input data-bind="value:product.price" /><button data-bind="click:updateProduct">Update</button>Knockout two-way databindingJavascriptHTML
  9. 9. Server ClientWeb UIHTML/CSS/JSData servicesJSON/XMLApplication layerJavaScriptVisible UIHTML/CSSData access layerJavaScriptLocal storageNavigationAPIsMVC, WEBFORMSKNOCKOUTWEB APIBREEZEHISTORY.JSHTML5
  10. 10. What is the ASP.NET Web API?ASP.NET MVC Controllersreturn views (HTML)derives from Controller base classASP.NET API Controllersreturn data (JSON, XML)derives from ApiController base classuses POST, GET, PUT, DELETE
  11. 11. What is the ASP.NET Web API?What is it Good For?Public Web APITwitter, Salesforce.com, StackOverflowSingle Page Apps (SPA)A single view is rendered to the browser and all updates to the view aremade using jQuery with the Web API. No Postbacks!
  12. 12. Model BindingConverts form post into a strongly typed C# class:{ “id”: 23, “title”: “Star Wars”, “director”: “Lucas”}Converts to:new Movie { Id=23, Title=“Star Wars”, Director=“Lucas”}
  13. 13. ValidationYou can use validation attributes with the Web API:Required, StringLength, Range, and so on
  14. 14. AuthorizationYou can perform authorization declaratively by using the [Authorize]attribute with API controller methods.You can perform authorization imperatively by returning a 401 Unauthorizedstatus code.Remember to enable Forms Authentication in the Web.config file.
  15. 15. HTML5HTML5 (and related standards) adds support for:Client-Side Validation – Input validation in the browser.Web Storage – Store key value pairs in big, persistent cookies.IndexedDB – Standard API for interacting with in-browser database (SQLCompact, MySQL)Web Sockets – Asynchronous communication with a two-way open socket.Validation adds two new attributes: required, patternSupports custom validation with new JavaScript method:setCustomValidity()
  16. 16. Web SocketsFull duplex client-server communicationSignalR (Open Source)WebSockets on IIS 8 + IE10/Chrome/FirefoxFallback to AJAX polling duplexpublic class Chat : Hub{public void Send(string message){Clients.All.addMessage(message);}}var chat = $.connection.chat;chat.client.addMessage = function (message) {$(#messages).append(<li> + message +</li>);};$.connection.hub.start();C# Javascript
  17. 17. Thank you! Questions?Hrvoje Hudoletnjak software developer, MVP for ASP.NET/IIShttp://hudosvibe.nethttp://twitter.com/hhrvojehrvoje@hudoletnjak.comSome slides by Stephen Walther from http://Superexpert.com

×