• Save
RIA / SPA with ASP.NET
Upcoming SlideShare
Loading in...5
×
 

RIA / SPA with ASP.NET

on

  • 984 views

How to develop SPA apps with ASP.NET

How to develop SPA apps with ASP.NET

Statistics

Views

Total Views
984
Views on SlideShare
984
Embed Views
0

Actions

Likes
1
Downloads
0
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

RIA / SPA with ASP.NET RIA / SPA with ASP.NET Presentation Transcript

  • 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? View slide
  • 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 View slide
  • 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
  • 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
  • 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: 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
  • Server ClientWeb UIHTML/CSS/JSData servicesJSON/XMLApplication layerJavaScriptVisible UIHTML/CSSData access layerJavaScriptLocal storageNavigationAPIsMVC, WEBFORMSKNOCKOUTWEB APIBREEZEHISTORY.JSHTML5
  • 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
  • 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!
  • 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”}
  • 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 can perform authorization imperatively by returning a 401 Unauthorizedstatus code.Remember to enable Forms Authentication in the Web.config file.
  • 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()
  • 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
  • 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