Overview of JavaScript Applications Development Frameworks

Overview of JavaScript Applications Development Frameworks.

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

Transcript

1. Overview of
   JavaScript Applications
   Development Frameworks
   

   View Slide

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

   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
   Controller
   

   View Slide

9. Model
   View
   ViewModel
   

   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)
    ●
    Minimalistic
    ●
    Huge popularity
    ●
    Used by large companies SoundCloud,
    Foursquare, E-conomic
    ●
    Low dependencies
    ●
    Template agnostic
    

    View Slide

13. Core components
    ●
    Model
    ●
    Collection
    ●
    View
    ●
    Router
    ●
    Sync
    

    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
    ●
    LocalStorage
    ●
    .. 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
    ●
    Templates
    ●
    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
    Observer
    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.
    http://beletsky.net
    @alexbeletsky
    

    View Slide