Building mvvm & single pageapps in js

@nishanil
Building MVVM &
Single Page Apps (SPA)
in JavaScript
Nishanth Anil
Technical Evangelist | Infragistics
na@nnish.com | nnish.com

@nishanil
Web Development
Have you considered Mobile Users?

@nishanil
User Experience!
• Mobile Specific Web? m.yourwebsite.com
• Native App instead?
• Hybrid?
• Responsive Web?

@nishanil
JavaScript
then, now, & forever!

@nishanil
The MVVM Pattern
• Model-View View-Model
• Software architectural design pattern
• Emerged in the 2005 timeframe to support the declarative data binding features of
WPF / XAML

@nishanil
Benefits
• Developer/Designer Collaboration without Conflict - Since the UI is void of any
non-visual code such as business logic, the team’s designer can confidently work
on modifying the code without worrying about breaking the programmer’s code.
• Testable Code - Decoupling the view from the view model enables us to write
clean unit tests.
• Code Maintainability - Testable, decoupled code is easier to maintain. A bug can
be found much more easily if there is only one place to inspect.

@nishanil
Introducing KnockoutJS
• Knockout is an open source JavaScript library that enables MVVM applications by
implementing binding
• Properties in the Model classes are of type ko.observable
• Observables in JavaScript notify subscribers of property changes
• Supports all major browsers
6+ 2+

@nishanil
Comparing JavaScript to WPF
Runtime
CLR - XAML Binding
Business Logic
C#
Presentation
XAML
Window
Runtime
Browser - Knockout
Business Logic
JS
Presentation
HTML
Page

@nishanil
Step 1: Reference KO in the View
<script type="text/javascript" src="../scripts/ko/knockout-
2.1.0.js"></script>

@nishanil
Step 2: Associate the View Model with the View
<script>
$(document).ready(function () {
// Instantiate the CustomerViewModel model and apply bindings
var customerViewModel = new CustomerViewModel();
ko.applyBindings(customerViewModel);});
</script>

@nishanil
Step 3: Define Declarative Bindings in the View
<div id="ListMenu" >
<ul data-bind="foreach: customers">
<div>
<img width='100' height='100' align='middle' style='padding:5px'
data-bind="attr: { src: pictureURL }"></img>
<a style='font-size:15pt;cursor:pointer;color:#067EBF'
data-bind="text: fullName "></a>
</div>
</ul>
</div>

@nishanil
Understanding Bindings
• Bindings are declared in the visual element mark-up by using the data-bind
attribute.
• These bindings are associated with view model properties that are known as
observables.
• Observables are properties that will automatically issue notifications whenever
their value changes.
function CustomerViewModel() {
var self = this;
// Properties
self.customers = ko.observableArray();

@nishanil
Knockout Bindings
• foreach: Lets you iterate through a loop and apply the same markup to each item
in the list. This is used to render the to-do lists and to-do items. Within the
foreach, the bindings are applied to the elements of the list.
• visible: Used to toggle visibility. Hide markup when a collection is empty, or make
the error message visible.
• value: Used to populate form values.
• click: Binds a click event to a function on the view model.

@nishanil
Single Page
Application

@nishanil
What is a SPA?
“Single-page application” (SPA) is the
general term for a web application that
loads a single HTML page and then
updates the page dynamically, instead
of loading new pages. After the initial
page load, the SPA talks with the
server through AJAX requests.

@nishanil
Resources
• Single Page Apps with MVC & ASP.NET - http://www.asp.net/single-page-
application/overview/introduction/knockoutjs-template
• Knockout & MVVM Step by Step - http://www.developer-
tech.com/news/2012/dec/13/knockoutjs-mvvm-framework-jquery-developers/

@nishanil
Thank You!
Nishanth Anil
nnish.com

Building mvvm & single pageapps in js

More Related Content

Similar to Building mvvm & single pageapps in js (20)

More from Nish Anil (7)

Recently uploaded (20)

Building mvvm & single pageapps in js