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:
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).
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
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.
If you are interested in more about reading source code, here are some resources:
- 10 Things I Learned From the jQuery Source by Paul Irish - Great tutorial on neat things from jQuery but also gets you reading someone else's code
- Lots of practice
Additionally, there are tools that can make your life easier:
- esformatter-phonetic - Esformatter plugin with same purpose as beautify-with-words
- esformatter-rename - Esformatter plugin that renames variables via a mapping