Behind the Extension — Mobalytics: a new Extension for League streamers

Mobalytics has developed an exciting new Extension for League of Legends streamers. Today, they’re sharing how they transformed their idea into the Mobalytics Extension, their future plans, and pro tips for other Twitch Developers looking to build their own Extension.

Fun fact: Mobalytics formed at the very first TwitchCon in 2015 when our founders met and started talking non-stop about analytics in competitive gaming. Since then, we’ve formed a team of scientists and former pro gamers to create an analytics platform for League of Legends players who want to up their game. The core of Mobalytics is the Gamer Performance Index (GPI), which evaluates a player’s capabilities. The GPI uses machine-learning to help Summoners understand their strengths and weaknesses and provides a suite of tools to aid them every step of the way during their ranked climbs. We’re currently in the midst of our Open Beta testing with over 500,000 users participating and pushing the limits of their personal performance.

Enhancing the Connection Between Streamer and Viewer

As soon as Twitch debuted Extensions, we became incredibly excited with the possibilities, and it was a no brainer for us to create one of our own. Our whole team watches LoL streamers daily, from Nightblue3 and Super Metroidlol to Pokimane and yes, even Tyler1. We’re there through the PogChamps and FeelsBadMans and just as much fans as the next League player.

While watching, we realized that streamers are often asked questions like, “What runes are you using?”, “What items should I build?”, and, “What rank are you currently?” Questions that, if the streamer isn’t able to answer, the viewer must leave to another site in order to find out. This is where the Mobalytics Extension comes in.

Our Extension improves the experience of both the streamer and viewer by making the exchange of information and analysis easier and more fun! The viewers have seamless access to insights for every player in the streamer’s match in the form of awesome illustrative graphs and breakdowns.

Streamers can focus on answering more situational, complex questions while we answer these common questions for them. In the long run, this will save time and energy and give streamers more flexibility in guiding conversations with their audience.

It will also help preserve the gaze and attention of their viewers since they will no longer have to leave the stream to look at another to find what they’re looking for on another site. Lastly, the overall design stresses simplicity that makes the content easy to understand and unobtrusive so it doesn’t block the action.

What’s Inside

The Mobalytics Extension focuses on presenting information in three core ways:

1. Summoner analysis

Many LoL viewers watch their favorite streamer because they aspire to be like them. This feature makes it easier to emulate their play. The Summoner analysis reveals the win rate, runes, previous build and skill order, and a play style analysis of the individual streamer. Here, the viewers can also view details about the champion the streamer is playing such as stats and how their abilities work.

2. Matchup analysis

Part of the fun of watching a LoL stream is seeing how your favorite streamer compares against their enemy counterpart. Are they against a very aggressive player? Are they the underdog? Should they dominate? The Matchup analysis helps viewers understand these implications.

3. Team analysis

Finally, our Team analysis goes beyond a streamers 1-on-1 and shows viewers how the full 5-on-5 of a game is stacking up, showing similar information as your Matchup Analysis.

Want to see our Extension in action? You can find streamers who are using it now, here.

How We Built the Extension

As soon as we finalized the idea and design, we started the development process. First, we audited the available developers documentation and the dev blog so we could have a better idea about the Twitch infrastructure and features which are available for the developers. We used this to build the application workflow and start the actual development.

We only needed to design two workflows in order for this Extension to work but this doesn’t count that our platform already has the functionality which collects and process the League of Legends data.

1. Streamer config save and get procedures.

2. Get live match data procedure.

As you can imagine, the Extension needed to deal with streamers and viewers so we developed different user interfaces to satisfy these needs.

Streamer Config Save and Get Procedures

The streamer part was relatively simple since we only ask for the summoner’s name and region. As soon as the streamer submits the setup form, the frontend initiates a “config set” procedure which basically stores/updates a streamer’s profile and Twitch ID in Mobalytics database for cases when the Summoner check tests passed, otherwise, the error returned. Yes, people can make mistakes!

The “streamer get” procedure is used to return the stored information from our database based on Twitch ID if any exists. Additionally, the main Extension microservice subscribes to the webhooks provided by Twitch in order to track when the streams with Extension go up and down. This allows us to optimize the workflow as the Extension stops tracking the streamer when he/she goes offline.

Get Live Match Data Procedure

This is the core procedure for the viewer’s side of the Extension. Whenever a viewer opens the channel with the activated Mobalytics Extension, the browser loads the set of viewers assets (HTML/CSS/Javascripts).

The viewer client sends the request “get live match data” with the supplementary Twitch metadata like channel ID, client ID. This request delivered to the main microservice via Mobalytics API GW. Next, the API GW validates the request and forwards it to the main Extension microservice.

The main purpose of the API GW is to act as a single point of entrance for external requests from Mobalytics clients. The API GW provides functionality such as request routing and API composer, multiple transport support (HTTP, gRPC, etc), request authorization and validity check.

The main Extension microservice acts as the orchestrator which communicates with the Mobalytics backend services in order to get the content and returns the response over the Twitch PubSub system which opens a websocket connection with the client. For this purpose, the main service identifies the streamer’s account ID in League of Legends based on the metadata received with the request. Then, the account ID is used to find the live game data by querying Riot APIs.

The information received from Riot is used by the Mobalytics backend to identify player roles, calculate the GPI, find the last item build on current champions, etc. The process of data collection and processing takes time. Meanwhile, the main microservice sends status update messages to the client via the Twitch API and PubSub system. Currently, the Mobalytics Extension supports a few different system messages which are self explanatory: “Loading game info…”, “Loaded”, “No active game found”, “Game is over”, “Streamer did not setup the Extension”, etc. As you can see these messages support different possible scenarios, provides transparency on the Extension workflow, and assures positive viewers experience.

Our Future Plans and a Word for Potential Extension Devs

The Mobalytics Extension has only very recently been released, but our team is just getting started and can’t wait to keep upgrading it. LoL streamers that have been using it thus far have been great in giving us feedback and criticism. For the overwhelming majority, the Extension has brought a positive response from their viewers.

Ultimately, we want to make this the de facto League Extension for streamers, especially those who care about educating their viewers. For anyone watching, whether they’re a newbie, a stat head, or even a parent watching her kid play, we want to provide value in helping them understand what’s going on. Eventually, we plan on adding more features to tinker and interact with the game players are watching, but we want to preserve that core experience of discovery while watching a streamer that makes Twitch so special.

To developers out there that are considering building an Extension — do it. This is a brand new dimension for the Twitch realm that is ready for discovery; it only needs explorers to lead the way. Our team had a ton of fun conceptualizing, building, and releasing the Extension. We learned a lesson or two (or three), along the way and the Twitch team was incredibly helpful throughout the process. So what do you have to lose? If you have an idea to contribute to this awesome space, give it life!