Reducing the dependencies of a Twitch Extension

Yes, I understand the title is a little dry and not very interesting; however, let’s focus on the task at hand.

Let’s remove as many dependencies on non-Twitch services as we can!

Me, yes, ME!

Some know who I am, but for those who don’t, let me run a quick introduction. I’m LuckyNoS7evin (Lucky Number Slevin) or Andy in real life. I’m a developer and have been since I was eight, professionally it’s been 14 years. I have worked primarily in the web development field and for the past two years have been streaming on Twitch while doing extra development.

So what do I know about Twitch Extensions? Well, that’s a long story which starts in September/October 2017 when Extensions were first released and runs through several TwitchDev associated streams, speaking at TwitchCon Developer Day 2018, judging the TwitchCon 2018 Extension Hackathon, and now guest writing for the TwitchDev blog. I have two live Extensions, there are two to three in the pipeline, and I have consulted on several other Twitch Extension projects.

Enough about me, let’s get on with why you’re here: learning how to remove as many of the dependencies on other services as you can when building a Twitch Extension.

The Request

In July 2018, I was asked if I wanted to take over the administration and development of the Top Clip Twitch Extension. At the time, I was busy and didn’t really need more projects, but ended up taking it on anyway. The original developer couldn’t spend the time he wanted on the Extension, as a child was incoming and a major bug in the EBS (what Twitch calls server side code or Extension Backend Service) was creating a memory leak. The idea was simple; investigate the issue in the EBS, get the Extension up and running, create new artwork, and then release to the world.

The Bug — A Memory Leak

The memory leak ended up being an issue in the way the video URL was being retrieved from Twitch. A Chromium instance was run using Puppeteer, the clip embed URL was loaded into memory and the video “src” attribute was then scraped from the final in-memory render of the page. This on a Twitch scale is impossible to do at a cost suitable for a free Extension, making it a non-viable option to keep running the Extension in this way. I managed to find a fix for this with an easier way to get the source video.

Initial Re-release

Once a solution was found to the memory leak, it was time to get everything up and running, which went smoothly and worked as expected. I could have at this point stopped…however, that’s not me.

Version 2.0

After the initial re-release, the Extension was being rendered around 100,000 times a day, and the EC2.micro instance was never spiking above the 10 percent mark. I soon realized that this would never change — and me being the guy who tries to find a bargain in everything — started to investigate a way of further reducing the cost. To nothing!

Around the same time as the re-release of Top Clip, the Configuration Service was released by Twitch. This gave me the ability to save settings that the broadcaster selects on a service Twitch provides and something Top Clip was handling itself.

A combination of storing the settings using the Twitch Configuration Service and calling the Twitch API from the viewer’s browser meant I could remove the dependency on my EC2.micro instance completely. I hear people shouting at their screen now, asking themselves how to call Twitch API locally from the users browser? The answer is simple: create a Twitch Application from the development dashboard and use that ClientId in your API calls from the client side. As only two API calls are made on load with no further calls after that point we are good to go.

So there we have it: an Extension re-written to have no dependency on external services not provided by Twitch!

What Now?

As of the 4th Jan 2019, Top Clip is completely independent of any external services that are not supplied by Twitch and the cost to the developer (me) is now — nothing.

A new feature was added during the redevelopment called “Broadcaster Choice” where, alongside the Top Clip, a broadcaster can now choose one of their own clips to be displayed. I have further changes in the pipeline with improvements, fixes, and adding more to the Extension. At every point, I’m going to be thinking, “Do I really need an EBS for this or can I do without?”

Final Word

Although I have told you the story of the evolution of the Top Clip Extension, I hope that you can take away from this that there are several factors that are important when developing a Twitch Extension.

The first and most important is Scale: make sure your Extension can handle thousands of renders a day/minute/second in random bursts.

Cost: don’t be caught out by how much running an Extension may cost. There are programs run by Twitch which allow you to apply for Amazon Web Services (AWS) credits. Think outside of your normal thought patterns. Where you think you need to add services, think hard about if that is completely necessary.

Finally, have fun creating what you want and what you think streamers and viewer want; you may fail in your first attempts, but something will click.

This is where you can find the Top Clip — Remastered Extension in its current form.

Ready to build interactive experiences on Twitch? Start now!