Ember.js on the Twitch Directory

(What follows is a very tech-heavy post from one of our dear engineers, Yoh Suzuki. We love sharing their thoughts with you all because, while thick in jargon, it’s really the best way for you all to hear direct from the wizards crafting the site. The Twitch directory has received a facelift, yes, but it’s what’s under the surface that matters most. Here to tell you more about it is Yoh. — Jared)

Engineers at Twitch are always scheming about how to create the features and experiences we want to give you while writing forward-thinking, modular code underneath it all.

In the past week, you may have noticed some changes to the navigation column on the left. These are the beginnings of exciting personalizations of your presence on Twitch that we have in mind for you (we’ll go more into that another day).

What you probably didn’t notice is that the Twitch directory underwent a covert transformation of its inner workings, underneath its familiar surface. The Twitch directory was rewritten using a client-side application framework called Ember.js, an incredible piece of OSS.

Ember.js is all about creating complex, single-page applications for the web, where you can switch between different pages at near instantaneous speeds without waiting for distant servers to reply with the next page.

What does this mean for you?

Imagine switching from browsing Starcraft II: Heart of the Swarm channels to choosing and watching a particular channel, instantly. Imagine going back to the Twitch directory to see if one of your favorite broadcasters is streaming, while continuing to watch the current channel picture-in-picture.

This is the future we envision for you, and we’ve just laid the groundwork.

From a technical perspective, Ember apps like the Twitch Directory enjoy a clean separation of concerns, which keeps the code organized and maintainable even as the application’s complexity grows. This translates to speed, in both the implementation of features and iteration with your feedback.

Picking Ember out of a lineup of other frameworks with similar goals was a matter of finding the best fit for Twitch. Common reasons Ember is chosen (preference for string templates instead of DOM templates, performance concerns regarding dirty-checking as the strategy for detecting model changes) resonated in us as well. At Twitch, it was the cherry on top that our familiarity with Rails on the server made us feel at home with Ember on the client, and that template precompilation integrated itself seamlessly into the asset pipeline we were already using to package up client-side assets.

Beyond that, a big reason Ember made sense for Twitch was the community behind and around it. Many of the contributors to Ember are the same engineers using it to write complex single-page apps like ours, creating solutions to the problems we encounter in our line of work together. It’s great to look around and find ourselves in such good company.

Thanks for reading! We’ll be sure to keep you posted as we build new pages and fold existing pages into Ember in the coming weeks.