Transcript Developer Day Bringing MVVM to the Web Marc Müller Principal Consultant, 4tecture GmbH [email protected] / www.4tecture.ch @4tecture.

Developer Day
Bringing MVVM to the Web
Marc Müller
Principal Consultant, 4tecture GmbH
[email protected] / www.4tecture.ch
@4tecture
Introduction
Backend
Frontend
15’
15’
30’
Agenda
Introduction
Web Applications and MVVM
My Web Applicationa
http://www.url.com
Page
Page
Page
DB
Layout & data
My Web Applicationa
http://www.url.com
DB
Plug-in app
data
Plug-In
AJAX
•
Whole application resides in 1 web page
•
Heavy use of JavaScript
•
Client-Side stateful representation
•
Usually connected to RESTful backend (JSON)
• Outlook Web Access
• Google Mail
• …
•
Interoperability
•
Fluent-UI
•
MVVM
View Layer (HTML, CSS)
Main View
(Shell)
UI Endpoint
Data Endpoint
Partial View
Partial View
(Application
View)
(Application View)
Application / BL Layer (JavaScript)
-
-
Shell: Navigation, Modules, etc
UI Business Logic: View Models, Models
Data Access Layer (JavaScript)
Agents: REST calls
Stateful data representation
ASP.NET MVC 4 – SPA Project Template
Demo 1
Create a SPA from
VS Project Template
Architecture
Server:
Client:
Technologies and Patterns
MVVM, Modularization
Standard ASP.NET MVC 4
Standard Layering and Patterns
• EF as Data Access
• Repository Pattern / Unit of Work Pattern
• Shared Entities / DTO
• Access Control through ASP.NET Stack
EF Context
DB
Security
Repository
UoW
BL Service
Entities
WebAPI Controller
Sample endpoint for our UI -> get shopping lists
// GET api/shoppinglist
public IQueryable<ShoppingList.Common.Entities.ShoppingList> Get()
{
try
{
return this.ShoppingListService.GetUserShoppingLists();
}
catch (SecurityException)
{
throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.Unauthorized));
}
catch (Exception)
{
throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.InternalServerError));
}
}
Demo 2
Backend Services
SPA content: Javascript and single html page
•
Organize JavaScript files
•
One big HTML is not maintainable
•
Maintainable JavaScript
AMD – Asynchonous Module Definition
RequireJS
define(["require", "exports"],
function(require, exports) {
var Group = (function () {
function Group() {
this.id = ko.observable(0);
this.name = ko.observable("");
}
return Group;
})();
exports.Group = Group;
})
Demo 3
Web Project Structure and
JavaScript AMD
MVVM
MVVM with KnockoutJS
PersonVM
•
Model
•
View Model
•
View
persons: Person[]
getPersons()
savePerson()
Person
firstname : string
lastname : string
PersonView
<div data-bind="text:
fullname" />
Key Concepts
• Declarative Bindings
• Automatic UI Refresh
• Dependency Tracking
• Templating
KoLite - Lightweight Toolkit for KnockoutJS
self.saveCommand = ko.asyncCommand({
execute: function(callback) {
$.ajax({ complete: callback,
data: { name: self.name() },
type: 'POST', url: '/save/',
success: function(result) { alert('Name saved:' + result) } }) },
canExecute: function(isExecuting) { return !isExecuting && self.name() } })
Knockout Validation
var myComplexValue = ko.observable().extend({
required: true,
minLength: 3,
pattern: {
message: 'Hey this doesnt match my pattern',
params: '^[A-Z0-9].$' } });
Knockout External Template Engine
<div data-bind="template: { name: 'stats', templateUrl: 'templates/info'}"></div>
Demo 4
Databinding with
KnockoutJS
UI Architecture
• Startup Logic
-> Bootstrapper
• Navigation between Views
-> Shell
• In-Memory entity instances
-> DataContext
• CRUD on WebAPI
-> RESTful Agent
- Triggers the JavaScript module loading
- Initializes DataContext
- Registers Views
- Runs the application
VM1
VM2
My Web Applicationa
http://www.url.com
Page
hide
VM3
View
id=«v1» #view1
View
hide
• In-Memory Data Representation
• Loads Data from RESTful Agent
• Load Navigation Properties
• CRUD operations with REST
• Data Transfer with JSON
• Mapping between DTO and Entity
-
Complete application in Single Page
Heavy use of JavaScript
Declarative Binding / Templating
Backend Communication with REST (JSON)
- Fluid, Interoperable Client Application
• http://learn.knockoutjs.com/
• 4tecture.ch/blog
-> new SPA content comming soon
• New ASP.NET MVC SPA Template