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
12. A quick reactivity fix

Episodes

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

Transcript

00:00
So everything is working nicely now, both in terms of real time. And then when we refresh each of these pages,
00:06
we get that initial state back from Redis and hydrate it. Let's quickly fix up a reactivity issue here, where when we scroll down and click on an item, we're bumped right to the top of the page.
00:19
This is a pretty simple fix. Now, remember when we had our render key over here on our overall scroller? What's happening is when this render key changes, the scroller by default is going to be at the very top.
00:32
So it's just going to scroll back to the top. What we can do, and again, not ideal, because this whole solution isn't the most ideal, is we can apply this to either the input
00:42
or the div within here instead to react to changes. That's pretty much all we need to do. So let's give both of these pages a refresh, come down and check this and you can see it works.
00:52
Let's go all the way down to the one million item on both of these. And let's just check one of these. We have different browser sizes here, so some of these are going to get cut off.
01:02
Let's go over and maybe let's check one of these over here. And there we go. Yeah, so everything is nicely working. And despite this being so far down in the list,
01:12
everything is nicely reacting. So really, really simple fix. Let's go over to the next episode and look at making this responsive, because at the moment it's just cutting off here.
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!