Make your Backbone Application dance

ake your Backbone
Application Dance
May 15th, 2014 — Verona
Nicholas Valbusa
@squallstar

I AM
Nicholas Valbusa
squallstar - squallstar.it
AT
Lead JS Developer
cronycle.com

Our challenges:
- Expand your timeline tweets into stories
- Organize and ﬁlter your stories into collections
"Cronycle is a content curation tool based on
Twitter tweets and RSS feeds"
- Make it real-time, responsive, awesome
- Live search

10ppl in London
- Rails+Marionette Webclient
Paid service,
at the end of this speech (Yipee!!!)
- Rails API, Elasticsearch, Redis queue
- iOS Native app

Always choose the
right tool for the job

Make your Backbone Application dance

• Solid foundation/core classes
• Flexible and simple
• Great pub/sub events architecture
• Awesome Model/Collection implementation 
for REST resources
• Good MV*-style code separation (p.s. it’s a MVP)
• It is not like Angular.JS
THE GOOD PARTS

• It's incredibly easy to end up in a bad place
• No Application main class 
(some people use its router)
• Doesn’t include automatic and good ways to bind models to their views
• No “native” way to organise the pieces of your webapp into modules
• No "native" way to organize layouts (header/footer/sidebar/content/etc..)
• It is not sponsored/maintained by Google
THE BAD PARTS

let me read that again,
• “Awesome Model/Collection implementation 
for REST resources”
var Library = Backbone.Collection.extend({
model: Book,
url: “v1/books”
});

for all the rest, there’s…

Marionette.js
marionettejs.com

Very similar to Backbone, just
goes a few more steps.

“A composite application library for Backbone that
aims to simplify the construction of large scale
JavaScript applications”
!
— that sits on top of Backbone
An event-driven collection of common design
and implementation patterns.
Basically… Marionette brings an
application architecture to Backbone

Key features
• Organised as hell 
Applications are built in modules, and with event-driven architecture
• No zombies 
Built-in memory management and zombie-killing in views, regions and
layouts
• Flexible 
Just code the way you prefer, and picks only the features you need.
• Takes care of the rendering process

TAKES CARE OF
THE RENDERING
PROCESS

Depends on:
Backbone & Underscore
Backbone.BabySitter & Backbone.Wreqr 
(both included)
just 31kb !

Preface
The base structure I'm using was adopted from BackboneRails

<html>
<head>
<title>JSDay2014 - Marionette</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="libs/jquery.js"></script>
<script src="libs/underscore.js"></script>
<script src="libs/backbone.js"></script>
<script src="libs/backbone.marionette.js"></script>
<script src="boot.js"></script>
</head>
<body>
<div id="header-region"></div>
<div id="main-region"></div>
<div id="footer-region"></div>
<script>
App.start({
environment: 'staging',
foo: 'bar'
});
</script>
!
</body>
</html>
index.html

App = new Backbone.Marionette.Application();
!
App.on("initialize:before", function (options) {
// do something. come on!
});
!
App.on("initialize:after", function (options) {
if (Backbone.history){
Backbone.history.start();
}
});
javascript / boot.js
— that’s it!

App.addRegions({
headerRegion: "#header-region",
mainRegion: "#main-region"
footerRegion: "#footer-region"
});
MyCustomHeaderRegion = Marionette.Region.extend({
el: "#header-region"
});
!
MyApp.addRegions({
headerRegion: MyCustomHeaderRegion
});
You can also deﬁne custom classes for your regions:
“Regions provide consistent methods to manage, show
and close views in your applications and layouts”

header-region
main-region
footer-region

Showing a view in a region
var myView = new MyView();
!
// renders and displays the view
App.mainRegion.show(myView);
!
// closes the current view
App.mainRegion.close();
— simple as that.

header-region
main-region
footer-region
MyView
App.mainRegion.currentView

If you replace the current view with a new view by calling
show, it will automatically close the previous view
// Show the first view.
var myView = new MyView();
MyApp.mainRegion.show(myView);
no more zombies!
// Replace the view with another. The
// `close` method is called for you
var anotherView = new AnotherView();
MyApp.mainRegion.show(anotherView);

AMD/Require vs Marionette Modules
Take advantage of Marionette's built in module-loader
App.module("MyModule", function (MyModule, App, Backbone, Marionette, $, _) {
!
// do stuff here ...
!
var myData = "this is private data";
!
MyModule.someData = "public data";
!
});
!
var theSameModule = MyApp.module("MyModule");

Split your sections/features into modules

Always keep your
app organised —
while it grows

Organise each module
App.BlogApp (Marionette Module)
BlogApp.Router (Marionette.AppRouter)
BlogApp.Posts (Submodule)
Posts.Controller
Posts.View

What about Backbone models/collections?
App.Entities (Marionette module)
Entities.Article (Backbone.Model)
Entities.Articles (Backbone.Collection)

App.module("Entities", function (Entities, App, Backbone, Marionette, $, _) {
!
Entities.Post = Backbone.Model.extend();
!
Entities.Posts = Backbone.Collection.extend({
model: Entities.Post,
url: “path/to/posts.json“
});
!
});
entities / posts.js

App.module("BlogApp", function (BlogApp, App, Bk, Mr, $, _) {
!
BlogApp.Router = Backbone.Marionette.AppRouter.extend({
appRoutes: {
"posts" : "showArticles",
"posts/:id" : "showArticle"
}
});
!
var API = {
showArticles: function () {
BlogApp.Posts.Controller.Show();
},
showArticle: function (id) {
BlogApp.Posts.Controller.Show(id);
}
};
!
App.addInitializer(function () {
new BlogApp.Router({
controller: API
});
});
!
});
apps / blog / app.js

App.module("BlogApp.Posts", function (Posts, App, Bk, Mr, $, _) {
!
Posts.Controller = {
Show: function () {
!
var layout = new Posts.View({
collection: new App.Entities.Posts
});
!
App.mainRegion.show(layout);
}
};
!
});
apps / blog / posts / controller.js

App.module("BlogApp.Posts", function (Posts, App, Backbone, M, $, _) {
!
Posts.View = Backbone.Marionette.View.extend({
tagName: "section",
className: "posts"
});
!
});
apps / blog / posts / view.js

Here comes the magic!
Let’s have a look at Marionette Views

Marionette.ItemView
Renders a single item
(Backbone.Model)
Backbone.Model
ItemView

Marionette.CollectionView
Renders the items of a Backbone.Collection
Doesn’t need a template
CollectionView
ItemView Backbone.Model
Backbone.Collection
ItemView Backbone.Model

Marionette.CompositeView
Renders the items of a Backbone.Collection
within a wrapper
Extends from Marionette.CollectionView
!
Also: Represents both a branch and a tree structure
Therefore: can also render a model if needed

CollectionView
ItemView
Backbone.Model
Backbone.Collection
ItemView
Backbone.Model
ItemView
Backbone.Model
CompositeView
Template 
+ Backbone.Collection
+ optional Backbone.Model
Backbone.Model
ItemView
.some-selector
Backbone.Model
ItemView

Before going further, choose your
template engine

Underscore templates works out of the box
<script type="template" id="post-template">
<h2>
<%- title %>
</h2>
</script>

you can also override Marionette Renderer:
Backbone.Marionette.Renderer.render = function (template, data) {
!
tpl = _.template($( "script.wtf-is-this-" + template ).html());
if (!tpl) throw("Template " + template + " not found!");
!
return tpl(data);
!
};
<script type="text/template" class="wtf-is-this-post-template">
<h2>
<%- title %>
</h2>
</script>
config/marionette/renderer.js

Using Rails? Go with Jade + JST
gem 'tilt-jade'
Compiles jade templates into js functions
for use as clientside templates

Jade is just amazing
.post-content
header(class='ng-wtf')
h1= title
span by #{author}
!
if youAreUsingJade
p You are amazing
!
.body= description

Backbone.Marionette.Renderer.render = (tpl, data) ->
path = JST["apps/" + tpl]
throw "Template #{tpl} not found!" unless path
path data
CoﬀeeScript...

back to our app
let's implement these views

App.module("BlogApp.Posts", function (Posts, App, Bk, Mr, $, _) {
!
Posts.PostView = Backbone.Marionette.ItemView.extend({
tagName: "article",
className: "post",
template: “#post-template"
});
!
Posts.View = Backbone.Marionette.CollectionView.extend({
tagName: "section",
className: "posts",
itemView: Posts.PostView,
!
initialize: function (options) {
options.collection.fetch();
}
});
!
});
apps / blog / posts/ view.js

let’s make it better
<script type="text/template" id="post-template">
<a href="#"><%- title %></a>
</script>
!
!
<script type="text/template" id="posts-template">
<h1>My nice blog</h1>
<ul></ul>
</script>

Posts.View = Backbone.Marionette.CompositeView.extend({
tagName: "section",
className: "posts",
template: “#posts-template",
itemView: Posts.PostView,
itemViewContainer: "ul",
!
initialize: function (options) {
options.collection.fetch();
}
});
just a few changes to the CollectionView

tagName: "li",
className: "post",
template: “#post-template",
events: {
"click a" : "showSinglePost"
},
showSinglePost: function (event) {
event.preventDefault();
Backbone.history.navigate("posts/" + this.model.get('id'));
}
});
and some more to the ItemView

Serializing the data
Marionette calls model.toJSON() by default
...
!
// overrides the default behaviour
serializeData: function () {
return _.extend(this.model.toJSON(), {
"foo" : "bar"
});
}
});
can be overridden by deﬁning serializeData()

Template helpers
<script id="my-template" type="template">
I think that <%= showMessage() %>
</script>
...
!
templateHelpers: {
showMessage: function () {
return this.title + " rocks!";
}
},
!
...
});

Modal/Collection events
Backbone.Marionette.CompositeView.extend({
!
modelEvents: {
// eq to view.listenTo(view.model, "change:name", view.nameChanged, view)
"change:name": "nameChanged"
},
!
collectionEvents: {
// eq to view.listenTo(view.collection, "add", view.itemAdded, view)
"add": "itemAdded"
},
!
// ... event handler methods
nameChanged: function () { /* ... */ },
itemAdded: function () { /* ... */ }
!
});

App global requests
// define your request
App.reqres.setHandler("show:post", function (id) {
Backbone.history.navigate("posts/" + id, true);
});
AKA let your modules talk with each other
// use it
App.request("show:post", 3);

Marionette in the real world
— 5 minutes of Marionette applied to Cronycle —

header-region with ItemView (User, Backbone.Model)
main-region with CollectionView
(Backbone.Collection)
CompositeView (Model +
Collection)
ItemView (Model)
ItemView (Model)

left-sidebar-region
with CompositeView

Modal windows, just an overlay region

Modal region
App.module("Modals", function (Modals, App, Backbone, Marionette, $, _) {
!
Modals.Region = Marionette.Region["extends"]({
el: "#modal-region",
open: function(view) {
$.magnificPopup.open(view);
},
close: function() {
$.magnificPopup.instance.close();
}
});
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
!
});
Modals.start = function () {
App.addRegions({modalRegion: Modals.Region});
};
App.reqres.setHandler("alert", function (title) {
view = new MyModalWindow({
title: title
});
return App.modalRegion.show(view);
});
// This is how you use it
App.request("alert", "Roflcopter!");

1. deﬁne a comparator on your collection
Fetching for new articles
var Entities.Posts = Backbone.Collection.extends({
model: Entities.Post,
url: "/posts",
!
comparator: function (model) {
return -parseInt(model.get('published_at'), 10);
}
});

2. deﬁne a custom fetch method
var Entities.Posts = Backbone.Collection.extends({
!
fetchNewPosts: function (callback) {
this.fetch({
url: "posts/?min_ts=#{@first().get('published_at')}",
update: true,
add: true,
remove: false
}
!
});

3. override the appendHtml method on your CompositeView
var YourItemView = Backbone.Marionette.CompositeView.extends({
!
ui: {
linksContainer: ".posts-container"
},
!
appendHtml: function (collectionView, itemView, index) {
if (index == 0){
this.ui.linksContainer.prepend(itemView.$el);
} else {
childAtIndex = this.ui.linksContainer.find("> article:eq(" + index + ")");
!
if (childAtIndex.length) {
childAtIndex.before(itemView.$el);
} else {
this.ui.linksContainer.append(itemView.$el);
}
}
}
!
});

put a test on it
https://github.com/bradphelan/jasminerice
+ jasmine-rice for Rails users
If you like your goat...

describe("Navigating to the posts route", function () {
!
it("should display some articles", function () {
!
Backbone.history.navigate("/posts", true);
!
expect(App.mainRegion.$el.find('article.post').length).toBeGreaterThan(0);
!
expect(App.mainRegion.currentView.collection.at(0).get('title')).toBe('foo');
!
});
});

github.com/squallstar/jsday2014-marionettejs
The project we just created:
(the dummy blog, not cronycle!)
Nicholas Valbusa
@squallstar - squallstar.it
THANKS! Q/A?
https://joind.in/11286

Make your Backbone Application dance

More Related Content

What's hot (18)

Viewers also liked (20)

Similar to Make your Backbone Application dance (20)

Recently uploaded (20)

Make your Backbone Application dance