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
14. Keeping track of the checkbox count

Episodes

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

Transcript

00:00
Let's go ahead and add a counter to show how many checkboxes have been checked. And of course, we want this value to stay up to date when other people check checkboxes as well.
00:10
OK, so let's go ahead and really quickly add this in and then we'll talk about some of the limitations based on what we're doing. So I'm just going to create out a div here and say flex with item center and justify between.
00:24
We're going to have our count just here. And then over the other side, we'll have our go to box when we build it. Let's go and just set a margin bottom here of six. And yeah, I think that's OK.
00:37
So remember a little bit earlier within our props, we passed the count down from our home controller based on our checkboxes class. This contains with that Redis command how many items are actually checked. So we can just very easily pull this value directly into here.
00:57
Let's go ahead and grab that count. And as you can see, we've got 34 checked. If I check one and refresh the page, it ends up at 35. So this is working nicely.
01:06
But of course, we want this to react in real time. Now, the only problem that we've got is ideally we would take these items here. We would count how many were checked and we would use that to output the value. But we know we're not using a ref, so we can't base this on any kind of reactivity.
01:23
Instead, what we can do is create out a ref which contains that count from our props, and we can update this whenever the state changes, so not the ideal solution, but it will always stay up to date. So let's go ahead and create our account
01:39
variable in here, make this a ref and grab that from our props. This will go ahead and override what we've got here. But now when we check something and update that value, it's going to react. So where do we update this count?
01:53
Well, we want to do it when an item state changes. So effectively, we want to either increment or decrement this based on the value of checked. So let's go ahead and say count value.
02:06
And we're going to add onto this based on whether we have a checked value or not. If we have checked a box and our state changes and we checked it, we're going to add one. Otherwise, we're going to add minus one,
02:17
which is effectively the same as subtracting one. So now when we go over and we check one, you can see that this keeps up to date. Now, because we're using that same method within our real time listener for when we whisper, this is now going to keep
02:34
everything up to date for us. And of course, when we refresh, we get exactly the same thing. So not great, because ideally we'd count on the ref of things, but in this case, it works really nicely.
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!