Embed Size (px)
DESCRIPTION
XAML developers love the Model-View View-Model (MVVM) pattern. Kendo UI is a JavaScript framework that enables this pattern for web based applications. It takes the client side coding model developers are familiar with and provides it to the web world. This talk will define the MVVM pattern and the benefits of using it. It will also show how you can use Kendo UI and ASP.NET to build responsive, robust applications that feel like desktop applications. Lessons Learned: -MVVM Pattern -Kendo UI and why to use it -How to wire up Kendo UI and ASP.NET
Citation preview
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
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
