Rich HTML5 Client Data Apps with Upshot

uglyveinInternet and Web Development

Jun 24, 2012 (5 years and 2 months ago)

775 views

HTML5 Connections
1
March 26-29, 2012 • Las Vegas, NV
Rich HTML5 Client Data Apps
with Upshot.js
Brian Noyes
IDesign Inc. (www.idesign.net)
brian.noyes@idesign.net, @briannoyes
Chief Architect
IDesign Inc. (www.idesign.net)
Microsoft Regional Director
(www.theregion.com)
Microsoft MVP
Silverlight
About Brian
Publishing
Developers Guide to Microsoft Prism 4, O’Reilly & Assoc.,
March 2011
Developing Applications with
Windows Workflow Foundation,
LiveLessons training DVD, June 2007
Smart Client Deployment with
ClickOnce, Addison Wesley,
January 2007
Data Binding in Windows Forms 2.0, Addison Wesley,
January 2006
The Silverlight Show, MSDN Magazine, MSDN Online,
CoDe Magazine
Speaking
DevConnections, Microsoft TechEd, VSLive!,
DevTeach, INETA User Groups
E-mail:brian.noyes@idesign.net
Twitter: @briannoyes
Blog:http://briannoyes.net
HTML5 Connections
2
March 26-29, 2012 • Las Vegas, NV
Agenda
• Upshot.js Overview
• Consuming WCF RIA Domain Services
• Consuming Web API Data Controller
Services
• Single Page Apps
HTML 5 Rich Client Benefits
• Responsive, fast and fluid user interface
• Runs on any device / platform
• Can work offline
• App store deployable
HTML5 Connections
3
March 26-29, 2012 • Las Vegas, NV
HTML 5 Native Apps
App Architecture
Web UI
Data
Services
Client
UI (HTML/CSS)
Client
Logic (JS)
Client Data
Access (JS)
Local Storage
(HTML 5)
Upshot.js
Server
Client
HTML5 Connections
4
March 26-29, 2012 • Las Vegas, NV
What is Upshot?
• Client JavaScript library
• Produced by the ASP.NET team
• Open source: http://aspnetwebstack.codeplex.com/
• Supports:

Consumption of WCF RIA Domain Services

Consumption of ASP.NET Web API Data Controller services

Single Page Application structuring and navigation

Client side offline data storage (future)
Upshot in a Nutshell
• Brings many of the client side benefits of WCF
RIA Services to HTML5/JS client apps
• Encapsulates the service calls, data caching,
change tracking, validation into a single easy to
use library
• Works nicely with other JS libraries such as
Knockout.js to build a rich data-driven HTML
client app
HTML5 Connections
5
March 26-29, 2012 • Las Vegas, NV
Using Upshot
• “Single Page Application” templates in VS
Web MVC 4 projects

Scaffolds controllers and views based on
existing model objects

Supports EF EDMX or DbContext models

Quick way to get up and running
Upshot Consumable Data Services
• WCF RIA Domain Services

Same ones consumable by Silverlight RIA Services
clients
• ASP.NET Web API DataController Services

New capability in MVC 4

Built on top of the new Web API style of HTTP
services
HTML5 Connections
6
March 26-29, 2012 • Las Vegas, NV
WCF RIA Services Overview
• Simplifies building N-tier Line of Business
(LOB) applications

Highly dependent on push pull of data

Can use for non-CRUD operations as well
• Architecture and tools for building the glue
code between the client and the back end

Streamlined pipeline for data and operations
between client and server

Clients: Silverlight, ASP.NET, HTML/JS
Business Logic
DB
Data Access
Presentation
DEMO
Consuming Data with Upshot
HTML5 Connections
7
March 26-29, 2012 • Las Vegas, NV
Resources
• TechDays presentation by Steve Sanderson:

http://channel9.msdn.com/Events/TechDays/Techdays-2012-
the-Netherlands/2159
• ASP.NET MVC 4 Beta:

http://www.asp.net/mvc/mvc4
• Single Page Applications:

http://www.asp.net/single-page-application
• Single Page Applications walkthrough:

http://bartjolling.blogspot.com/2012/02/building-single-page-
apps-with-aspnet.html
Your Feedback is Important
Please fill out a session evaluation form
drop it off at the conference registration
desk.
Thank you!