A simple talk about appliyng patterns in Javascript. It focuses in both jQuery and Angular. It explains some basics MVC, cohesion and coupling. It also have many examples of the patterns applied. Full examples and documentation can be found here: http://david-rodenas.com/tutorial-jspatterns-v1/

1. JS AND PATTERNS
or: How I Learned to Stop Worrying and Love JS Frameworks
@drpicox
1
Sunday 25 May 14

2. PATTERNS
ModelView Controller
+
High Cohesion & Low Coupling
2 @drpicox
Sunday 25 May 14

3. MODELVIEW CONTROLLER
3 @drpicox
tree
with apples
http://clipart.nicubunu.ro
Sunday 25 May 14

4. MODELVIEW CONTROLLER
4 @drpicox
Models
ViewsControllers
Sunday 25 May 14

5. MODELVIEW CONTROLLER
Model: is almost data
user = {
id: ‘123’,
name: ‘John’,
surname: ‘Smith’,
fullName: function() {
return this.name+‘ ’+this.surname;
},
...
};
5 @drpicox
Sunday 25 May 14

6. MODELVIEW CONTROLLER
Model: it might be also some view state
tabChooser = {
tabs: [‘introduction’,‘advanced’],
current: 0,
next: function() {
this.current += 1;
this.current %= this.tabs.length;
},
...
};
6 @drpicox
Sunday 25 May 14

7. MODELVIEW CONTROLLER
Model: knows nothing aboutViews and Controllers
(it is observed: callbacks, dirtycheck, ...)
user.addObserver(userFormView)
ex: look for Observer pattern for more info.
7 @drpicox
Sunday 25 May 14

8. MODELVIEW CONTROLLER
View: is almost html/css
<form name=“user”>
<label for=“name”>Name:</label>
<input name=“name” type=“text”>
<label for=“surname”>Surname:</label>
<input name=“surname” type=“text”>
<input type=“submit” value=“Update”>
</form>
8 @drpicox
Sunday 25 May 14

9. MODELVIEW CONTROLLER
View: + a little bit of JS
userFormView = {
setUser: function(user) {
user.addObserver(this);
this.user = user;
this.update();
},
update: function() {
this.form.name = user.name;
this.form.surname = surname;
},
...
}; 9 @drpicox
Sunday 25 May 14

10. MODELVIEW CONTROLLER
View: knows nothing about Controllers
(it is used: callbacks, interfaces, ...)
userFormView.onSubmit(controller.save)
10 @drpicox
Sunday 25 May 14

11. MODELVIEW CONTROLLER
Controller: is almost everything else
user = http.get(‘/user’);
userFormView = new UserFormView();
userFormView.setUser(user);
userFormView.onSubmit(function() {
http.post(‘/user’, user);
});
viewport.setView(userFormView);
11 @drpicox
Sunday 25 May 14

12. MODELVIEW CONTROLLER
Controller: is almost everything else
user = http.get(‘/user’);
userFormView = new UserFormView();
userFormView.setUser(user);
userFormView.onSubmit(function() {
http.post(‘/user’, user);
});
viewport.setView(userFormView);
Be Careful!
Persistence/Service
Controller
loads an stores data (may use identity map)
12 @drpicox
Sunday 25 May 14

13. MODELVIEW CONTROLLER
Controller: is almost everything else
user = http.get(‘/user’);
userFormView = new UserFormView();
userFormView.setUser(user);
userFormView.onSubmit(function() {
http.post(‘/user’, user);
});
viewport.setView(userFormView);
Be Careful!
Route
Controller
ex: http://localhost:8080/#/user
13 @drpicox
Sunday 25 May 14

14. MODELVIEW CONTROLLER
Controller: is almost everything else
user = http.get(‘/user’);
userFormView = new UserFormView();
userFormView.setUser(user);
userFormView.onSubmit(function() {
http.post(‘/user’, user);
});
viewport.setView(userFormView);
Be Careful!
View
Controller
handle an specific view
14 @drpicox
Sunday 25 May 14

15. MODELVIEW CONTROLLER
Controller: detect controllers that you need
• Persistence/Service Controllers: load, store, manages models.
Uses other persistence controllers and models
• View Controllers: prepare and observe views.
Uses persistence controllers, views and (low) models.
• Route Controllers: select a view to show.
Uses other controllers, (instance) views and (low) models.
15 @drpicox
Sunday 25 May 14

16. MODELVIEW CONTROLLER
MVC Is NOT a Fashion!
, or ModelView Adapter, or ModelViewViewModel, or ModelView Presenter
Use them wisely
Do not create ternaries of ModelX-ViewX-ControllerX just to follow
the pattern. Create models, views and controllers because they make
sense, and reuse them!
16 @drpicox
Sunday 25 May 14

17. COMMON SENSE PATTERNS
17 @drpicox
High Cohesion: put related things in the same place
• Persistence Controllers: load/store models of one kind,
• Route Controllers: prepare a view to show,
• View: shows a related information to a user (not a model!),
• Model: describes an entity,
• ...
Sunday 25 May 14

18. COMMON SENSE PATTERNS
18 @drpicox
Low Coupling: minimize what each part knows of other
• Create direction:A knows B, but B must not know A
Models
Views
View
Controllers
Service
Controllers
Knows
A
B
Sunday 25 May 14

19. COMMON SENSE PATTERNS
19 @drpicox
They are the most basic pattern to follow,
many other patterns come from them,
even ModelView Controller.
High Cohesion & Low Coupling
Sunday 25 May 14

20. 20
Sunday 25 May 14

21. MODELVIEW CONTROLLER
Model: is not html/dom
<input name=“name” value=“John”>
<img class=“status” src=“success.jpg”>
21 @drpicox
Model: is a Javascript object
user = {name: “John”};
status = “success”;
Please, don’t
Sunday 25 May 14

22. 22
SO...
ModelView Controller: use it wisely
High Cohesion and Low Coupling: make it your common sense
@drpicox
Sunday 25 May 14

23. Thanks
23 @drpicoxhttps://github.com/drpicox/tutorial-js-patterns
Code examples:
Sunday 25 May 14

24. Deeper in code
24 @drpicox
Sunday 25 May 14

25. DEEPER CODE
Persistence Controller: remote data accesses (v1)
userService = {
get: function() {
return http.get(‘/user’);
},
save: function(user) {
http.post(‘/user’, user);
},
};
25 @drpicox
Simple get and save, of
data.
Sunday 25 May 14

26. DEEPER CODE
Persistence Controller: remote data accesses (v2)
userService = {
get: function() {
return $http.get(‘/user’).
then(function (response) {
var user = new User(response.data);
return user;
});
},
save: function(user) {
return $http.post(‘/user’, user);
},
}; 26 @drpicox
Recover data and create
model instances.
Sunday 25 May 14

27. DEEPER CODE
Persistence Controller: remote data accesses (v3)
instance = null;
userService = {
get: function() {
if (instance) { return instance; }
return instance = $http.get(‘/user’).
then(function (response) {
var user = new User(response.data);
return user;
});
},
...
}; 27 @drpicox
Keep track of recovered
instances. Not double
loading, always same
instance for same data.
(have key? Identity map)
Sunday 25 May 14

28. DEEPER CODE
View Controller: it makes the view alive
function UserFormController(view, user) {
view.user = user;
view.save = function() {
userService.save(user);
};
}
28 @drpicox
For Java programmers: imagine that view satisfies a interface.
For AngularJS programmers: view is indeed $scope.
Sunday 25 May 14

29. DEEPER CODE
Route Controller: it shows what user wants (v1)
routeManager.when(‘/user’, function() {
var user = userService.get();
var view = new UserFormView();
var controller = new UserFormController(view, user);
viewport.setView(view);
});
29 @drpicox
Sunday 25 May 14

30. DEEPER CODE
Route Controller: it shows what user wants (v2)
routeManager.when(‘/user’, function() {
userService.get().
then(function (user) {
var view = new UserFormView();
var controller = new UserFormController(view, user);
viewport.setView(view);
});
});
30 @drpicox
Wait for it :-)
Sunday 25 May 14

31. DEEPER CODE
View: jQuery version
// this{ user, save }
function UserFormView() {
var view = this;
view.template = ‘userForm.tpl.html’;
view.link = function(dom) {
$(‘input[name=“name”]’).attr(‘value’,view.user.name);
$(‘form’).submit(function() {
view.save();
});
};
...
} 31 @drpicox
Sunday 25 May 14

32. DEEPER CODE
View:AngularJS version
<form ng-submit=“save()”>
<label>Name:</label>
<input ng-model=“user.name” type=“text”>
<label>Surname:</label>
<input ng-model=“user.surname” name=“surname” type=“text”>
<input type=“submit” value=“Update”>
</form>
32 @drpicox
Sunday 25 May 14

33. COMMON SENSE PATTERNS
@drpicox
Low Coupling: minimize what each part knows of other
• Create direction:A knows B, but B must not know A
Knows
A
B
A
B
C
No circles!
Sunday 25 May 14

34. When to use them?
34 @drpicox
Sunday 25 May 14

35. Multiple Page Application Single Page Application
• JS controls the application flow
• SEO requires pre-render
• Server delivers assets and API
• Application session is in JS
• JS framework recommended
• PHP/JSP/RoR/... controls flow
• SEO oriented
• Server delivers anything
• Application session is in Server
• Just jQuery
35 @drpicox
Sunday 25 May 14

36. Multiple colors and sizes to choose
Price and other info may change
36 @drpicox
www.desigual.com
Sunday 25 May 14

37. No one wants to wait here
37 @drpicox
www.desigual.com
Sunday 25 May 14

38. So...
Multiple Page Applications also requires some JS framework
38 @drpicox
Sunday 25 May 14