SlideShare a Scribd company logo
Development of
Rich Internet Apps
with ASP.NET
Hrvoje Hudoletnjak
Agenda
Little bit of History
Knockout (Open Source)
Microsoft ASP.NET Web API (Open Source)
HTML5 (Open Source)
SignalR
Little bit of History
Then
HTML + CSS
Flash / Flex
Silverlight
Now
HTML5 / CSS3 / JavaScript
Future?
Native or plugin?
What is a Single Page App?
Server-Side App
Page rendered from the server
ASP.NET WebForms / MVC
SinglePage App
Page rendered from the browser
Only one actual page is loaded
ASP.NET REST API + Client side code

Recommended for you

Asp.net mvc
Asp.net mvcAsp.net mvc
Asp.net mvc

The document discusses ASP.NET MVC, which is a web development framework that follows the model-view-controller architectural pattern. It allows separating an application's data model, user interface, and application logic. ASP.NET MVC brings this development approach to ASP.NET, allowing developers to build dynamic, testable and SEO-friendly websites and applications. Some benefits of ASP.NET MVC include better support for unit testing, complete control over HTML, and enabling rich AJAX functionality. It also avoids some of the overhead of traditional ASP.NET forms applications.

aspnet mvc
TDD with ASP.NET MVC 1.0
TDD with ASP.NET MVC 1.0TDD with ASP.NET MVC 1.0
TDD with ASP.NET MVC 1.0

This document discusses test driven development with ASP.NET MVC 1.0. It introduces ASP.NET MVC and TDD, explaining that MVC separates application logic, data, and presentation while allowing full control over HTML. TDD involves writing an automated test, making it fail, writing code to pass the test, then refactoring. Common .NET unit testing and mock object frameworks are also mentioned.

tdd aspnetmvc
Asp.net mvc presentation by Nitin Sawant
Asp.net mvc presentation by Nitin SawantAsp.net mvc presentation by Nitin Sawant
Asp.net mvc presentation by Nitin Sawant

The document provides an introduction to ASP.NET MVC, including definitions of MVC and its components. It discusses the pros and cons of traditional ASP.NET WebForms compared to MVC. Key aspects of MVC like models, views, controllers, routing and HTML helpers are described at a high level. Popular MVC frameworks for different programming languages are also listed.

c#beginnersasp.net
Why Single Page Apps?
The problem with server-side apps:
Server-Side Apps are Stateless
The Presentation Layer is Miles Away
Server-Side Apps don’t respect the web
Knockout
MVVM for JavaScript
Open-source framework created by Steven Sanderson
Included with ASP.NET MVC 4 (works with Web Forms)
Available through NuGet with:
Install-Package KnockoutJS
Knockout
Observer Pattern:
An object maintains a list of observers. When the object changes, the
observers are notified.
// Create view model
var viewModel = {
product: {
name: ko.observable("Milk"),
price: ko.observable(2.99)
},
updateProduct: function() {
alert(viewModel.product.name());
}
};
// Bind view model to DOM
ko.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 databinding
Javascrip
t
HTML

Recommended for you

ASP .NET MVC Introduction & Guidelines
ASP .NET MVC Introduction & Guidelines  ASP .NET MVC Introduction & Guidelines
ASP .NET MVC Introduction & Guidelines

This presentation is foucsed on Introduction to MVC. Aimed at .NET developers that are total beginners in the Web Applications world and want to get started using familiar Microsoft .NET technologies. For the existing ASP.NET web form user this slides provides and idea about what are the advatages of using MVC, tradeoffs between MVC and Web Forms.

#aspnetmvc #aspnetmvcintroduction #aspnet
Introduction to ASP.NET MVC
Introduction to ASP.NET MVCIntroduction to ASP.NET MVC
Introduction to ASP.NET MVC

This document provides an introduction to ASP.NET MVC, including what it is, its advantages over ASP.NET Web Forms, and its core parts. ASP.NET MVC is a new presentation layer for building web applications based on the model-view-controller design pattern. It gives developers complete control over HTML and makes test-driven development and SEO-friendly URLs easier. The core parts of an ASP.NET MVC application are models, which represent the data; controllers, which handle application logic and actions; and views, which render the HTML. ASP.NET MVC provides advantages like cleaner HTML and more control, while requiring more development time compared to ASP.NET Web Forms.

aspnetmicrosoftmvc
Asp.net MVC training session
Asp.net MVC training sessionAsp.net MVC training session
Asp.net MVC training session

During 4 days, I presented a training session for the .Net team in Business & Decision Tunisia about Asp.net MVC. In this training we talked about: MVC as a design pattern the history and the utility Microsoft’s approach in Asp.net MVC What's new in MVC 4 Data Access in Asp.net MVC How to secure an Asp.net application Dependency Injection in Asp.net MVC

asp.net mvcsignalrentity framework
Server Client
Web UI
HTML/CSS/JS
Data services
JSON/XML
Application layer
JavaScript
Visible UI
HTML/CSS
Data access layer
JavaScript
Local storage
Navigation
APIs
MVC, WEBFORMS
KNOCKOUT
WEB API
BREEZE
HISTORY.JS
HTML5
What is the ASP.NET Web API?
ASP.NET MVC Controllers
return views (HTML)
derives from Controller base class
ASP.NET API Controllers
return data (JSON, XML)
derives from ApiController base class
uses POST, GET, PUT, DELETE
What is the ASP.NET Web API?
What is it Good For?
Public Web API
Twitter, Salesforce.com, StackOverflow
Single Page Apps (SPA)
A single view is rendered to the browser and all updates to the view are
made using jQuery with the Web API. No Postbacks!
Model Binding
Converts 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”}

Recommended for you

Asp.net mvc
Asp.net mvcAsp.net mvc
Asp.net mvc

The document provides an overview of ASP.NET MVC, including its architecture, advantages, folder structure, core components like controllers, views and action methods. It describes Model-View-Controller pattern, how controllers handle requests and return views with model data. It also compares ASP.NET MVC to Web Forms and lists some key selector attributes.

dot.net mvcrouting in mvc 5mvc 5
Build your website with angularjs and web apis
Build your website with angularjs and web apisBuild your website with angularjs and web apis
Build your website with angularjs and web apis

This document introduces AngularJS and how to create a web app with AngularJS and a Web API. It covers key AngularJS concepts like directives, controllers, modules, filters and services. It also discusses how to build a Web API with ASP.NET. The document includes an agenda and demonstrations of building an AngularJS app that interacts with a Web API to add and save data.

ASP .NET MVC
ASP .NET MVC ASP .NET MVC
ASP .NET MVC

The document discusses the Model-View-Controller (MVC) architectural pattern used in ASP.NET applications. It describes the three main components - the model, which manages the application's data logic; the view, which displays the user interface; and the controller, which allows manipulation of the view. It provides an overview of how these components are implemented in ASP.NET MVC and the advantages it provides such as testability and separation of concerns. Potential problems discussed include difficulty testing GUI code.

mvcinfoiasiassignment
Validation
You can use validation attributes with the Web API:
Required, StringLength, Range, and so on
Authorization
You can perform authorization declaratively by using the [Authorize]
attribute with API controller methods.
You can perform authorization imperatively by returning a 401 Unauthorized
status code.
Remember to enable Forms Authentication in the Web.config file.
HTML5
HTML5 (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 (SQL
Compact, MySQL)
Web Sockets – Asynchronous communication with a two-way open socket.
Validation adds two new attributes: required, pattern
Supports custom validation with new JavaScript method:
setCustomValidity()
Web Sockets
Full duplex client-server communication
SignalR (Open Source)
WebSockets on IIS 8 + IE10/Chrome/Firefox
Fallback to AJAX polling duplex
public 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# Javascrip
t

Recommended for you

ASP.NET MVC Presentation
ASP.NET MVC PresentationASP.NET MVC Presentation
ASP.NET MVC Presentation

ASP.NET MVC is a framework from Microsoft that separates an application's logic, presentation, and data access into three distinct components: models, views, and controllers. This separation of concerns makes the application easier to manage, test, and develop for large teams. ASP.NET MVC uses friendly URLs, does not rely on view state or server-based forms, and supports test-driven development better than traditional ASP.NET Web Forms applications.

Vaadin NYC Meetup
Vaadin NYC MeetupVaadin NYC Meetup
Vaadin NYC Meetup

The meetup agenda includes an introduction to Vaadin, what's new in Vaadin 7.4, designer and declarative layouts, web components, and community demos and discussion. Vaadin is a Java framework that uses server-side components and rendering to build fast and good-looking HTML5 apps with less code. It has a large community of over 130k developers and is used by 40% of Fortune 100 companies.

web componentshtml5visual designer
No brainer
No brainerNo brainer
No brainer

NoBrainer is an MVC + CMS Framework, as its name suggests for low-fi developers and savvy business stakeholders. It provides developers the flexibility of MVC as well as the control of WebForm, resulting in a testable and content manageable WebForm infrastructure for you application. NoBrainer currently supports only Web at the launch, however it can easily be extended to work with Desktop as well as Mobile. That way your logic and test code remain the same across different UI layers. Yesterday we had an electrifying event “Open Source in .NET | Open Day” in collaboration with Microsoft Bangladesh, that I have posted earlier about. In my second session I unveiled my shiny new Open Source project “NoBrainer” which is the topic of this presentation. More: http://nobrainer.codeplex.com

businesarchitectnobrainer
Thank you! Questions?
Hrvoje Hudoletnjak software developer, MVP for ASP.NET/IIS
http://hudosvibe.net
http://twitter.com/hhrvoje
hrvoje@hudoletnjak.com
Some slides by Stephen Walther from http://Superexpert.com

More Related Content

What's hot

ASP.NET MVC 3
ASP.NET MVC 3ASP.NET MVC 3
ASP.NET MVC 3
Buu Nguyen
 
ASP.NET AJAX with Visual Studio 2008
ASP.NET AJAX with Visual Studio 2008ASP.NET AJAX with Visual Studio 2008
ASP.NET AJAX with Visual Studio 2008
Caleb Jenkins
 
ZZ BC#8 Hello ASP.NET MVC 4 (dks)
ZZ BC#8 Hello ASP.NET MVC 4 (dks)ZZ BC#8 Hello ASP.NET MVC 4 (dks)
ZZ BC#8 Hello ASP.NET MVC 4 (dks)
Chalermpon Areepong
 
Asp.net mvc
Asp.net mvcAsp.net mvc
Asp.net mvc
Naga Harish M
 
TDD with ASP.NET MVC 1.0
TDD with ASP.NET MVC 1.0TDD with ASP.NET MVC 1.0
TDD with ASP.NET MVC 1.0
Shiju Varghese
 
Asp.net mvc presentation by Nitin Sawant
Asp.net mvc presentation by Nitin SawantAsp.net mvc presentation by Nitin Sawant
Asp.net mvc presentation by Nitin Sawant
Nitin Sawant
 
ASP .NET MVC Introduction & Guidelines
ASP .NET MVC Introduction & Guidelines  ASP .NET MVC Introduction & Guidelines
ASP .NET MVC Introduction & Guidelines
Dev Raj Gautam
 
Introduction to ASP.NET MVC
Introduction to ASP.NET MVCIntroduction to ASP.NET MVC
Introduction to ASP.NET MVC
Khaled Musaied
 
Asp.net MVC training session
Asp.net MVC training sessionAsp.net MVC training session
Asp.net MVC training session
Hrichi Mohamed
 
Asp.net mvc
Asp.net mvcAsp.net mvc
Asp.net mvc
Er. Kamal Bhusal
 
Build your website with angularjs and web apis
Build your website with angularjs and web apisBuild your website with angularjs and web apis
Build your website with angularjs and web apis
Chalermpon Areepong
 
ASP .NET MVC
ASP .NET MVC ASP .NET MVC
ASP .NET MVC
eldorina
 
ASP.NET MVC Presentation
ASP.NET MVC PresentationASP.NET MVC Presentation
ASP.NET MVC Presentation
ivpol
 
Vaadin NYC Meetup
Vaadin NYC MeetupVaadin NYC Meetup
Vaadin NYC Meetup
Marcus Hellberg
 
No brainer
No brainerNo brainer
No brainer
Tanzim Saqib
 
Introduction to azure web applications for office and share point developers
Introduction to azure web applications for office and share point developersIntroduction to azure web applications for office and share point developers
Introduction to azure web applications for office and share point developers
JoAnna Cheshire
 
Mvc
MvcMvc
Mvc
abhigad
 
Ajax & ASP.NET 2
Ajax & ASP.NET 2Ajax & ASP.NET 2
Ajax & ASP.NET 2
Talal Alsubaie
 
ASP.net MVC Introduction Wikilogia (nov 2014)
ASP.net MVC Introduction Wikilogia (nov 2014)ASP.net MVC Introduction Wikilogia (nov 2014)
ASP.net MVC Introduction Wikilogia (nov 2014)
Hatem Hamad
 
Getting started with MVC 5 and Visual Studio 2013
Getting started with MVC 5 and Visual Studio 2013Getting started with MVC 5 and Visual Studio 2013
Getting started with MVC 5 and Visual Studio 2013
Thomas Robbins
 

What's hot (20)

ASP.NET MVC 3
ASP.NET MVC 3ASP.NET MVC 3
ASP.NET MVC 3
 
ASP.NET AJAX with Visual Studio 2008
ASP.NET AJAX with Visual Studio 2008ASP.NET AJAX with Visual Studio 2008
ASP.NET AJAX with Visual Studio 2008
 
ZZ BC#8 Hello ASP.NET MVC 4 (dks)
ZZ BC#8 Hello ASP.NET MVC 4 (dks)ZZ BC#8 Hello ASP.NET MVC 4 (dks)
ZZ BC#8 Hello ASP.NET MVC 4 (dks)
 
Asp.net mvc
Asp.net mvcAsp.net mvc
Asp.net mvc
 
TDD with ASP.NET MVC 1.0
TDD with ASP.NET MVC 1.0TDD with ASP.NET MVC 1.0
TDD with ASP.NET MVC 1.0
 
Asp.net mvc presentation by Nitin Sawant
Asp.net mvc presentation by Nitin SawantAsp.net mvc presentation by Nitin Sawant
Asp.net mvc presentation by Nitin Sawant
 
ASP .NET MVC Introduction & Guidelines
ASP .NET MVC Introduction & Guidelines  ASP .NET MVC Introduction & Guidelines
ASP .NET MVC Introduction & Guidelines
 
Introduction to ASP.NET MVC
Introduction to ASP.NET MVCIntroduction to ASP.NET MVC
Introduction to ASP.NET MVC
 
Asp.net MVC training session
Asp.net MVC training sessionAsp.net MVC training session
Asp.net MVC training session
 
Asp.net mvc
Asp.net mvcAsp.net mvc
Asp.net mvc
 
Build your website with angularjs and web apis
Build your website with angularjs and web apisBuild your website with angularjs and web apis
Build your website with angularjs and web apis
 
ASP .NET MVC
ASP .NET MVC ASP .NET MVC
ASP .NET MVC
 
ASP.NET MVC Presentation
ASP.NET MVC PresentationASP.NET MVC Presentation
ASP.NET MVC Presentation
 
Vaadin NYC Meetup
Vaadin NYC MeetupVaadin NYC Meetup
Vaadin NYC Meetup
 
No brainer
No brainerNo brainer
No brainer
 
Introduction to azure web applications for office and share point developers
Introduction to azure web applications for office and share point developersIntroduction to azure web applications for office and share point developers
Introduction to azure web applications for office and share point developers
 
Mvc
MvcMvc
Mvc
 
Ajax & ASP.NET 2
Ajax & ASP.NET 2Ajax & ASP.NET 2
Ajax & ASP.NET 2
 
ASP.net MVC Introduction Wikilogia (nov 2014)
ASP.net MVC Introduction Wikilogia (nov 2014)ASP.net MVC Introduction Wikilogia (nov 2014)
ASP.net MVC Introduction Wikilogia (nov 2014)
 
Getting started with MVC 5 and Visual Studio 2013
Getting started with MVC 5 and Visual Studio 2013Getting started with MVC 5 and Visual Studio 2013
Getting started with MVC 5 and Visual Studio 2013
 

Similar to RIA / SPA with ASP.NET

Web development concepts using microsoft technologies
Web development concepts using microsoft technologiesWeb development concepts using microsoft technologies
Web development concepts using microsoft technologies
Hosam Kamel
 
From Backbone to Ember and Back(bone) Again
From Backbone to Ember and Back(bone) AgainFrom Backbone to Ember and Back(bone) Again
From Backbone to Ember and Back(bone) Again
jonknapp
 
Websites, Web Services and Cloud Applications with Visual Studio
Websites, Web Services and Cloud Applications with Visual StudioWebsites, Web Services and Cloud Applications with Visual Studio
Websites, Web Services and Cloud Applications with Visual Studio
Microsoft Visual Studio
 
Best of Microsoft Dev Camp 2015
Best of Microsoft Dev Camp 2015Best of Microsoft Dev Camp 2015
Best of Microsoft Dev Camp 2015
Bluegrass Digital
 
Migrating MVVM Applications to HTML5
Migrating MVVM Applications to HTML5Migrating MVVM Applications to HTML5
Migrating MVVM Applications to HTML5
Chris Bannon
 
ASP.NET Presentation
ASP.NET PresentationASP.NET Presentation
ASP.NET Presentation
Rasel Khan
 
MCSD and 70-487 Exam Blueprint
MCSD and 70-487 Exam BlueprintMCSD and 70-487 Exam Blueprint
MCSD and 70-487 Exam Blueprint
Jeff Chu
 
Give your web apps some backbone
Give your web apps some backboneGive your web apps some backbone
Give your web apps some backbone
RTigger
 
Walther Aspnet4
Walther Aspnet4Walther Aspnet4
Walther Aspnet4
rsnarayanan
 
How to generate a rest application - DevFest Vienna 2016
How to generate a rest application - DevFest Vienna 2016How to generate a rest application - DevFest Vienna 2016
How to generate a rest application - DevFest Vienna 2016
johannes_fiala
 
Microsoft Tech Ed 2006 #1
Microsoft Tech Ed 2006 #1Microsoft Tech Ed 2006 #1
Microsoft Tech Ed 2006 #1
Jetsada Phantharangsee
 
Vijay Oscon
Vijay OsconVijay Oscon
Vijay Oscon
vijayrvr
 
13 asp.net session19
13 asp.net session1913 asp.net session19
13 asp.net session19
Niit Care
 
ASP.pptx
ASP.pptxASP.pptx
Asp.net visual studio 2013
Asp.net   visual studio 2013Asp.net   visual studio 2013
Asp.net visual studio 2013
Tyrone Moodley
 
MVC ppt presentation
MVC ppt presentationMVC ppt presentation
MVC ppt presentation
Bhavin Shah
 
I T Mentors V S2008 Onramp240 V1
I T Mentors  V S2008  Onramp240 V1I T Mentors  V S2008  Onramp240 V1
I T Mentors V S2008 Onramp240 V1
llangit
 
ASP.NET 4.0 Roadmap
ASP.NET 4.0 RoadmapASP.NET 4.0 Roadmap
ASP.NET 4.0 Roadmap
Harish Ranganathan
 
Creating Dynamic Web Application Using ASP.Net 3 5_MVP Alezandra Buencamino N...
Creating Dynamic Web Application Using ASP.Net 3 5_MVP Alezandra Buencamino N...Creating Dynamic Web Application Using ASP.Net 3 5_MVP Alezandra Buencamino N...
Creating Dynamic Web Application Using ASP.Net 3 5_MVP Alezandra Buencamino N...
Quek Lilian
 
New Features of ASP.NET 4.0
New Features of ASP.NET 4.0New Features of ASP.NET 4.0
New Features of ASP.NET 4.0
Buu Nguyen
 

Similar to RIA / SPA with ASP.NET (20)

Web development concepts using microsoft technologies
Web development concepts using microsoft technologiesWeb development concepts using microsoft technologies
Web development concepts using microsoft technologies
 
From Backbone to Ember and Back(bone) Again
From Backbone to Ember and Back(bone) AgainFrom Backbone to Ember and Back(bone) Again
From Backbone to Ember and Back(bone) Again
 
Websites, Web Services and Cloud Applications with Visual Studio
Websites, Web Services and Cloud Applications with Visual StudioWebsites, Web Services and Cloud Applications with Visual Studio
Websites, Web Services and Cloud Applications with Visual Studio
 
Best of Microsoft Dev Camp 2015
Best of Microsoft Dev Camp 2015Best of Microsoft Dev Camp 2015
Best of Microsoft Dev Camp 2015
 
Migrating MVVM Applications to HTML5
Migrating MVVM Applications to HTML5Migrating MVVM Applications to HTML5
Migrating MVVM Applications to HTML5
 
ASP.NET Presentation
ASP.NET PresentationASP.NET Presentation
ASP.NET Presentation
 
MCSD and 70-487 Exam Blueprint
MCSD and 70-487 Exam BlueprintMCSD and 70-487 Exam Blueprint
MCSD and 70-487 Exam Blueprint
 
Give your web apps some backbone
Give your web apps some backboneGive your web apps some backbone
Give your web apps some backbone
 
Walther Aspnet4
Walther Aspnet4Walther Aspnet4
Walther Aspnet4
 
How to generate a rest application - DevFest Vienna 2016
How to generate a rest application - DevFest Vienna 2016How to generate a rest application - DevFest Vienna 2016
How to generate a rest application - DevFest Vienna 2016
 
Microsoft Tech Ed 2006 #1
Microsoft Tech Ed 2006 #1Microsoft Tech Ed 2006 #1
Microsoft Tech Ed 2006 #1
 
Vijay Oscon
Vijay OsconVijay Oscon
Vijay Oscon
 
13 asp.net session19
13 asp.net session1913 asp.net session19
13 asp.net session19
 
ASP.pptx
ASP.pptxASP.pptx
ASP.pptx
 
Asp.net visual studio 2013
Asp.net   visual studio 2013Asp.net   visual studio 2013
Asp.net visual studio 2013
 
MVC ppt presentation
MVC ppt presentationMVC ppt presentation
MVC ppt presentation
 
I T Mentors V S2008 Onramp240 V1
I T Mentors  V S2008  Onramp240 V1I T Mentors  V S2008  Onramp240 V1
I T Mentors V S2008 Onramp240 V1
 
ASP.NET 4.0 Roadmap
ASP.NET 4.0 RoadmapASP.NET 4.0 Roadmap
ASP.NET 4.0 Roadmap
 
Creating Dynamic Web Application Using ASP.Net 3 5_MVP Alezandra Buencamino N...
Creating Dynamic Web Application Using ASP.Net 3 5_MVP Alezandra Buencamino N...Creating Dynamic Web Application Using ASP.Net 3 5_MVP Alezandra Buencamino N...
Creating Dynamic Web Application Using ASP.Net 3 5_MVP Alezandra Buencamino N...
 
New Features of ASP.NET 4.0
New Features of ASP.NET 4.0New Features of ASP.NET 4.0
New Features of ASP.NET 4.0
 

More from Hrvoje Hudoletnjak

Project K, Vnext and Owin
Project K, Vnext and OwinProject K, Vnext and Owin
Project K, Vnext and Owin
Hrvoje Hudoletnjak
 
Owin katana en
Owin katana enOwin katana en
Owin katana en
Hrvoje Hudoletnjak
 
EF6 and DDD
EF6 and DDDEF6 and DDD
EF6 and DDD
Hrvoje Hudoletnjak
 
ATD9 2013 One ASP.NET
ATD9 2013 One ASP.NETATD9 2013 One ASP.NET
ATD9 2013 One ASP.NET
Hrvoje Hudoletnjak
 
My weekend startup: seocrawler.co
My weekend startup: seocrawler.coMy weekend startup: seocrawler.co
My weekend startup: seocrawler.co
Hrvoje Hudoletnjak
 
ASP.NET: Present and future
ASP.NET: Present and futureASP.NET: Present and future
ASP.NET: Present and future
Hrvoje Hudoletnjak
 
Open source and .net
Open source and .netOpen source and .net
Open source and .net
Hrvoje Hudoletnjak
 

More from Hrvoje Hudoletnjak (7)

Project K, Vnext and Owin
Project K, Vnext and OwinProject K, Vnext and Owin
Project K, Vnext and Owin
 
Owin katana en
Owin katana enOwin katana en
Owin katana en
 
EF6 and DDD
EF6 and DDDEF6 and DDD
EF6 and DDD
 
ATD9 2013 One ASP.NET
ATD9 2013 One ASP.NETATD9 2013 One ASP.NET
ATD9 2013 One ASP.NET
 
My weekend startup: seocrawler.co
My weekend startup: seocrawler.coMy weekend startup: seocrawler.co
My weekend startup: seocrawler.co
 
ASP.NET: Present and future
ASP.NET: Present and futureASP.NET: Present and future
ASP.NET: Present and future
 
Open source and .net
Open source and .netOpen source and .net
Open source and .net
 

Recently uploaded

Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
BookNet Canada
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Erasmo Purificato
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
Kief Morris
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
Safe Software
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
Emerging Tech
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
Vijayananda Mohire
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Bert Blevins
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
RaminGhanbari2
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
Liveplex
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
Tatiana Al-Chueyr
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
ScyllaDB
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
Mark Billinghurst
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
Stephanie Beckett
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
Lidia A.
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
Yevgen Sysoyev
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
shanthidl1
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
ArgaBisma
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
Larry Smarr
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
huseindihon
 

Recently uploaded (20)

Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...Transcript: Details of description part II: Describing images in practice - T...
Transcript: Details of description part II: Describing images in practice - T...
 
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
Paradigm Shifts in User Modeling: A Journey from Historical Foundations to Em...
 
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
[Talk] Moving Beyond Spaghetti Infrastructure [AOTB] 2024-07-04.pdf
 
Coordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar SlidesCoordinate Systems in FME 101 - Webinar Slides
Coordinate Systems in FME 101 - Webinar Slides
 
Implementations of Fused Deposition Modeling in real world
Implementations of Fused Deposition Modeling  in real worldImplementations of Fused Deposition Modeling  in real world
Implementations of Fused Deposition Modeling in real world
 
Quantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLMQuantum Communications Q&A with Gemini LLM
Quantum Communications Q&A with Gemini LLM
 
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
Understanding Insider Security Threats: Types, Examples, Effects, and Mitigat...
 
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyyActive Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
Active Inference is a veryyyyyyyyyyyyyyyyyyyyyyyy
 
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALLBLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
BLOCKCHAIN FOR DUMMIES: GUIDEBOOK FOR ALL
 
Best Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdfBest Practices for Effectively Running dbt in Airflow.pdf
Best Practices for Effectively Running dbt in Airflow.pdf
 
Mitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing SystemsMitigating the Impact of State Management in Cloud Stream Processing Systems
Mitigating the Impact of State Management in Cloud Stream Processing Systems
 
Research Directions for Cross Reality Interfaces
Research Directions for Cross Reality InterfacesResearch Directions for Cross Reality Interfaces
Research Directions for Cross Reality Interfaces
 
What's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptxWhat's New in Copilot for Microsoft365 May 2024.pptx
What's New in Copilot for Microsoft365 May 2024.pptx
 
Pigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdfPigging Solutions Sustainability brochure.pdf
Pigging Solutions Sustainability brochure.pdf
 
WPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide DeckWPRiders Company Presentation Slide Deck
WPRiders Company Presentation Slide Deck
 
DealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 editionDealBook of Ukraine: 2024 edition
DealBook of Ukraine: 2024 edition
 
Cookies program to display the information though cookie creation
Cookies program to display the information though cookie creationCookies program to display the information though cookie creation
Cookies program to display the information though cookie creation
 
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdfWhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
WhatsApp Image 2024-03-27 at 08.19.52_bfd93109.pdf
 
The Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU CampusesThe Increasing Use of the National Research Platform by the CSU Campuses
The Increasing Use of the National Research Platform by the CSU Campuses
 
find out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challengesfind out more about the role of autonomous vehicles in facing global challenges
find out more about the role of autonomous vehicles in facing global challenges
 

RIA / SPA with ASP.NET

  • 1. Development of Rich Internet Apps with ASP.NET Hrvoje Hudoletnjak
  • 2. Agenda Little bit of History Knockout (Open Source) Microsoft ASP.NET Web API (Open Source) HTML5 (Open Source) SignalR
  • 3. Little bit of History Then HTML + CSS Flash / Flex Silverlight Now HTML5 / CSS3 / JavaScript Future? Native or plugin?
  • 4. What is a Single Page App? Server-Side App Page rendered from the server ASP.NET WebForms / MVC SinglePage App Page rendered from the browser Only one actual page is loaded ASP.NET REST API + Client side code
  • 5. Why Single Page Apps? The problem with server-side apps: Server-Side Apps are Stateless The Presentation Layer is Miles Away Server-Side Apps don’t respect the web
  • 6. Knockout MVVM for JavaScript Open-source framework created by Steven Sanderson Included with ASP.NET MVC 4 (works with Web Forms) Available through NuGet with: Install-Package KnockoutJS
  • 7. Knockout Observer Pattern: An object maintains a list of observers. When the object changes, the observers are notified.
  • 8. // Create view model var viewModel = { product: { name: ko.observable("Milk"), price: ko.observable(2.99) }, updateProduct: function() { alert(viewModel.product.name()); } }; // Bind view model to DOM ko.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 databinding Javascrip t HTML
  • 9. Server Client Web UI HTML/CSS/JS Data services JSON/XML Application layer JavaScript Visible UI HTML/CSS Data access layer JavaScript Local storage Navigation APIs MVC, WEBFORMS KNOCKOUT WEB API BREEZE HISTORY.JS HTML5
  • 10. What is the ASP.NET Web API? ASP.NET MVC Controllers return views (HTML) derives from Controller base class ASP.NET API Controllers return data (JSON, XML) derives from ApiController base class uses POST, GET, PUT, DELETE
  • 11. What is the ASP.NET Web API? What is it Good For? Public Web API Twitter, Salesforce.com, StackOverflow Single Page Apps (SPA) A single view is rendered to the browser and all updates to the view are made using jQuery with the Web API. No Postbacks!
  • 12. Model Binding Converts 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. Validation You can use validation attributes with the Web API: Required, StringLength, Range, and so on
  • 14. Authorization You can perform authorization declaratively by using the [Authorize] attribute with API controller methods. You can perform authorization imperatively by returning a 401 Unauthorized status code. Remember to enable Forms Authentication in the Web.config file.
  • 15. HTML5 HTML5 (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 (SQL Compact, MySQL) Web Sockets – Asynchronous communication with a two-way open socket. Validation adds two new attributes: required, pattern Supports custom validation with new JavaScript method: setCustomValidity()
  • 16. Web Sockets Full duplex client-server communication SignalR (Open Source) WebSockets on IIS 8 + IE10/Chrome/Firefox Fallback to AJAX polling duplex public 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# Javascrip t
  • 17. Thank you! Questions? Hrvoje Hudoletnjak software developer, MVP for ASP.NET/IIS http://hudosvibe.net http://twitter.com/hhrvoje hrvoje@hudoletnjak.com Some slides by Stephen Walther from http://Superexpert.com