LiveView Course Update #6: Live Navigation

Hi Friends,

We write this newsletter with heavy hearts. We are conflicted about sending it.

The racism, injustice, and inequality that is soaked into the soil of our country is wrong. As followers of Jesus, it is entirely antithetical to what Mike and I believe. We believe Black Lives Matter.

To that end, we are thinking deeply about our role and how to do more (and better!) at standing in solidarity with those in the Black community, seeking justice and equality, holding ourselves and others accountable, and doing so with much humility.

The prayer of Desmond Tutu has been on our hearts this week:

Disturb us, O Lord
when we are too well-pleased with ourselves
when our dreams have come true because we dreamed too little,
because we sailed too close to the shore...
Stir us, O Lord
to dare more boldly, to venture into wider seas...

At the same time, we made a commitment to you to release new videos in our Phoenix LiveView course as we complete them. Thank you for sticking with us. So while LiveView isn’t top of mind right now (nor should it ever be) we’d like to share with you a new video this week.

Based on our last update you’re most likely expecting a new video on either pagination or sorting with LiveView. Well, a funny thing happened along the way.

In the last two weeks we’ve rewritten the code for the pagination and sorting examples not once, but roughly 6 times. It’s not because the examples are difficult, but with each iteration we discovered new things which lead to new questions. 🤔 We dug deep into LiveView’s source code and exchanged emails with Jośe Valim (co-creator of Phoenix LiveView).

We also wrestled with duplication in our code. Sometimes our refactoring produced beautiful, easy-to-read code. Other times we ended up with a convoluted mess of indirection. Our Git commit log is quite lengthy. 😜

Each day, though, the code got better.

While reworking the code we were also reworking the video script. Do we teach the live_patch function before the handle_params callback or vise versa? Which one motivates the other? Does it make more sense to start with the URL params or the live navigation links?

Our aim is always to break things down into one concept at a time, one clear explanation at a time, one “AHA!” moment at a time. But that was proving to be more challenging than usual.

Up, down, and ‘round and ‘round we went. With each rewrite, though, the explanations got clearer.

And then last Thursday afternoon when we thought we might be done, despite a few lingering concerns, we checked in the final version and went fishing. 🎣

It’s funny what happens when you stop intentionally thinking about a hard problem and leave it to simmer in the back of your brain. Fishing is perfect for that sort of thing. While you concentrate on simply casting and reeling, your subconscious gets a chance to work through complex problems.

That’s when we realized our pagination and sorting examples made too big of a leap. Introducing live_path, live_patch, push_patch, and handle_params for a URL with 4 params spread across 2 Elixir maps on a page with multiple navigation links was too much to teach at once. 🤯

What if instead we started with a simpler example using just one new function and one new callback? It turns out, that’s all you need to implement basic live navigation. It’s a perfect stepping stone leading to pagination and sorting.

So this week’s new video shows you how to implement page navigation without a full page reload using LiveView. If you’ve already picked up a copy of the course, you’ll find this new module (#10) in your account today.

With a solid understanding of live navigation, you’ll be ready to dive into pagination and sorting next. At least that’s the plan as of this moment. 😉