One of the things almost any web application in the world has to implement is a way to display notifications.

Global notifications allow to users to know what is happening while they’re using an application, which is particularly helpful after performing an action (did the action end successfully or did something go wrong?)

So, as the notifications will be used globally across the whole application, it seems to be a good idea to have an isolated piece of code handling them, which will be used later by any part of the code that needs to display a notification.

Here at Ebury, we love developing web applications using Marionette (a Backbone framework) and we really like the re-usability. So we coded a Marionette solution to display global notifications, with re-usability in mind, and we would like to share it with you.

The solution

Notification model

Our solution is based on a collection of models (as we can have more than one notification), so the first thing we have to do is define the notification model. It will contain only two attributes: the message to be displayed in the notification and what kind of notification it is (ie error, warning, success, …).

var Notification = Backbone.Model.extend({
  defaults: {
    type: null,
    message: null
  }
});

Once we have the model, defining the collection is very easy.

var Notifications = Backbone.Collection.extend({
  model: Notification
});

Before creating the view that will render the collection, we are going to create the template used for rendering a single notification.

Single notification template

We love using Bootstrap here too, so we will use their alert component. They have four contextual classes for modifying the style of the alert, so we can use the attribute type of our notification model to set that class.

<script type="text/template" class="js-notification-template">
  <div class="alert alert-<%= type %> alert-dismissible">
    <button type="button" class="close" data-dismiss="alert">&times;</button>
    <%= message %>
  </div>
</script>

Now, we can define the view that will render a single notification.

var NotificationView = Backbone.Marionette.ItemView.extend({
  template: '.js-notification-template'
});

It’s very simple, as you can see, so let’s add a bit more functionality.

Further development

What if we want to make the notification automatically disappear after 10 seconds? And we cannot forget we have to destroy the model when the user clicks the close button.

var NotificationView = Backbone.Marionette.ItemView.extend({
  template: '.js-notification-template',
  ui: {
    close: '[data-dismiss]'
  },

  events: {
    'click @ui.close': 'close'
  },

  onShow: function () {
    var _this = this;
    // Auto-removes the notification after 10s
    this.timeId = setTimeout(function () {
      _this.close();
    }, 10000);
  },

 close: function () {
    clearTimeout(this.timeId);
    this.model.destroy();
  }
});

Rendering the collection

Ok, so now we have the view for a notification, it’s time to create the view that will render the collection of notifications.

var NotificationsView = Backbone.Marionette.CollectionView.extend({
  childView: NotificationView
});

We’re almost done! Let’s create the container where the notifications will be added.

<div class="js-notifications"></div>

And finally we can instantiate a notifications view in our application.

var App = Backbone.Marionette.Application.extend({
  initialize: function () {
    this.notifications = new NotificationsView({
      el: '.js-notifications',
      collection: new Notifications()
    });
    this.notifications.render();
  }
});

var app = new App();
app.start();

And that’s all!

Now, we have our Marionette application ready to display a notification every time we need it.

app.notifications.collection.add({type: 'success', message: 'Well done! You successfully read this important alert message.'});

app.notifications.collection.add({type: 'info', message: 'Heads up! This alert needs your attention, but it's not super important.'});

app.notifications.collection.add({type: 'warning', message: 'Warning! Better check yourself, you're not looking too good.'});

app.notifications.collection.add({type: 'danger', message: 'Oh snap! Change a few things up and try submitting again.'});

If you’re looking for a simpler solution, bear in mind we’re working on our own plugin for this. Once ready, you’ll just load it and you’ll have a notifications view in your application. You only need to worry about creating new notifications!

Watch this space for the announcement of our plugin’s publication!