2015-08-14 @ 10:48

Build a Simple Channel-Based Publish/Subscribe Helper for Backbone

Backbone provides a handy Events module which can be mixed in to any object, giving the object the ability to bind and trigger custom named events. It is very useful if you wish to attach a callback function when for example a model attached to a view was changed:

var GreeterView = Backbone.View.extend({
  template: _.template('Hello <%= model.name %>!'),

  initialize: function () {
    this.model.on('change', this.render, this);

  render: function () {
    this.$el.html(this.template({ model: this.model.attributes }));
    return this;

var User = Backbone.Model.extend({});

var user = new User({ name: 'John Smith' });

var greeterView = new GreeterView({
  model: user


console.log(greeterView.$el.html()); //=> 'Hello John Smith!'

user.set('name', 'Johnny Smith');

console.log(greeterView.$el.html()); //=> 'Hello Johnny Smith!'

If you need two views to communicate without coupling them together, then it might get a bit trickier. I prefer channel-based publish subscribe communication for object which shouldn't necessary have to know each other. Let's imagine we have 2 views: ContentView and NavView and we would like to replace the content of the ContentView with some text when user clicks on link inside of a NavView template. ContentView does not know anything about NavView and it doesn't have a reference to it's instance to get the advantage of using events. We might create a parent view, which would work as a mediator between those two views, but things would get bit messy later on when application grows and many other views need to communicate with each other too. My preferred solution is (as I mentioned earlier) channel-based/topic-based publish subscribe pattern. You might want to use an external library like: Backbone.Radio, or Backbone.Wreqr, but both of them are in my opinion unnecessarily large and complex. Let me show you how you could implement your own channel-based publish subscribe "library" on few lines of code. suspect. Let's call it simply Vent.

// utils/vent.js

'use strict';

var Backbone = require('backbone');
var _ = require('backbone/node_modules/underscore');

var Channel = require('utils/channel');

var Vent = function () {
    this._channels = [];

_.extend(Vent.prototype, Backbone.Events, {
    channel: function (channelName) {
        var channel = _.find(this._channels, { name: channelName });

        return channel || (_.bind(function () {
            this._channels.push(new Channel(channelName));
            return this.channel(channelName);
        }, this)());

module.exports = new Vent();
// utils/channel.js

'use strict';

var Backbone = require('backbone');
var _ = require('backbone/node_modules/underscore');

var Channel = function (name) {
    this.name = name;

_.extend(Channel.prototype, Backbone.Events);

module.exports = Channel;

So your views can communicate simply like this:

var Backbone = require('backbone');
var vent = require('utils/vent');

var ContentView = Backbone.View.extend({
  initialize: function () {
    vent.channel('root').on('show:content', this.showContent, this);

  showContent: function (content) {
    // show the content ...

var NavView = Backbone.View.extend({
  events: {
    'click a': 'notifyContent'

  notifyContent: function () {
    vent.channel('root').trigger('show:content', 'The new awesome content');


If you build a Backbone application w/o using of Marionette or some other extending libraries and you need a simple way object can globally communicate with each other, you might implement you own channel-based publish subscribe thingy, before sticking to some "over-complicated" vendor library.

show more »

2015-07-14 @ 20:13

Bavarian Ipsum

Two days ago, I had seen the http://bavaria-ipsum.de/ website and it has somehow motivated me to create my own Bavarian Ipsum. So I wrote a very simple JavaScript library which basically generates random Bavarian text. You can find the source here. It was also nice possibility for me to try Browserify for the first time and I can only say one: "I absolutely love it!".

bavaria-ipsum works simply as that:

var ipsum = new BavariaIpsum();
// => 'Biaschlegl woar singan vasteh Gidarn auszutzeln Sodala auf\'d Wolpern pfenningguat jedza schnacksln Biazelt bravs auf\'n Wolpern hogg Obandeln. Graudwiggal wiavui Singan landla oans a Heimatland auszutzeln Mordsgaudi o\'ha uns Maibam Fünferl blärrd Heimatland großherzig Weibaleid A. Beidl In spotzerl aweng Bia Gwiass gfoids, g\'hupft Reiwadatschi meidromml de hinter\'m, Ohrwaschl Ewig Prosit Wia. Schoo um huift gibt\'s Mordsgaudi. Basd eam, fei Bua hoid, Schuabladdla Gams maibam schuf Bavariae Oim sauwedda lustiga, sauakraud Maibam greana legst Habedehre Bussal sepp. Schorsch Marterl In Weibaleid. Obandeln Auffisteign Wiesn etza heid wolln Diandldrahn nia greana. Anbandeln auffi. Kneedl eana weibaleid Gschmeidig Sei da samma glei Wea wolln naa leck, des. Bloß sauwedda Hetschapfah Watschnbaam wiavui, hoggd Sauwedda. Schmankal zua Maß nachad, enzian, In, Lem. Obacht nacha pfundig glacht gean Greaßt Bradwurschtsemmal Griasnoggalsubbm du, sauakraud Singan ausgähd Haferl Gar gar Bua Umma. Aasgem von wo Hoam In, woschechta Obazda no geh Kimmt Schuabladdla, Gipfe glei. Fias Sauakraud anbandeln. Basd Wea baamwach Foidweg sammawiedaguad griasd iabaroi Wuascht wann ausgähd moand vui gsuffa eich Semmlkneedl Do Ledahosn See. Blosmusi muas Damischa nei. Musi mechad Gaudi amoi fensdaln Wea d\' koa Berg charivari woass Oachkatzlschwoaf i ghupft.'


show more »

2015-05-03 @ 21:23

I should...

I should blog more often. Since I have left OrganisedMinds on 31st of July 2014, I didn't write any articles at all. I am no more full-stack web developer, but I've become pure front-end developer. I still love Ruby and I will for sure do some stuff using Ruby, but JavaScript is now my #1 language. I currently work on mid-size Angular project at Platts and simultaneously learning new stuff like React, Flux..

So many thing happened since I wrote my last article: I have increased the count of my children by 1, moved to Munich and changed my job. It is hard to find a little bit of free time after work, because having 2 children i real job and it is really hard too, but it is still one of the best thing ever happened to me. My daughter Johanna is now 2 years and 3 months and my son Jakub is now 5 months old. Nevertheless I will post more! I promise! heart

show more »


Jiri Chara
My name is Jiří Chára and I am an addicted JavaScript and Ruby developer. I was born in Plzeň the home of the Pilsner Beer. I currently live in Munich, Germany together with my wife, my daughter and my son. I currently work as a senior front-end developer at Platts McGraw Hill Financial.

see more »

Copyright © 2015 Jiří Chára. All Rights Reserved.