One Million Checkboxes with Laravel
Playing
01. Introduction and demo

Episodes

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

Transcript

00:00
Today we're going to work on a fun but challenging clone of a project 1 million checkboxes.
00:05
If you're not already aware of this, the concept is that we have 1 million checkboxes rendered out on the page and these are kept up to date. The state of these is kept up to date through all connected clients using Realtime. Let's go ahead and look at a demo of how this works and then we will talk about the huge amount of challenges that come with building something like this with this
00:26
amount of data. Okay so the concept is really simple. Anyone can connect to this site and when you check a checkbox this goes ahead and updates state for everyone who is currently connected. So we can just check as many of these as we want and everything is kept up to date. Now the challenges with this project are first of all on the client side. We need to somehow render out 1 million
00:49
items and there are genuinely 1 million checkboxes on this page without crashing a browser. So with that we can't physically render out in one go 1 million checkboxes or the browser would run out of memory and we would have issues. What we're going to do is use a conditional scroller which means we will only render out what is currently being scrolled to. So although it looks like these are
01:13
all rendered out on the page they are technically being rendered as we scroll and they are being gotten rid of as we don't see them anymore. So that's the first thing that we need to focus on. The next issue that we have is if we had say thousands of clients connected to this we can't be sending network requests down to our back end to broadcast this data. We would receive way too
01:37
many events at the back end and this would just really quickly slow down and it would mean that the client wouldn't be kept up to date because we would have delays. Of course we could queue these events to then dispatch and update the state on the client side but then everything would become out of sync. So what we're going to do is use client to client broadcasting and we're going to
01:57
use bi-directional web socket functionality to listen in for any client events and then mark these on the back end as checked and then of course that state will come back to the front end to then give us the fresh state. Now speaking about storing this data in the back end how are we going to do this? Well using a database is going to be pretty slow. We're going to have to update each of these
02:23
1 million records and then when we retrieve this state it's going to be slow as well. So we're going to use bit arrays within redis to handle this and we're also going to be using bit arrays on the client side as well. We'll talk about those when we get to them in the course. There are a load of other issues here like how do we store the state in the client side of everything that is being
02:45
checked. Within Vue we can't really use a ref or a reactive object for this because storing 1 million items within there is once again going to crash the client side. So there's a huge amount to learn here even though this is a fun project you can take this away and apply any of the concepts in this course to something else where you're handling a huge amount of data. Probably
03:09
not always 1 million check boxes but it should help you out. Okay so I'm just going to give the page a final refresh and as you can see it's incredibly quick to load this state in. Let's go through the course and see how we can build something like this out without crashing our server or the client.

Episode summary

In this introductory episode, we kick things off by talking about the challenge we're about to tackle: building a clone of the classic 1 Million Checkboxes project! If you haven't seen it before, the idea is simple but wild—there are literally one million checkboxes on a page, and they're all synced in real time across every user connected. That means if you check a box, everyone else sees it straight away.

We start by showing a quick demo of what the finished thing looks like and pointing out the crazy technical problems we have to solve. First up: we can't actually just try to slap one million checkboxes in the DOM, or the browser would melt. So we look at how to "cheat" a bit by only rendering the checkboxes in view as you scroll, using a conditional scroller technique.

Beyond the frontend, we hit the problem of networking: if we've got thousands of clients all tapping checkboxes, we don't want our backend swamped with tiny updates. Instead, we discuss using things like client-to-client broadcasting and bi-directional websockets to keep everyone in sync without overwhelming servers. Storing one million checkboxes efficiently isn't easy either, so we'll look into using bit arrays in Redis for the backend, and even on the client, to avoid memory disasters.

There are lots of little details to figure out—like how to represent that many values in Vue efficiently, how to handle syncing state blazingly fast, and how to architect everything so it's both fun and a learning opportunity for tackling real-world "big data in the browser" problems. Whether you'll ever need a million checkboxes again or not, the ideas you'll pick up apply to tons of other huge-data situations!

So, in this episode, we're setting the stage, seeing some of the moving parts, and getting ready to dive in. Let's go!

Episode discussion

No comments, yet. Be the first!