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

F32f547e66f3b6528376d67fdb67008f?s=128

Alexander Beletsky

May 18, 2012
Tweet

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