What's inside ?
●
Pure jQuery development
●
MVC & MVVM architectural pattern
●
TodoMVC set of examples
●
Backbone.js and Knockout.js
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
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
Slide 6
Slide 6 text
todomvc\examples\jquery\
Slide 7
Slide 7 text
Long Term
Large Scale
applications requires structure & architecture
Slide 8
Slide 8 text
Model
View
Controller
Slide 9
Slide 9 text
Model
View
ViewModel
Slide 10
Slide 10 text
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.
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
Fast facts
●
Created by Jeremy Ashkenas
●
Library (not framework)
●
Minimalistic
●
Huge popularity
●
Used by large companies SoundCloud,
Foursquare, E-conomic
●
Low dependencies
●
Template agnostic
Backbone.Sync
●
Implements the Storage strategy
●
RESTful HTTP Backbone.Sync
●
LocalStorage
●
.. any custom you want
Slide 23
Slide 23 text
todomvc\examples\backbone\
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
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
Slide 26
Slide 26 text
Knockoutjs.Views
Slide 27
Slide 27 text
Knockoutjs.Models
Slide 28
Slide 28 text
Knockoutjs.Observables
Slide 29
Slide 29 text
Knockoutjs.ViewModels
Slide 30
Slide 30 text
UI Model
Observer
updates view updates model
Knockoutjs.UI Updates
fires events fires events
Slide 31
Slide 31 text
todomvc\examples\knockoutjs\
Slide 32
Slide 32 text
Conclusions
Slide 33
Slide 33 text
●
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