Todd Wolfson

Software Engineer

July 31, 2015

Slack's browser source code is transparent and easy to comprehend, making it super hackable.

Guess what the following snippet does:

// Taken from http://viewsource.in/https://slack.global.ssl.fastly.net/31971/js/rollup-client_1420067921.js#L6413-6419
TS.channels.unread_changed_sig.add(TS.ui.growls.updateTotalUnreadDisplays,TS.ui.growls);
TS.channels.unread_highlight_changed_sig.add(TS.ui.growls.updateTotalUnreadDisplays,TS.ui.growls);
TS.groups.unread_changed_sig.add(TS.ui.growls.updateTotalUnreadDisplays,TS.ui.growls);
TS.groups.unread_highlight_changed_sig.add(TS.ui.growls.updateTotalUnreadDisplays,TS.ui.growls);
TS.ims.unread_changed_sig.add(TS.ui.growls.updateTotalUnreadDisplays,TS.ui.growls);
TS.ims.unread_highlight_changed_sig.add(TS.ui.growls.updateTotalUnreadDisplays,TS.ui.growls);
TS.client.login_sig.add(TS.ui.growls.updateTotalUnreadDisplays,TS.ui.growls);

Scroll down to see answer...

If you guessed Publish/subscribe pattern, EventEmitter, or Observer pattern, then you are correct! These are communication channels to inform other parts of the application when a notification update occurs (e.g. new message received).

Want to read more? Take a glance here:

http://viewsource.in/https://slack.global.ssl.fastly.net/31971/js/rollup-client_1420067921.js

Explanation

I started using plaidchat since Slack currently has no GNU/Linux Slack client. Not too far into using it, I wanted to add notification support and so began the dive into Slack's source code. When I started reading the code, I was surprised at how easy it was to read and integrate with, which is atypical from my experience (I used to do this professionally).

What else do you use from Slack?

Currently, we integrate with Slack's notification system, "Switch team" links, "Quick switcher", and team data.

https://github.com/plaidchat/plaidchat/blob/v2.11.0/app/components/slack-window.js

During a recent dive, we discovered window.TSSSB which is the actual bridge where Slack does its connections for its Windows and OS X clients. Since it's a lot cleaner to perform this integration, we might transition off of these hacks to our own window.TSSSB definitions.

https://github.com/plaidchat/plaidchat/issues/121

Reading source code intimidates me

Don't feel intimidated. Most of the time, the source code of websites is awful to read; minified, obfuscated, and with horrible control structures.

As with most things, this takes time and practice. I have been reading source code since I got my hands on Firefox 3.0 and got very well practiced in my time at Ensighten.

For example: try visiting a JavaScript heavy ecommerce site, looking at the source code, and finding existing JavaScript hooks exist to track an "Add to cart" click (typical use case for analytics).

Further reading/tools

If you are interested in more about reading source code, here are some resources:

Additionally, there are tools that can make your life easier:

Top articles

Develop faster

Removing the tedium from creating, developing, and publishing repos.

Sexy bash prompt

A bash prompt with colors, git statuses, and git branches.

Recent articles

Parallel visual testing

Comparison of parallelization techniques for visual testing