The Pragmatic Studio

LiveView Course Update #3: Live Ecto Forms, Validations, Streams, and More!

March 08, 2023

We hope you’re enjoying early access to our Phoenix LiveView course! Today we added 5 new videos that are now ready for you…

Live Ecto Forms and Lists

Here’s a common thing you need to do: pop some data in a form, submit it to create a record in the database, and dynamically add the new thing to a list. By combining LiveView and Ecto, we have a powerful duo for handling all this server-side without any full page reloads.

Live Validations

How do you validate form data on the fly? By combining Ecto changesets with the real-time performance of LiveView, we can use all the server-side validations to give instant feedback to the user. It’s one unified code base, so there’s no need for separate client-side validations.

Streams

LiveView is chock full of optimizations! When you need to efficiently manage large collections of items in a stateful LiveView process, streams is the ticket. Stream items are temporary: they’re freed from LiveView’s state as soon as they’re rendered. We use streams to dynamically add, update, and delete items on the client without the overhead of keeping them on the server.

Toggling State

Pending or approved? Draft or published? Shipped or delivered? You often need a UI element that dynamically toggles a bit of state without triggering a full page update. We’ll show you how to do it lickety-split the LiveView way without a stitch of JavaScript. 😀

New Minor Phoenix Release

Phoenix 1.7.1 was released a few days ago. The difference between Phoenix 1.7.0 and 1.7.1 is you can now render Heroicons using a function component. And, to optimize their usage, the Heroicons are embedded in the app.css bundle. 🦸

This new feature doesn’t affect any code we’ve written in the videos or any of the exercises so far. However, in upcoming course modules we’ll use the new function component when rendering Heroicons.

So if you’ve already started the course and downloaded the code bundle, you’ll want to download the latest code bundle which has been updated for Phoenix 1.7.1. Then to bring the application you already have in step with Phoenix 1.7.1, follow the update steps we put together for you.

How do I get the new course modules?

If you purchased the previous Pro version of the course, go to your account dashboard and click the big green “REDEEM” button to get the new Pro course for free. Or, if you’ve already done that, just head over to the course and you’ll find the new modules ready for you!

Don’t yet own the Pro course? What are you waiting for? You can do amazing things with LiveView! And there’s still time to get the Pro course at the early access price:

Next up, we’ll dive into Live Components and real-time updates using Phoenix PubSub. 🚀