Introduction to Backbone.js & Marionette.js

Core Systems Transformation Solutions
Backbone & Marionette
Tutor: Dmitry Grachikov, ROI

1
Return on Intelligence, Inc. ©2014
All Rights Reserved.
"Simple" Frontend Application
var html = "<div>" +
"<span>" + data + "</span>" +
"</div>";
$('#container').html(html);
$('#contaner').append(
$('<div></div>').append(
$('<span></span>').html(data)
)
);
$('span').on('click', function(e) {
// do something...
$(this).addClass('some-class');
// do something again...
});

2
Benefits:
• Easy for small amount of code
• "Fast" development
Drawbaks:
• Complexity grows very fast
• Hard to understand for medium and large codebase
• Specifically to JavaScript: "Callback-Hell"
• Hard to maintain
• Tight coupling with HTML
• …

3
Benefits:
• Easy for small amount of code
• "Fast" development
Drawbaks:
• Complexity grows very fast
• Hard to understand for medium and large codebase
• Specifically to JavaScript: "Callback-Hell"
• Hard to maintain
• Tight coupling with HTML
• …

4
"Simple" Application Improvements
• Assume that "simple" approach with jQuery cannot solve all problems
• Separate View from business logic
– Solve problem with custom solution
– Using effective architectural pattern (for example MVC, MVVM,
…)
• Create own realization
• Use proven framework

5
• Assume that jQuery can't solve all problems
…)

6
…)

7
…)

8
…)

9
…)

10
Proven Framework vs Custom Solution
Custom Solution Proven Framework
+ Suitable to the project
+ No time for learning
- Implementation take a long time
- After a while can be that new
concepts cannot be added
+ Ready to use
+ Well documented
+ Community
- Requires time for learning
- Can take a time to figure out that
framework is not suitable to the
project

11
Backbone.js Marionette.js
Models Collections
Views
ItemView
CollectionView
CompositeView
LayoutView

12
Backbone.js
Backbone.js gives structure to web application

13
Backbone.js Model Definition
var EmployeeModel = Backbone.Model.extend({
defaults: {
id: null,
name: null,
surname: null,
dateOfEmployment: null,
...
}
});
var employee = new EmployeeModel({
name: 'John',
surname: 'Johnson',
dateOfEmployment: '2000-01-05',
...
});

14
Backbone.js Model Initialization
defaults: {
id: null,
name: null,
surname: null,
dateOfEmployment: null,
...
}
});
name: 'John',
surname: 'Johnson',
dateOfEmployment: '2000-01-05',
...
});

15
Backbone.js Model Events
employee.on('change', function(model) {
console.log('Employee changed');
});
employee.on('change:name', function(model) {
console.log('Name changed ' +
model.previous('name') + ' -> ' +
model.get('name'));
});
employee.set('name', 'Peter');
employee.set({
name: 'John',
surname: 'Peterson'
});

16
Backbone.js Model Events
employee.on('change', function(model) {
console.log('Employee changed');
});
employee.on('change:name', function(model) {
console.log('Name changed ' +
model.previous('name') + ' -> ' +
model.get('name'));
});
employee.set('name', 'Peter');
employee.set({
name: 'John',
surname: 'Peterson'
});

17
Backbone.js Models REST
urlRoot: 'http://api.dev/employees',
...
});
name: 'John',
surname: 'Johnson',
...
});
employee.save({
...
});
urlRoot
00020000009222iik0

18
urlRoot: 'http://api.dev/employee',
...
});
name: 'John',
surname: 'Johnson',
...
});
employee.save({
...
});
urlRoot
POST /employee
Response: {
"id": 1,
...
}

19
employee.fetch();
employee.save({
name: "Some name",
...
});
employee.destroy();
GET /employee/1
PUT /employee/1
{
"name": "Some name",
...
}
DELETE /employee/1

20
Backbone.js Collection Definition
var EmployeeCollection = Backbone.Collection.extend({
model: EmployeeModel
});
var employees = new EmployeeCollection([
{id: 1, name: 'John', surname: 'Johnson'},
{id: 2, name: 'Peter', surname: 'Peterson'}
]);

21
Backbone.js Collection Initialization
var EmployeeCollection = Backbone.Collection.extend({
model: EmployeeModel
});
var employees = new EmployeeCollection([
{id: 1, name: 'John', surname: 'Johnson'},
{id: 2, name: 'Peter', surname: 'Peterson'}
]);

22
Backbone.js Filling Collection
employees.add({id: 1, name: 'John', ...});
or
employees.add(employee);

23
Backbone.js Remove Data From Collection
employees.remove(1); //remove by id
or
employees.remove(employee); //remove by model

24
Backbone.js Access Collection Data
var first = employees.first();
var second = employees.at(1); //Get second element
var peter = employees.get(2); //Search by id
var john = employees.findWhere({name: 'John'});
var johns = employees.where({name: 'John'});

25
Backbone.js Collection Events
employees.on('add', function(model, collection) {
console.log('New employee added');
});
employees.on('remove', function(model, collection) {
console.log('Employee removed');
});

26
Backbone.js Collections REST
var Employees = Backbone.Collection.extend({
url: 'http://api.dev/employees',
...
});
Define url

27
Backbone.js Collections REST
employees.fetch();
employees.create({
name: "Ivan",
name: "Petrov"
});
employees.at(0).destroy();
GET /employees
POST /employees
{
"name": "Ivan",
...
}
DELETE /employees/:id

28
Backbone.js View Definition
Backbone View

29
Backbone.js View Definition
var EmployeeView = Backbone.View.extend({
el: 'table tbody',
render: function() {
var templateEl = '#template',
template = _.template(templateEl.html()),
html = template({users: this.collection});
this.$el.html(html);
}
});

30
Backbone.js Template
<script type="text/template" id="template">
<% users.each(function(user) { %>
<tr>
<td><%= user.get('id') %></td>
<td><%= user.get('name') %></td>
<td><%= user.get('surname') %></td>
<td><%= user.get('position') %></td>
<td><%= user.get('dateOfEmployment') %></td>
</tr>
<% }) %>
</script>

31
Backbone.js View Render
var employees = new EmployeeCollection(...);
var view = new EmployeeView({
collection: employees
});
view.render();

32
Marionette.js
Marionette.Js
Marionette simplifies your Backbone application
code with robust views and architecture solutions.

33
Marionette.js ItemView Definition
var EmployeeItemView = Marionette.ItemView.extend({
el: 'table tbody',
template: '#template-user'
});

34
Marionette.js ItemView vs Backbone View
el: 'table tbody',
template: '#template-user'
});
var EmployeeView = Backbone.View.extend({
el: 'table tbody',
render: function() {
var templateEl = '#template',
template = _.template(templateEl.html()),
html = template({users: this.collection});
this.$el.html(html);
}
});

35
Marionette.js ItemView Template
<script type="text/template" id="template-user">
<tr>
<td><%= id %></td>
<td><%= name %></td>
<td><%= surname %></td>
<td><%= position %></td>
<td><%= dateOfEmployment %></td>
<td>
<a href="#" class="promote">
Promote
</a>
</td>
</tr>
</script>

36
Marionette.js ItemView. Add UI Element
...
ui: {
promote: '.promote'
},
events: {
'click @ui.promote': 'onPromoteClick'
},
modelEvents: {
'change': 'render'
},
onPromoteClick: function(e) {
e.preventDefault();
this.model.set('position', 'Senior Developer');
}
});

37
Marionette.js ItemView. Add Click Handling
...
ui: {
promote: '.promote'
},
events: {
},
modelEvents: {
'change': 'render'
},
e.preventDefault();
}
});

38
Marionette.js ItemView. Add Model Change Render
...
ui: {
promote: '.promote'
},
events: {
},
modelEvents: {
'change': 'render'
},
e.preventDefault();
}
});

39
Marionette.js ItemView Initialization
var employee = new EmployeeModel(...);
var view = new EmployeeItemView({
model: employee
});
view.render();

40
Marionette.js CollectionView Definition
var CollectionView = Marionette.CollectionView.extend({
el: 'table tbody',
childView: EmployeeItemView
});

41
Marionette.js CollectionView Initialization
var employees = new EmployeeCollection();
var view = new CollectionView({
collection: employees
});
view.render();

42
Marionette.js CompositeView Definition
CompositeView = CollectionView + ItemView

43
Marionette.js CompositeView Definition
var CompositeView = Marionette.CompositeView.extend({
el: 'div#users',
template: '#template',
childView: EmployeeItemView,
childViewContainer: 'table tbody'
});

44
Marionette.js CompositeView Template
<script type="text/template" id="template">
<table class="table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Surname</th>
<th>Position</th>
<th>Date of employment</th>
<th>Action</th>
</tr>
</thead>
<tbody>

</tbody>
</table>
</script>

45
Marionette.js CompositeView ChildView
el: 'div#users',
});

46
Marionette.js CompositeView ChildViewContainer
el: 'div#users',
});

47
Marionette.js CompositeView. Data Sort
EmployeesCollection

48
Comparator(E1,E2)
EmployeesCollection

49
Comparator(E1,E2)
EmployeesCollection
SortModel

50
Comparator(E1,E2)
EmployeesCollection
SortModel
CompositeView

51
Marionette.js EmployeesCollection Comparator
comparator: function(employee1, employee2) {
//returns -1, 0, 1
}

52
Marionette.js CompositeView. DataSort UI
ui: {
sort: 'span[data-sortBy]'
},
events: {
'click @ui.sort': 'onSortLinkClick'
},
onSortLinkClick: function(e) {
...
}
...
});

53
Marionette.js CompositeView. Sort Handler
...
onSortLinkClick: function(e) {
var $el = $(e.currentTarget),
sortBy = this.model.get('sortBy'),
sortOrder = this.model.get('sortOrder');
this.model.set({
sortBy: $el.data('sortby'),
sortOrder: sortBy == $el.data('sortby')
? (-sortOrder || 1) : 1
});
this.collection.sort();
},
...

54
Marionette.js CompositeView Initialization
var view = new CompositeView({
el: '#users',
collection: employees,
model: sortModel
});
view.render();
var sortModel = new SortModel({
sortBy: null,
sortOrder: null
});

55
Marionette.js Views Communication
<Employee Form />
<Employee List />
EditSave/Cancel
Add

56
Marionette.js LayoutView Definition
LayoutView = View * Region

57
Marionette.js LayoutView
var LayoutView = Marionette.LayoutView.extend({
template: ...,
ui: ...,
events: ...,
regions: {
employees: '#employees',
employeeForm: '#employee-form'
},
...
createEmployeeFormView: function(model) {
...
}
});

58
Marionette.js LayoutView. Region+View
...
enteremployeeFormMode: function() {
...
this.showChildView('employeeForm',
this.createNewEmployeeView());
}
...
});

59
Marionette.js LayoutView. View Events
template: ...,
ui: ...,
events: ...,
var view = new EmployeeFormView({
model: model || new EmployeesModel()
});
view.on('cancel', this.onAddCancel.bind(this));
view.on('save', this.onEmployeeSave.bind(this));
return view;
}
});

60
Marionette.js LayoutView. View Events
template: ...,
ui: ...,
events: ...,
var view = new EmployeeFormView({
model: model || new EmployeesModel()
});
view.on('cancel', this.onAddCancel.bind(this));
view.on('save', this.onEmployeeSave.bind(this));
return view;
}
});

61
Marionette.js Conclusions
Marionette.js:
• Offers rich View functionality
• Makes realization of View easier even then in "simple" approach
• Allows to create reusable components
• …

62
Marionette.js Appendix: One To Many Relation
var employeesView = new OneToManyCompositeView(...);
var notes = new NoteCollection();
var notesView = new OneToManyNotesCompositeView({
collection: notes
});
employeesView.on('childview:show:notes',
function(view) {
notesView.model = view.model;
notesView.render();
notes.url = 'http://.../' + view.model.get('id');
notes.fetch();
});

Introduction to Backbone.js & Marionette.js

More Related Content

What's hot

Viewers also liked

Similar to Introduction to Backbone.js & Marionette.js

More from Return on Intelligence

Recently uploaded

Introduction to Backbone.js & Marionette.js