Building web applications using kendo ui and the mvvm pattern

450 Lincoln StreetSuite 101Denver, CO 80203719.359.9692

www.aspenware.com

Building Web Applications Using Kendo UI and the MVVM Pattern

Ben Hoelting@benhnet

BenHoeltingIn truth, he’s just a big kid. He loves designing systems that solve real world problems. There is nothing more satisfying than seeing something you helped develop being used by the end users. Ben is also involved in the technology community and runs the South Colorado .NET user group. He also enjoys speaking at tech groups and events around the country. Ben Hoelting

@benhnetb.hoelting@aspenware.com

Agenda:

Kendo UI/Telerik Overview ASP.NET MVC Overview MVVM Overview SPA Application Overview Building a Kendo UI MVVM SPA

App

Demo code is located at https://github.com/BenHNet/ScrumChoresPublic

Kendo UI/Telerik Overview

Leading vendor of UI and developer productivity

solutions

2002founded

780 employees

130,000+

customers

1.1 million developers

Plan Build Test DeliverAGILE PROJECT MANAGEMENT DEVELOPER TOOLS QUALITY ASSURANCE TOOLS CMS PLATFORM

Four divisions covering key parts of the development lifecycleThe Telerik Portfolio (2013)

AJAX SL

WPF WIN

W8 WP

JC JM

JT JD

REP ORM

TeamPulse Test Studio Sitefinity

DevCraft

UI CONTROLS & COMPONENTS

PRODUCTIVITY TOOLS

DATA TOOLS

ASP.NET AJAX Silverlight

WPF WinForms

Windows 8 Windows Phone

JustCode JustMock

JustTrace JustDecompile

Reporting OpenAccess ORM

The Telerik PortfolioRebranded & Reorganized

New branding introduced in January 2014

UX Pattern Basic Concepts

Basic Pattern Terms

PAGE 11

Model (Data Types\Structures) Data types and their properties Maybe some business logic

View (UI) UI (HTML5, XAML)

ASP.NET MVC Overview

ASP.NET MVC Overview

MVVM Overview

Model

View

View ModelPr

ovid

es

Requ

ests

Prov

ides

Dat

a Bi

nds

MVVM Overview

15

Single Page Application (SPA) Overview

Server

Client

Web API

UI (HTML and CSS)JavaScript Files (Navigation and View

Models)

SPA Overview

Business Logic

Data Layer

AJAX/JSON

Building a Kendo UI MVVM SPA App

Key Takeaways

SPA & MVVM are an Alternative to

MVC

SPA Applications take MVVM Client

Side

Kendo is a SPA & MVVM Enabler

MVVM shines when used with

data binding frameworks. In the past this did

not work well with web based

applications.

Singe Page Applications use View Models to databind on the client. Only JSON travels between the client and server. Better,

Stronger, Faster.

Coupled with new HTML

attributes Kendo UI enables these

patterns by providing

navigation, routing, data

binding, templating and

observable objects to web

based technologies.

Resources: http://www.asp.net/mvc http://www.telerik.com/kendo-ui http://docs.telerik.com/kendo-ui/api/introduction http://demos.telerik.com/kendo-ui/web/mvvm/

index.html http://demos.telerik.com/kendo-ui/web/spa/

index.html http://jqueryuivskendoui.com/

450 Lincoln StreetSuite 101Denver, CO 80203719.359.9692

www.aspenware.com

Building Web Applications Using Kendo UI and the MVVM Pattern

Ben Hoelting@benhnet