@nishanilBuilding MVVM &Single Page Apps (SPA)in JavaScriptNishanth AnilTechnical Evangelist | Infragisticsna@nnish.com | ...
@nishanilWeb DevelopmentHave you considered Mobile Users?
@nishanilAFTER iPhone
@nishanil
@nishanilUser Experience!• Mobile Specific Web? m.yourwebsite.com• Native App instead?• Hybrid?• Responsive Web?
@nishanilYour Tools!
@nishanilJavaScriptthen, now, & forever!
@nishanilJavaScript MV* F/Ws
@nishanilIntro to MVVM
@nishanilThe MVVM Pattern• Model-View View-Model• Software architectural design pattern• Emerged in the 2005 timeframe to ...
@nishanilBenefits• Developer/Designer Collaboration without Conflict - Since the UI is void of anynon-visual code such as ...
@nishanilDemo
@nishanilMVVM inJavaScript
@nishanilIntroducing KnockoutJS• Knockout is an open source JavaScript library that enables MVVM applications byimplementi...
@nishanilComparing JavaScript to WPFRuntimeCLR - XAML BindingBusiness LogicC#PresentationXAMLWindowRuntimeBrowser - Knocko...
@nishanilStep 1: Reference KO in the View<script type="text/javascript" src="../scripts/ko/knockout-2.1.0.js"></script>
@nishanilStep 2: Associate the View Model with the View<script>$(document).ready(function () {// Instantiate the CustomerV...
@nishanilStep 3: Define Declarative Bindings in the View<div id="ListMenu" ><ul data-bind="foreach: customers"><div><img w...
@nishanilUnderstanding Bindings• Bindings are declared in the visual element mark-up by using the data-bindattribute.• The...
@nishanilKnockout Bindings• foreach: Lets you iterate through a loop and apply the same markup to each itemin the list. Th...
@nishanilDemo
@nishanilSingle PageApplication
@nishanilWhat is a SPA?“Single-page application” (SPA) is thegeneral term for a web application thatloads a single HTML pa...
@nishanilVIEW
@nishanilSPA with Knockout
@nishanilSPA Demo
@nishanilResources• Single Page Apps with MVC & ASP.NET - http://www.asp.net/single-page-application/overview/introduction...
@nishanilThank You!Nishanth Anilnnish.com
Upcoming SlideShare
Loading in …5
×

Building mvvm & single pageapps in js

10,053 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
10,053
On SlideShare
0
From Embeds
0
Number of Embeds
8,582
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Building mvvm & single pageapps in js

  1. 1. @nishanilBuilding MVVM &Single Page Apps (SPA)in JavaScriptNishanth AnilTechnical Evangelist | Infragisticsna@nnish.com | nnish.com
  2. 2. @nishanilWeb DevelopmentHave you considered Mobile Users?
  3. 3. @nishanilAFTER iPhone
  4. 4. @nishanil
  5. 5. @nishanilUser Experience!• Mobile Specific Web? m.yourwebsite.com• Native App instead?• Hybrid?• Responsive Web?
  6. 6. @nishanilYour Tools!
  7. 7. @nishanilJavaScriptthen, now, & forever!
  8. 8. @nishanilJavaScript MV* F/Ws
  9. 9. @nishanilIntro to MVVM
  10. 10. @nishanilThe MVVM Pattern• Model-View View-Model• Software architectural design pattern• Emerged in the 2005 timeframe to support the declarative data binding features ofWPF / XAML
  11. 11. @nishanilBenefits• Developer/Designer Collaboration without Conflict - Since the UI is void of anynon-visual code such as business logic, the team’s designer can confidently workon modifying the code without worrying about breaking the programmer’s code.• Testable Code - Decoupling the view from the view model enables us to writeclean unit tests.• Code Maintainability - Testable, decoupled code is easier to maintain. A bug canbe found much more easily if there is only one place to inspect.
  12. 12. @nishanilDemo
  13. 13. @nishanilMVVM inJavaScript
  14. 14. @nishanilIntroducing KnockoutJS• Knockout is an open source JavaScript library that enables MVVM applications byimplementing binding• Properties in the Model classes are of type ko.observable• Observables in JavaScript notify subscribers of property changes• Supports all major browsers6+ 2+
  15. 15. @nishanilComparing JavaScript to WPFRuntimeCLR - XAML BindingBusiness LogicC#PresentationXAMLWindowRuntimeBrowser - KnockoutBusiness LogicJSPresentationHTMLPage
  16. 16. @nishanilStep 1: Reference KO in the View<script type="text/javascript" src="../scripts/ko/knockout-2.1.0.js"></script>
  17. 17. @nishanilStep 2: Associate the View Model with the View<script>$(document).ready(function () {// Instantiate the CustomerViewModel model and apply bindingsvar customerViewModel = new CustomerViewModel();ko.applyBindings(customerViewModel);});</script>
  18. 18. @nishanilStep 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:5pxdata-bind="attr: { src: pictureURL }"></img><a style=font-size:15pt;cursor:pointer;color:#067EBFdata-bind="text: fullName "></a></div></ul></div>
  19. 19. @nishanilUnderstanding Bindings• Bindings are declared in the visual element mark-up by using the data-bindattribute.• These bindings are associated with view model properties that are known asobservables.• Observables are properties that will automatically issue notifications whenevertheir value changes.function CustomerViewModel() {var self = this;// Propertiesself.customers = ko.observableArray();
  20. 20. @nishanilKnockout Bindings• foreach: Lets you iterate through a loop and apply the same markup to each itemin the list. This is used to render the to-do lists and to-do items. Within theforeach, the bindings are applied to the elements of the list.• visible: Used to toggle visibility. Hide markup when a collection is empty, or makethe error message visible.• value: Used to populate form values.• click: Binds a click event to a function on the view model.
  21. 21. @nishanilDemo
  22. 22. @nishanilSingle PageApplication
  23. 23. @nishanilWhat is a SPA?“Single-page application” (SPA) is thegeneral term for a web application thatloads a single HTML page and thenupdates the page dynamically, insteadof loading new pages. After the initialpage load, the SPA talks with theserver through AJAX requests.
  24. 24. @nishanilVIEW
  25. 25. @nishanilSPA with Knockout
  26. 26. @nishanilSPA Demo
  27. 27. @nishanilResources• 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/
  28. 28. @nishanilThank You!Nishanth Anilnnish.com

×