A Better Way to Handle Event-Driven JavaScript Architecture

Editor's Note: this information and much more will be covered in an upcoming March 6th Developers Hangout (more details). There is also a version of this article in Russian. Event-driven design is a powerful and flexible approach for developing JavaScript applications. This paradigm is gaining popularity and increasingly being featured in many frameworks. This popularity comes with a drawback: As the size of the application grows, The number of events, triggers, and subscriptions does too, rapidly becoming far harder to manage. Facing a similar problem on a recent project, we initially used the standard development tool - search. But over time the throw pillows on sale of events expectedly increased, and the search for events became a lot more complex, time-consuming, and tedious. Another substantial problem was managing unpaired triggers or subscriptions, which had a tendency to also reproduce. We found that development was slowing and the code was becoming uglier and harder to understand as more of these guys cropped up. Consider the following situation - you come to a new project that uses event-based architecture. How much time you will need to fully track all events and their chain of subscriptions? From our experience, this process consumes lots of time, so in order to simplify it, we sought to unify the search for all events into one interactive report. How Capo Simplifies Tracking of Event Triggers and Subscriptions Designed over the last two years, Capo attacks this problem directly. The module controls trigger – subscription links in event-driven architecture remove this basic uncertainty and improve the usability of the Mediator template. The tagline of the capo module is “All string are touched” which unites it with the guitar mediator referenced in the logo. Capo is not a method or approach, but rather a ready-to-go assistant implemented as an npm module and a plugin for Sublime Text. Capo performs a search across all the files in a specified folder, finds all publish-subscribe links and helps the user control and manage them. For convenience, it displays these results as an flexible HTML report. For a live display: http://msemenistyi.github.io/capo/ In the left side you can easily navigate through found events and observe the corresponding triggers and subscribers with file name, line and context specified. In the “Strange events” section, events that are either missing a trigger or subscriber are located. Capo may be used with mediator.js, Backbone.js, node.js EventEmitter or any other object that provides publish-subscribe interface. Additionally, reports can be sent to the printer or directly to console via capo-cli, and it's easy to add build steps in grunt via grunt-capo. The spy generator can assign dummy subscribers to unpaired events. It generates spy.js file in the capo folder:

function spyHandler(eventName, data){
    console.log(eventName + ' triggered');
}

mediator.on('player:initialize', spyHandler.bind(null, 'player:initialize'));
mediator.on('game-started', spyHandler.bind(null, 'game-started'));

This script contains subscriptions to all the triggers found in the project (filtered by event name if defined). spyHandler function serves as a handler for all the subscriptions. By default, the handler contains event name logging when triggered, but it may be changed to anything as preferable. To integrate these features within the development environment, we created a Sublime Text 3 plugin that will help to make life easier. After installing (Install Package – Capo) you can just use the default shortcut to run a search (Alt+D) and using the quick panel, select the needed file. The plugin will open a new window and select the line with found event. Our first goal while creating Capo was to make the development process easy for ourselves, as well as to help new guys on the project quickly understand application architecture. By helping to address the huge weakness of uncertain event triggers/subscribers, we hope that this will also help others in the same way as it helped us, and encourage the effective use of the mediator pattern. For everyone who found this article, we would like to invite you to an upcoming March 6 Hangout to talk about Capo and other ways to handle event driven JS architecture.