Your SlideShare is downloading. ×
  • Like
  • Save
Building mvvm & single pageapps in js
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Building mvvm & single pageapps in js

  • 4,104 views
Published

 

Published in Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
4,104
On SlideShare
0
From Embeds
0
Number of Embeds
8

Actions

Shares
Downloads
0
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. @nishanilBuilding MVVM &Single Page Apps (SPA)in JavaScriptNishanth AnilTechnical Evangelist | Infragisticsna@nnish.com | nnish.com
  • 2. @nishanilWeb DevelopmentHave you considered Mobile Users?
  • 3. @nishanilAFTER iPhone
  • 4. @nishanil
  • 5. @nishanilUser Experience!• Mobile Specific Web? m.yourwebsite.com• Native App instead?• Hybrid?• Responsive Web?
  • 6. @nishanilYour Tools!
  • 7. @nishanilJavaScriptthen, now, & forever!
  • 8. @nishanilJavaScript MV* F/Ws
  • 9. @nishanilIntro to MVVM
  • 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. @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. @nishanilDemo
  • 13. @nishanilMVVM inJavaScript
  • 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. @nishanilComparing JavaScript to WPFRuntimeCLR - XAML BindingBusiness LogicC#PresentationXAMLWindowRuntimeBrowser - KnockoutBusiness LogicJSPresentationHTMLPage
  • 16. @nishanilStep 1: Reference KO in the View<script type="text/javascript" src="../scripts/ko/knockout-2.1.0.js"></script>
  • 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. @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. @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. @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. @nishanilDemo
  • 22. @nishanilSingle PageApplication
  • 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. @nishanilVIEW
  • 25. @nishanilSPA with Knockout
  • 26. @nishanilSPA Demo
  • 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. @nishanilThank You!Nishanth Anilnnish.com