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
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
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.
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\
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