If you’ve seen Star Wars, then you can understand props and state.

Props and state are essential to writing readable React code. But they’re hard concepts to grasp, because they’re based around an entirely different paradigm than Angular or jQuery (if you have used either of those).

But don’t worry — I’m going to clear everything up with a Star Wars analogy.

That’s right. If you’ve seen the original Star Wars series, you can understand props and state.

Here’s a spoiler-free refresher of the basic premise of episodes 4–6:

1. Darth Vader hunts the rebels relentlessly, as they are the last resistance against the Galactic Empire.
2. The rebels, led by Princess Leia and Luke Skywalker, must fight back and exploit vulnerabilities within the Empire.
3. Darth Vader uses a variety of tactics to try and discover the movements of the rebels, including an army of Stormtroopers, a fleet of starships, and a variety of scouts.

The entire plan for the Empire’s resources depends upon Vader’s leadership.

If you are used to using jQuery, you may think about creating one event handler (like a click() handler), then explicitly changing different parts of the user interface line-by-line.

But in React, the idea is that when state is modified, the changes will automatically trickle down to all child components via props. So you only need to write the code to change one thing — the state — and watch as your UI updates.

This is similar to the way that Darth Vader commands the three wings of his army. Once word gets back to him of the rebel location, his resources will automatically mobilize to launch an attack.

Let’s get into it. This tutorial will require a basic knowledge of JSX, which you can learn more about here.

A Summary of The Galactic Empire

Here are the three wings of the Galactic Empire.

The Imperial Army is composed of Stormtroopers, AT-ATs, AT-STs and others.

The Imperial Navy is composed of star destroyers, TIE fighters and others.

Military Intelligence is composed of bounty hunters like Boba Fett, probe droids, and any other specialized scouts.

Here is a quick org chart that will give some direction on how we will write our components.

A reminder: Vader’s first goal is to find the location of the rebels. Those at the bottom of the org chart are the actual functional units that can accomplish this. If one of them finds a rebel base, their instructions would be to return to Vader so that he could execute his battle plans.

React is all about dynamic user interface. When a user completes a specific action, how does state change? In this case, Darth Vader would have a state called rebelLocation. Since that is the key dynamic variable, the three wings of the Empire would mobilize due to a change in the rebelLocation state.

Stormtrooper encounters rebel base → Return to Darth Vader with location

User clicks certain element → Update the state of some parent component

Here are the basics in code, which follows the org chart above:

State Explained

State allows you to dynamically change many elements at once based on one variable. State encompasses the key parts of your UI that change basic on user input.

With less things to keep track of in state, you will be able to write components with more clarity and fewer opportunities for bugs. When state changes, many components may change in accordance based on the one variable.

jQuery approaches this by asking you to write one line for every element that must be changed. It is not explicitly based on the parent-child relationship like state is.

Let’s say Stormtroopers encounter the rebels. Vader has ordered them to report to him as soon as possible. Once they return with a rebel location, Vader can carry out the rest of his orders, which were contingent on the rebel location. Here is a modified diagram that charts the path through the components listed above.

Orders are already passed down to every member at the bottom of the chart. Once they run into rebels, they know to return to Lord Vader. The rebelLocation state will then be updated with the planet, be it “Endor”, “Hoth”, or somewhere else.

This is the same concept as receiving user input then updating state in a parent component. Many React practitioners choose to write components with a singular function, so the component that actually listens for the user input will almost always be different than the component that holds state.

Above: Stormtrooper nested within ImperialArmy nested within vadersEmpire

In a real app: User input nested within parent div nested within parent div

What happens when state changes?

This is the beauty of React. Rather than writing complicated event handlers (like in jQuery), everything is contingent upon changes in state. You can clearly trace changes in the UI to these state changes.

In this case, once the rebelLocation is discovered, the state would change to that planet. But that is only half the story. Darth Vader would have plans in mind to mobilize different assets based on this state change. He can prepare them in advance for this possibility. As in, “When we find their planet, travel there immediately and prepare for an assault!”

Once state changes, the changes are automatically shared with all 3 wings of the Empire. Similarly, when the state of a parent component changes, the child components automatically inherit the new state.

Every component can also have its own state. For example, the ImperialArmy component might have a troopsCount state which counts the members of the army. We will not modify that in this example, but you can imagine that a battle might affect troopsCount.

Notice how this state does not depend on rebelLocation. If it did, we would not want to explicitly declare another state. We would want it to automatically update based on a change in rebelLocation state.

Since it is independent, here is what the code looks like:

Wait, so how does this state get communicated between the different components? That brings us to… props!

Props Explained

With our Darth Vader case, we actually need two sets of instructions when it comes to commanding the Stormtroopers and other units on the bottom of our chart.

Question 1: What should the Stormtroopers do if they encounter the rebels?

Answer: Report back to Darth Vader.

Question 2: Where should the Stormtroopers travel?

Answer: if the rebels have not been found, search the galaxy at random. Else, go to the rebel location to attack them.

Props allow us to continuously monitor the rebelLocation state, and order a troop movement if the state changes. rebelLocation is a string. But what about the orders that must happen when they initially find the rebels?

We can actually pass a function as props as well! That means that we can pass a callback down to each Stormtrooper that will execute if that trooper discovers the target. In the following picture, you can follow the path outlined by “Orders” to trace the props.

In a typical user interface, let’s say that a user clicks a button, and you want to update the state of a parent component. You must also pass a callback from that parent component that will be triggered on the user’s click. That callback can then update the state because it originated with the same parent that set the state.

This is important, so let’s explore this code line-by-line:

Line 8: We create the command for the Stormtroopers that they should return with the rebel location immediately when they find it.

Line 19: We pass the command to the entire army via the updateLocation props.

Line 32: The Imperial Army passes this command to every Stormtrooper with an identical updateLocation props.

Line 42: We create a discoverLocation function so we can pass the value of the input into the updateLocation() callback when it is triggered.

Line 53: When a Stormtrooper finds the location, it triggers the discoverLocation() function so we can return the location via updateLocation(). This updates the state in the vadersArmy parent component.

Other Notes: We passed the rebelLocation all the way down to each Stormtrooper as well. In this tutorial, we will not do anything with that information, but in the future, you can imagine that might be used to shift the location of all troopers towards the rebel base.

A Final Recap

1. Darth Vader gives every member of the Galactic Empire an order: If you find the rebels, report back to me immediately. In code, this is a function in the parent vadersArmy component that is then passed to every child via props.
2. The Army, Navy and Military Intel (three divisions of the Empire) pass this instruction to every single troop, again via props.
3. Each member of the Empire has the instructions. When they encounter the rebels, they will use a callback to pass the location all the way back up to Darth Vader, who will update the entire Empire with the news simultaneously and prepare for battle. This simulates a dynamic user input that changes the state of the parent component.

If you enjoyed this post, you may also enjoy my other explanations of challenging CSS and JavaScript topics, such as positioning, Model-View-Controller, and callbacks.

And if you think this might help other people in the same position as you, give it a “heart”!

In December, Slack announced a $80 million fund to invest in software projects that complement its technology. As an early adopter of the Slack API, here are some “bets” that I’ve made on the Slack platform:

A bot that plays all of Star Wars Despecialized Edition (Han shoots first!) one frame every ten seconds. It takes about 20 hours to get through the whole thing.

A bot that hosts games of The Resistance (optionally with the Assassin Module from the Hidden Agenda expansion). Secret voting is conducted via DM with the bot, while public actions are done in the channel.

A bot that lets you play Wolfenstein 3D by issuing commands (left, right, up, down, open, and fire). You can optionally specify how many degrees to turn left and right, but by default you turn 45-degrees. I’ve never successfully completed the first level, but I have managed to kill several guards.

I’m happy to announce that I’ve completed my latest bot, Vandelay Industries. Vandelay Industries is a shameless rip-off of Frinkiac that lets you search for animated gifs from every episode of Seinfeld in Slack. It has every line of dialogue ever spoken in Seinfeld.

If you’d like to try it out in your Slack team, just go to Vandelay Industries and click Add to Slack. It will ask you for permission to add a new slash command, /vandelay and once authorized, it should be ready to use immediately within Slack.

If you’re interested in the technical details of how it works, keep on reading! If not, you’ve managed to beat the estimated reading time for this article. Congratulations!

Processing

I initially started with 91G of all nine seasons of Seinfeld in surprisingly high quality 720p. I ultimately ended up with 111G worth of animated GIFs which tells you everything you need to know about the efficiency of that file format. This section is all about how I went from one to the other.

The files were in MKV containers, so I was able to use MKVToolNix to extract the subtitles from them. You can use mkvinfo to list the various segment tracks:

mkvinfo Seinfeld.S01E01.The.Seinfeld.Chronicles.mkv

It’s a little hard to read, but the track that we’re interested in is Track number 3, the first subtitles track. After noting the track ID (2), we can extract the subtitles into an SRT file like this:

mkvextract tracks Seinfeld.S01E01.The.Seinfeld.Chronicles.mkv 2:S01E01.srt

The SRT format is fairly straightforward. It contains a counter, start time, end time, and the subtitle text. Using a parser like subtitles-parser, we can easily iterate over the subtitles.

The next step is to loop through each subtitle and extract that time range from the MKV into an animated GIF. There’s an excellent article about using ffmpeg to encode high quality GIF but if you don’t want to read that right now, the trick is to extract a specialized palette from the section of the video that you’re interested in and then use that to encode the GIF.

Here’s a script that I adapted for the purposes of this processing step:

320 refers to how many pixels wide the resulting GIF will be. You’ll notice that instead of specifying a start time and an end time, I instead specify a duration. Although ffmpeg claims to support end times, no matter which version I tried I could not get it to properly extract the right range, so I ended up calculating the duration by subtracting the start time from the end time and abusing the unix epoch like this:

After applying the gifenc.sh script, we’re left with a nice animated GIF of the correct extracted range like this:

But I wanted to display the subtitle text at the bottom of the GIF and after digging through the ImageMagick documentation, I came up with this:

It’s not the most elegant solution, but it gets the job done. Our final gif looks like this:

Now just do that about 104,782 more times and you’re done. Running an entire episode through ffmpeg and ImageMagick took about 30 minutes on my top-of-the-line-in-2011 Macbook Pro. This is the part of the story where I’d like to tell you that I managed to leverage Amazon Elastic Transcoder or made a hadoop job to distribute the load to all the computers in my house, but really what I did was put all of this on my reconditioned budget OVH server and let it run for 5 days while I continued to live my life.

Once it was done encoding all the GIFs, I just let Apache serve them statically with a long Expires header and put Cloudflare in front of the whole domain. Only time will tell if that will actually hold up with traffic demands.

Searching

I installed Elasticsearch and indexed the contents of the SRT files. Here’s where I encountered some non-technical snags: In Season 6, episodes 14 and 15 are an hour-long clip show called Highlights of a Hundred where Jerry Seinfeld shows you a bunch of old clips from previous episodes. And in the final episode of Seinfeld, Season 9, Episode 23, they do a ton of flashbacks to previous episodes. Both of these would routinely get returned in the search results, so I just excluded them from the search query. There’s probably a better way to just lower the quality of those episode scores, but the documentation for doing so in Elasticsearch is about as easy to read as the above mentioned ImageMagick documentation. And at the end of the day, no one wants to see clips from either of those two episodes. Sorry, Larry David, the last episode was terrible.

Slash Command

The final step was just to wrap it all together with a Slack slash command, which is just a simple Express app that acts as a client to the Elasticsearch instance. There’s some OAuth to package the command as a Slack App and handle the Add to Slack button, but I don’t really need to check for authentication when the requests come through so I’m not saving the authorization tokens. The code for the server is available here: vandelayindustries-slack-server.

That’s it! I hope this technical writeup helps the next person that wants to extract GIFs from an entire television show for little to no actual reason.