WebPay Client Side Architecture

Objectives

• Avoid unmaintainable spaghetti JavaScript
• Type safety/compile time errors

Kendo MVVM: ViewModels

FeedbackCardViewModel

FeedbackViewModel

Getting Data from the Server

FeedbackCardController

public FeedbackCardModel GetFeedback()

FeedbackCardViewModel

ajax

FeedbackViewModel

instantiates

FeedbackCardData

subscription

FeedbackCardView

instantiates

Presenting Data

Razor View/HTML

data-bind

data-bind

FeedbackCardViewModel

FeedbackViewModel

instantiates

FeedbackCardData

subscription

FeedbackCardView

jQuery

Demo: Kendo MVVM

Issues

• Model code is copy/pasted
• Busywork needed to set up
• Model/api changes will break JavaScript
• Type safety lost with Kendo dependent properties

Issues

• Model code is copy/pasted
• Busywork needed to set up
• Model/api changes will break JavaScript
• Type safety lost with Kendo dependent properties

Potential Solution: Unit Testing?

FeedbackCardController

public FeedbackCardModel GetFeedback()

FeedbackCardViewModel

ajax

FeedbackViewModel

instantiates

Proposed Solution:

Gen the boring, meticulous code and add type safety

FeedbackCardViewModel

FeedbackViewModel

instantiates

Proposed Solution: Code Gen

PerformanceManagement.Models

FeedbackCardModel

t4 Template

BaseFeedbackCardViewModel

implements

Demo: t4 Template + Kendo MVVM

WINS

• No writing boring, error-prone code
• Compile-time errors if api breaks JavaScript
• Strongly typed Kendo dependent properties
• No further duplication of code through lengthy unit tests

Challenges

• t4 & ts gen must become part of build process
• Support of complex model types (relationships, lists)