One Million Checkboxes with Laravel
This episode is for members only

Sign up to access "One Million Checkboxes with Laravel" right now.

Get started
Already a member? Sign in to continue
Playing
08. How Redis bitmaps work

Episodes

0%
Your progress
  • Total: 1h 17m
  • Played: 0m
  • Remaining: 1h 17m
Join or sign in to track your progress

Transcript

00:00
We need a way to store 1 million pieces of data and whether they are on or off. So we have 1 million checkboxes and the only state they can have is,
00:09
are they checked or are they not checked? For this, Redist Bitmaps is a really good option. What this allows us to do is take 1 million pieces of data and very conveniently toggle them on or off, regardless of which one we're dealing with.
00:25
So if it's checkbox 1, we can just toggle it really quickly. If it's checkbox 1 million, we can do exactly the same. So let's just have a quick read of this, and then we'll go ahead and look at an example of doing this
00:37
within the Redist command line interface, so we can kind of get a little bit more used to how this is going to work. And then we'll dive more into this within our code a little bit later. So bitmaps are not an actual data type,
00:49
but a set of bit oriented operations defined on the string type, which is treated like a bit vector. So a bit vector in basic terms is a compact representation of data that can just have two different values.
01:04
So feel free to go ahead and have a read of this, but let's dive straight over to the command line and see what this looks like. So we're inside of Redist CLI. If you're not already inside of there and you don't have Redist installed,
01:17
go ahead and do that and just run Redist CLI to get this up and running. So we're going to use two main commands. We are going to use set bit and just get to grab the string representation of this bit vector.
01:32
We also have get bit as well, which we will look at, but we're not going to use that within our code for a really good reason. OK, let's go ahead and look at doing this. If you already have data in Redist, you can go ahead and flush everything out
01:44
so you can start fresh and let's set some bits. So we have the set bit command, which will take an overall key. We're just going to call that state. You can call that whatever you want and we have an offset and a value.
01:57
So let's say we're dealing with checkbox one. That offset is going to be zero because we're working with a zero index here. The value is either going to be zero or one, depending on whether it is checked or not. So let's say that we wanted checkbox one to be checked.
02:13
And let's go ahead and set checkbox two, which will have a index of one to not be checked. And let's do the same thing for checkbox three as well. And we say we want that to be checked. So now what we're doing is very quickly modifying this state.
02:29
And we can even go all the way up to 999999 and set that as checked if we want to. What we can then do is either use get bit, which we won't be using, and we'll see why that is a little bit later, to grab from our state any of the keys. So let's say 500,000.
02:47
Of course, we get zero because we've not set this. But if we were to try and see a checkbox at 1,000,000, or in this case, because it's zero indexed, 999999 is checked, we would get one back. So this is an incredibly quick and easy way to just set within a huge bit vector
03:06
of which of these is checked. Now, when it comes to implementing this in our code, what we're not going to do is use get bit. The reason for this is we would have to iterate a million times and then build up another data structure within our code
03:22
to represent which ones were checked and which weren't. And then we would have to pass that through to the front end. That's not really what we want to do. Instead, what we want to do is just use the standard get command within Redis
03:35
to grab the state out. And this is going to give us this representation, this string representation of all of the checkboxes that are checked or not. Now, we're not going to touch on this just yet,
03:46
because a little bit later within PHP code, we'll be iterating, breaking this up, and then returning a binary representation of whether each checkbox is checked. Then we'll go ahead and use bit arrays within JavaScript
04:01
to very quickly and efficiently work out which checkboxes are checked and which are not. You can already start to see this working. So all of these here will be sort of near to a million. And then as you can see, the last representation here is one.
04:16
So we can see that that is checked. So this is a really quick and easy way to store this data within Redis. Now that we've understood this, let's actually go over to hook this up within Laravel. So when we receive one of them events, then bidirectional events,
04:31
we actually put this data into Redis. Just before we do this, I'm going to go into Redis and just do flush all, just so we don't have any of that data hanging around. Let's go ahead and get this set within our code.
16 episodes•1 hr 17 mins

Overview

How do you render one million checkboxes in a browser and keep them synced in realtime?

Well, using a combination of virtual scroll rendering, Redis bitmaps and bi-directional WebSocket communication.

Let’s cover each of these concepts to build up this fun project — you’ll be surprised at how useful these techniques are for your own applications.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Episode discussion

No comments, yet. Be the first!