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

More Decks by Alexander Beletsky

Other Decks in Programming


  1. Overview of
    JavaScript Applications
    Development Frameworks

    View Slide

  2. @alexbeletsky

    View Slide

  3. What's inside ?

    Pure jQuery development

    MVC & MVVM architectural pattern

    TodoMVC set of examples

    Backbone.js and Knockout.js

    View Slide

  4. View Slide

  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

    View Slide

  6. todomvc\examples\jquery\

    View Slide

  7. Long Term
    Large Scale
    applications requires structure & architecture

    View Slide

  8. Model

    View Slide

  9. Model

    View Slide

  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.

    View Slide

  11. View Slide

  12. Fast facts

    Created by Jeremy Ashkenas

    Library (not framework)


    Huge popularity

    Used by large companies SoundCloud,
    Foursquare, E-conomic

    Low dependencies

    Template agnostic

    View Slide

  13. Core components






    View Slide

  14. Backbone.Model

    View Slide

  15. Backbone.Model: Getters & Setters

    View Slide

  16. Backbone.Model: Events

    View Slide

  17. Backbone.Collections

    View Slide

  18. Backbone.Views

    View Slide

  19. Backbone.Views: Attributes

    View Slide

  20. Backbone.Views: Events

    View Slide

  21. Backbone.Router

    View Slide

  22. Backbone.Sync

    Implements the Storage strategy

    RESTful HTTP Backbone.Sync


    .. any custom you want

    View Slide

  23. todomvc\examples\backbone\

    View Slide

  24. View Slide

  25. Fast facts

    Created by Steve Sanderson

    MVVM based

    Declarative bindings

    Automatic UI refresh


    Promoted by Microsoft in ASP.NET MVC

    No dependencies

    Great documentation

    View Slide

  26. Knockoutjs.Views

    View Slide

  27. Knockoutjs.Models

    View Slide

  28. Knockoutjs.Observables

    View Slide

  29. Knockoutjs.ViewModels

    View Slide

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

    View Slide

  31. todomvc\examples\knockoutjs\

    View Slide

  32. Conclusions

    View Slide

  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

    View Slide

  34. Thank you.

    View Slide