Se ha denunciado esta presentación.
Se está descargando tu SlideShare. ×

Mvvm knockout vs angular

Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio
Anuncio

Eche un vistazo a continuación

1 de 39 Anuncio

Más Contenido Relacionado

Presentaciones para usted (20)

A los espectadores también les gustó (20)

Anuncio

Similares a Mvvm knockout vs angular (20)

Mvvm knockout vs angular

  1. 1. MVVM for the Web Angular vs. Knockout VS. @basarat
  2. 2. Why MVVM? • Cleaner user interface • (used to be Cleaner code only) • Designer / Developer separation
  3. 3. What makes MVVM Work? • Two way DataBinding for properties • With some form of interception options • Command binding • Templates • Names change but concepts remain the same.
  4. 4. MVVM the Knockout Way
  5. 5. How MVVM works for XAML • INotifyPropertyChanged (INPC) • ICommand Interface and Command Property • DataTemplates / ItemTemplates
  6. 6. Enter Knockoutjs • By Steve Sanderson. • Works at microsoft. • Highly inspired and directed by what was already there in XAML world. • Perhaps to ease XAML people into HTML.
  7. 7. Knockout ViewModel similar to INPC ko.obervable ko.computed ko.obervableArray
  8. 8. Knockout INPC View • XAML View (dependency properties): • Knockout View (bindings):
  9. 9. Knockout Commands • XAML • Knockout (click and other bindings)
  10. 10. Knockout DataTemplates • XAML • knockout
  11. 11. Knockout uses concept of Bindings
  12. 12. Angular js?
  13. 13. MVVM with AngularJS : Observables • Don’t need them. Means your objects do not need an INPC type of implementation. • “KO dependency tracking is a clever feature for a problem which angular does not have” – heard on StackOverflow
  14. 14. How does it know if anything changed? • Angular remembers the value and compares it to previous value. • This is basic dirty checking. If there is a change in value, then it fires the change event. • To know when angular should check the new value it we have scope.
  15. 15. Quick AngularJS tutorial • http://jsfiddle.net/basarat/V9sYB/
  16. 16. Why Angular chose a different method? • Better syntax, especially for templates • Google plans to make it a web standard so browsers can do this natively. • Change listeners fire immediately on setter, which is a problem, since the change listener can further change data, which fires more change events.
  17. 17. Quick AngularJS tutorial 2 • How browsers could support it natively
  18. 18. Angular js performance • Humans are • Slow – anything faster than 50ms is imperceptible • Limited - can't really show more than about 2000 pieces of information to a human • Can you do 2000 comparisons in 50 ms even on slow browsers? That means that you have 25us per comparison.
  19. 19. MVVM the Angular Way
  20. 20. Observables : ViewModel • https://github.com/basarat/ChessClock • Standard javascript properties your scope • Really good with Typescript • Angular folks call their framework MV* i.e. • Model View Whatever • But like to name it Controller
  21. 21. Observables : The view • {{property}} syntax
  22. 22. Filters • Similar to XAML IValueConverter but One way binding for display
  23. 23. Commands • The VM • The View
  24. 24. Templates
  25. 25. Angular JS uses concept of directives
  26. 26. Which one should you use? Performance
  27. 27. jsPref http://jsperf.com/angularjs-vs-knockoutjs
  28. 28. Which one should you use? Browser Support
  29. 29. Angular • http://docs.angularjs.org/misc/faq • We run our extensive test suite against the following browsers: Safari, Chrome, Firefox, Opera, IE8, IE9 and mobile browsers (Android, Chrome Mobile, iOS Safari) • Yahoo’s Class A browser
  30. 30. Knockout • http://knockoutjs.com/documentation/browser- support.html • Mozilla Firefox 2.0+ (latest version tested = 3.6.8) • Google Chrome (tested on version 5 for Windows and Mac; should work on older versions too) • Microsoft Internet Explorer 6, 7, 8, 9, 10 • Apple Safari (tested on Windows Safari version 5, Mac OS X Safari version 3.1.2, and iPhone Safari for iOS 4; should work on newer/older versions too) • Opera 10 for Windows • Knockout was also found to work on the following browsers (though we don’t recheck these for every release): • Opera Mini • Google Android OS browser (OS version 2.2)
  31. 31. Which one should you use? Popularity Contest
  32. 32. Knockout vs. Angular • Google Searches • StackOverflow tags ( as of feb 2013) • Knockout : 4,304 • Angular : 2,794
  33. 33. Decisive • Stared on Github (as of feb 2013) • https://github.com/angular/angular.js : 7072 • https://github.com/SteveSanderson/knockout : 3011
  34. 34. Which one should you use? Debugging
  35. 35. Batarang • Dedicated Debugging tool for angular. • None for knockout as of yet.
  36. 36. Conclusion The world really needs both
  37. 37. Choice (my opinion) • Performance : Angular • Legacy Browser (specifically IE) : Knockout • MS bubble : Knockout • Popularity : Angular • Debugging : Angular • Awesomest Web App Ever : Angular
  38. 38. Links • Help Knockout • http://knockoutjs.com/documentation/introduction.html • Help Angular • http://docs.angularjs.org/guide/concepts • https://github.com/angular/angular.js/wiki/JsFiddle-Examples • Comparisons • http://stackoverflow.com/questions/9682092/databinding-in- angularjs • http://litebyte.net/blog/?p=135 • TODO App in both: http://addyosmani.github.com/todomvc/
  39. 39. Thank you • http://basarat.com • basaratali@gmail.com • @basarat

×