Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Overview of JavaScript Applications Development Frameworks

Overview of JavaScript Applications Development Frameworks

Overview of JavaScript Applications Development Frameworks.

Reviewed pure jQuery app, Backbone.js and Knockout.js

Alexander Beletsky

May 18, 2012
Tweet

More Decks by Alexander Beletsky

Other Decks in Programming

Transcript

  1. Overview of JavaScript Applications Development Frameworks

  2. @alexbeletsky http://beletsky.net http://github.com/alexanderbeletsky

  3. What's inside ? • Pure jQuery development • MVC &

    MVVM architectural pattern • TodoMVC set of examples • Backbone.js and Knockout.js
  4. None
  5. Pure jQuery Apps • jQuery DOM manipulation framework • Does

    not provide any app structure • No separate of concerns (data and presentation mixed together) • DOM used as data storage • Low maintability in long perspective
  6. todomvc\examples\jquery\

  7. Long Term Large Scale applications requires structure & architecture

  8. Model View Controller

  9. Model View ViewModel

  10. Different client side JS development frameworks implements MVC differently. Addy

    Osmani introduces term MV* (MV star), to define the family of frameworks with common goal but different impementation strategy.
  11. None
  12. Fast facts • Created by Jeremy Ashkenas • Library (not

    framework) • Minimalistic • Huge popularity • Used by large companies SoundCloud, Foursquare, E-conomic • Low dependencies • Template agnostic
  13. Core components • Model • Collection • View • Router

    • Sync
  14. Backbone.Model

  15. Backbone.Model: Getters & Setters

  16. Backbone.Model: Events

  17. Backbone.Collections

  18. Backbone.Views

  19. Backbone.Views: Attributes

  20. Backbone.Views: Events

  21. Backbone.Router

  22. Backbone.Sync • Implements the Storage strategy • RESTful HTTP Backbone.Sync

    • LocalStorage • .. any custom you want
  23. todomvc\examples\backbone\

  24. None
  25. Fast facts • Created by Steve Sanderson • MVVM based

    • Declarative bindings • Automatic UI refresh • Templates • Promoted by Microsoft in ASP.NET MVC • No dependencies • Great documentation
  26. Knockoutjs.Views

  27. Knockoutjs.Models

  28. Knockoutjs.Observables

  29. Knockoutjs.ViewModels

  30. UI Model Observer updates view updates model Knockoutjs.UI Updates fires

    events fires events
  31. todomvc\examples\knockoutjs\

  32. Conclusions

  33. • Both Knockout.js and Backbone.js are powerful and complete •

    Knockout.js more opionated • Knockout.js more easy to start • Both are complex thought • Backbone.Sync model • Knockout UI updates
  34. Thank you. http://beletsky.net @alexbeletsky