LiveView Course Update: Modal Components

Hey Folks!

We’re excited to announce that our Phoenix LiveView course is now content-complete and out of early access! 🙌

The best way to learn what Phoenix LiveView can do is to see it in action. So whether you’re just getting started with LiveView or going all-in, this course is for you!

We’ve spent hundreds of hours researching LiveView and building practical examples you can slip right into your application. Imagine all the time you’ll save and head banging you’ll avoid by taking the golden path. 💫 Trust us, our heads have small dents after working on this course for over a year. 🤕

Modal Component

Today we released the final three videos in which we build a custom modal component from scratch. We think this is a great capstone example because it pulls together a bunch of techniques we learned earlier in the course: nested components, live navigation, key events, and more!

Getting Our Feet Wet

We start off by building a basic modal component:

The cool part is that modal visibility is driven off the URL using live actions, so you can bookmark modal pages and consistently traverse the browser’s history. And the modal component is truly reusable: you can use it to render any content.

Getting Practical

Then we use that component in a more realistic scenario to pop forms into a modal:

Finally, we bring things full circle by looking at the modal component that’s generated by the phx.gen.live generator. And (surprise!) there’s no longer any mystery to how it works!

With this example in hand, you’ll be well on your way to designing your own reusable components following LiveView best practices.

So how do you get these new videos?

If you’ve purchased the Pro Package, you already have it! Just head over to the course and you’ll find the videos in Module 35.

If you’ve been waiting for this course to be complete before snagging a copy, it’s now ready for you at a special launch price!

We truly appreciate all the support you’ve given us as we’ve worked on this course. What started with a couple free videos around this time last year is now a full-blown course. 😅

We hope you all enjoy it!