Completely updated top-to-bottom for Phoenix 1.7 and LiveView 0.20
You're gonna love how the latest versions of Phoenix and LiveView simplify and unify everything! 💛
But who has time to wade through all the books, blog posts, YouTube videos, and so on...
... and decipher the diffs between old and new ways of doing things
... and figure out how all the pieces fit together?
Not you, that's who!
You're a busy developer with lots of curiosities to curb.
So we distilled what you need to know about LiveView, assembled it in the right order, and neatly packaged it as a video course that's paced for experienced, gotta-get-it-done developers like you. 🙌
It's a carefully-crafted course that ticks all the boxes so you can quickly start building LiveView apps like a pro with:
- real-world mini-projects that solve a variety of common challenges
- practical techniques you can immediately apply to your own projects
- super-clear explanations so you get good mental models
- a look behind the scenes so nothing is left as "magic"
- step-by-step progression that fills in all the gaps
- meaningful exercises to lock in what you learn
- engaging, tightly-edited videos that value YOUR time!
Plus it's all sizzling hot with new content on HEEx templates, function and live components, declarative assigns, slots, live sessions, presence tracking, JS Commands, and more.
“This course is fantastic! It has helped me understand LiveView so much better. I love how you not only show us how to do the LiveView stuff but also explain the mechanisms behind it”Julien Crevits
New to LiveView?
Here's the quick lowdown.
LiveView is a library that's included in all Phoenix apps. It lets you to build interactive, real-time web apps faster and with less code. The advantages are unrivaled by other modern web frameworks:
- both client and server in sync, always and seamlessly
- persistent connections highly-optimized for web scale
- a unified code base to ease maintenance
- a robust, easy-to-use toolchain
- built-in PubSub, presence tracking, and authentication systems
- Elixir and OTP's lightweight process and concurrency model
- runs on the massively-scalable, fault-tolerant Erlang VM
- a simple, yet powerful, programming model that's a treat to use
But reading about LiveView doesn't come close to seeing it in action. See what LiveView is, how it works, and what you can do with it in this 4-minute explainer video:
“I had a blast working through this course and learned a ton! I loved the combination of videos with detailed walk-throughs of each concept and then exercises that I could complete on my own to cement the concepts.”Tom Monks
Videos just the way you like 'em: easy to digest, straight to the point, and paced for experienced developers.
And what problems does it solve? What can you do with it? See how LiveView offers an easier and faster way to build multi-user, interactive, real-time web apps at scale on the super-charged Elixir/Phoenix platform.
Our first project is a simple light controller that reacts to user events: turning the light on and off, and dimming it up and down. Building this from scratch is a great way to get our feet wet with LiveView's reactive programming model using HEEx templates and mount, render, and handle_event callbacks. (Live Demo)
No hand-waving in this course! We take a deep-dive exploration of the lifecycle of a LiveView so you understand exactly how it works. And we take it a step further by looking at the websocket traffic to see how LiveView delivers optimized UI updates at blazing-fast speeds.
Building this project step-by-step gives us our first look at a LiveView that reacts to form changes and introduces more features of HEEx templates. Later on in the course we build more sophisticated forms, but this simple dynamic form is an ideal and instructive starting point. (Live Demo)
LiveViews are stateful Elixir processes. That's a total game-changer! Not only can LiveViews react to user interactions at remarkable speed and scale, they can also dynamically update UIs when state changes on the server. As an example of handling internal messages, we create a live dashboard of stats that change on a periodic interval. (Live Demo)
Want to run a search and get the results without a full page reload? LiveView makes that snappy! It's so responsive you almost don't need a loading state, but we add a spinner for completeness. We also look at how LiveView optimizes data over-the-wire when rendering lists. It's crazy smart. (Live Demo)
How would you build a LiveView that filters data stored in your Ecto repo based on dynamically-changing filter criteria? The user ticks a box or changes an option and boom! the page updates with results. We show you exactly how to build it, and you can easily adapt this project to suit your own filtering needs. (Live Demo)
Components, components, components! Once you know how to make them, you'll find lots of opportunities to restructure LiveViews into reusable, easy-to-maintain components. We make a function component with declarative assigns and slots, and also extract a few function components from an existing LiveView to improve the overall design.
No page of tabular data is complete without links for sorting each column. And of course you also want the sorting options to be preserved in the URL so bookmarked pages show consistent results. No worries, this project will sort you out on how to do that using live navigation! (Live Demo)
Pagination is a must-have for most applications. And navigating between pages of Ecto results is super-zippy thanks to live navigation and the raw power of Phoenix. You can adapt the techniques you learn in this project to lots of different scenarios in your own apps. (Live Demo)
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 Demo)
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. (Live Demo)
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.
In addition to function (stateless) components, LiveView also has live (stateful) components. They have their own state, handle their own events, and render independent of their parent LiveView. We build a live component step-by-step so you understand how they work, when and why to use them, and how they communicate with their parent.
You don't have to jump through a bunch of hoops to update LiveViews in real-time across multiple browser sessions. Phoenix PubSub makes it super easy to broadcast messages from the server to multiple LiveViews. In this project we use PubSub to keep everything in sync! (Live Demo)
How does authentication work when it comes to LiveView and websocket connections? For starters, you need a secure session-based authentication system that has all the standard features: register, log in, log out, and so on. And thankfully Phoenix has a built-in generator to add a full-featured authentication system right into your app. We walk through the relevant code and then use it to seamlessly and securely authenticate LiveViews. (Live Demo)
You often want to enforce the same authentication policy across a group of live routes. That's where live sessions come in super handy. And LiveView has special optimizations for live navigating between LiveViews in the same live session. You won't want to miss these pro-level design and performance techniques! (Live Demo)
Multi-user, real-time presence updates: you'd settle for nothing less in today's apps, right? But presence tracking is typically a DIY project. Not so with Phoenix! It has unrivaled, built-in presence tracking that uses PubSub to broadcast presence updates in real-time. We combine it with LiveView to build a fun yet real-world application. (Live Demo)
LiveView has first-class support for key events, making it easy to support keyboard shortcuts, hot keys, and the like. To show you how it's done and have some fun along the way, in this project we bring a lil' juggler to life by directing his actions with a variety of key events. (Live Demo)
File uploads are an essential part of many web apps. Roll your own solution? Nah, you've got better things to do than reinvent this tricky wheel. LiveView has fantastic built-in support for uploading multiple files concurrently with progress updates and enforced file constraints. This project gives you a turn-key direct-to-server or direct-to-cloud solution that you can easily adapt to your own needs. (Live Demo)
“This is an awesome course! I really appreciate the way you build up the knowledge bit by bit. I'm already feeling confident to go out and use LiveView in my own projects.”Jaime Iniesta
What You'll Get
Lifetime access to everything you need!
“The amount of value in this course is INSANE. What a great resource!”
Start the course today!
No monthly subscription or time limit. You own it for life.
“It's been a very long time since I’ve had this much fun learning something. The explanations are SUPER clear and easy to remember. It's all very impressive!”Felix Borzik
For Experienced Developers
To keep this course focused and paced just right, we assume you're already familiar with Elixir and the fundamentals of Phoenix.
If you're new to the Elixir functional programming language, we highly recommend going through our Elixir & OTP course before jumping into Phoenix and LiveView. You don't need deep knowledge of OTP to use LiveView, but you do need to feel comfortable with Elixir syntax and functional programming in general. We think our course is the best introduction to Elixir that you'll find, and lots of folks agree!
New to the Phoenix web framework? No worries. We recommend working through the first few sections of the free Phoenix Guides. If you've built web apps using another MVC framework such as Rails or Django, then you'll likely feel right at home in Phoenix.
Created with 💛 by
Mike and Nicole Clark
We've been using Elixir, Phoenix, and LiveView since their early days. In addition to this course (now on its second edition) we've created several other related courses: Elixir and OTP, Multi-Player Bingo, and Full-Stack GraphQL.
We spent months immersing ourselves in the latest updates to Phoenix and LiveView, and condensed everything we learned into a course you can work through in just a few hours. It's the course we wish we had when learning LiveView. Hope you enjoy it! 😀
With Help From
An Awesome Tech Reviewer
José Valim is the creator of the Elixir programming language, co-creator of Phoenix LiveView, and Chief Adoption Officer at Dashbit.
We're super thankful for José's support of this project. His review of early drafts of our animations was instrumental in helping highlight and clarify what's unique about LiveView. Thanks, José!
💥 This Course Is A Hit! 💥
“The new @pragmaticstudio Elixir Phoenix LiveView course is amazing. Really well produced, great pace, rigorous content - I highly recommend it. Erlang BEAM + Elixir + Phoenix + LiveView also happens to be the tech I'm most excited about today.” Sam Aaron
“It's a ridiculously great course. I can't recommend it highly enough!” Nick Maxwell
“Holy moly! You have the best walkthroughs, explanations and tips from any videos I've seen about this beautiful piece of technology. It's an invaluable resource!” Clemens Müller
“I highly recommend the @pragmaticstudio Phoenix LiveView course. I can't remember the last time I enjoyed a programming course as much as this one.👌” Stefan Luptak
“This course exceeded my wildest expectations! I love all of the many different examples and mini-projects. If a course I need is published on the Studio, I don't go anywhere else.” Abdisamad Khalif Abdulle
“This is the best online course experience I've ever had. The examples are VERY helpful and I love the challenges after the video too.” Lauren Fackler
“This course is FANTASTIC! It's so well organized and thought out and the practical lessons perfectly build off each other. The paced learning is amazing. You've made understanding LiveView so much easier.” Benjamin Gandhi-Shepard
“I was struggling with outdated books and the vast amount of Phoenix documentation. I was lost and frustrated. But when I watched this course I felt like you took my hand and showed me the path. The value of each chapter is great with loads of content. All the exercises are meaningful and can be applied to real life applications.” Mariano Colabraro
“Thanks so much for creating a fantastic course for one of the coolest features of Phoenix Framework. I really enjoyed the tireless attention to detail and explanations throughout the LiveView course. Bravo! 🙌🏾” Conrad Taylor
“This course is the go-to for Phoenix LiveView! I loved the live coding and seeing how experienced LiveView developers program. And the exercises are great! They repeat what's taught in the section but in a different context so it helps us anchor our memory.” Anthony Khong
“I loved the variety of use cases in this course that I could turn around and use in my real-world application.” Adam Postma
“This course has really great examples that I can easily translate into my actual projects! The explanations of the LiveView life cycle really help me understand how a LiveView works. I'll definitely be looking back at these videos and the example code as references while I work.” Robert Prehn
“Top notch care given to the details and explaining how the magic happens. Thanks to @clarkware and Nicole for stitching this together.” Yeong Sheng
“If you want to learn more why Phoenix LiveView is such a game changer for writing interactive and real-time applications, the @pragmaticstudio folks put together a short and sweet 4-min video on it.” José Valim, co-creator of Phoenix LiveView
“The best way to learn what Phoenix LiveView can do is to see it in action, like on this free course from @pragmaticstudio.” Marko Honkanen
“It's been a very long time since I’ve had this much fun learning something. The explanations are SUPER clear and easy to remember. It's all very impressive!” Felix Borzik
“I love the clarity of the explanations and how well they explain what happens under the hood. Also like the real-life examples. I already had some experience with Liveview but not the time to dive into how it works behind the scene. Very interesting!” Thomas Galibert
“This is one of the best online programming courses I've ever taken! All the examples where super useful and very well explained. The notes and exercises helped me nail the theory, gain hands-on experience, and understand the topic better. Thank you very much for this amazing course!” Nikita Savitskiy
“This is by far the best course I've ever watched! Each section is easy to digest and comprehend.” Bert Cammayo
“Thanks @pragmaticstudio for this amazing course! The lessons are top notch!” Raymond Siu
“Your courses are really top notch! The LiveView examples are excellent real-world examples of interactive items you would find on a web application.” Tony Hanusiak
“The balance between theory and practice is spot on, and the use cases are very helpful. I also really enjoyed the part where you dig into the diffs for each socket message and how that builds the DOM. Great work!” Toni
“I like that each video is short and covers one feature to implement. I give it max + 1 stars!” Michael Chavez
“I've enjoyed getting a more practical grasp of LiveView together with an understanding of the way it works. Thanks!” Jukka Välimaa
“You have a very special way of slicing any elephant into digestible lumps, and adding tasty sides! Thanks a bunch!” Walther Diechmann
“Clear, simple, and really practical!” AlaaEldin Ahmed Ibrahim
“I can't even imagine the time that went into preparing this course. I went from, 'snap! another bunch of documentation to read' to 'I got this'. ” Sergio Ruiz
“Really fantastic course! I'm enjoying the "real-life" components rather than just another counter example. The explanations are very in-depth and I feel like I am getting a greater understanding of LiveView.” Aidan Barrett
“I'm loving your Phoenix LiveView course! It's greatly accelerated my understanding. These aren't easy concepts to teach but you two really excel at it!” Claude S
“It's a fun course that is densely packed with great information! I love the pacing and how each video focuses in on a particular tidbit of knowledge. I also like that you lean into the assumed knowledge the learner should have before starting the course. That really speeds things up.” Cody Landry
“I have been a LiveView developer for a few years now and I'm still learning a lot from your course!” Bret Funk
“This course is a must-have, especially for people who learn better with videos or can be overwhelmed by documentation. I liked everything about this course: the exercises, the diagrams that helped me understand the logic behind LiveView, the source code, and that it was up-to-date with the latest versions of Phoenix and LiveView.” Franklin Rakotomalala
“Your courses have accelerated my learning of Elixir and Phoenix greatly!” Victor Yap
“This has been the best LiveView course I've ever seen. It's crisp and on point. I now know the most about LiveView on my team and I can easily build apps efficiently using the good practices. Thank you so much for the amazing content.” Yatender Singh
“I like every @pragmaticstudio course. But their LiveView Pro course is something else. I think it is the most complete course on Elixir ecosystem. Definitely worth every penny!” Douglas Correa
“I had a blast working through this course and learned a ton! I loved the combination of videos with detailed walk-throughs of each concept and then exercises that I could complete on my own to cement the concepts.” Tom Monks
“This course gave me the understanding of how things work under-the-hood in LiveView, and now I'm ready to apply those concepts in my workday.” Luis Gustavo Caciatori
“This course was impeccable! The examples were elaborate yet succinct. I loved how easy it was to follow each concept and how the code worked in one go so I didn't have to scratch my head to make things work. The default styling, images, and seeds spared me the pain of having to find and fill in content. I feel like I can make anything using LiveView now.” Abhijit Kar
“Everything about this course is great! The way you bring it all full circle by seeing the on-the-wire diffs, debugging, etc. has really been an eye opener.” Bryan Konowitz
“The graphical explanation is awesome!! It helped me better understand all the heavy lifting LiveView does for us.” Joaquin Alcerro
“I finished all 8 sections of @pragmaticstudio's free(!) Phoenix LiveView course released so far. I couldnt recommend it more highly. If you haven't learned Elixir, I also highly recommend their Developing with Elixir/OTP course.” Daryl Spitzer
“This course is very clear! I like that in the notes that accompany the video there are some very useful tips and small projects where I get to test the skills I just learned in the video.” Fredrik Gustafsson
“This is an awesome course! I really appreciate the way you build up the knowledge bit by bit. I'm already feeling confident to go out and use LiveView in my own projects.” Jaime Iniesta
“This course is fantastic! It has helped me understand LiveView so much better. I love how you not only show us how to do the LiveView stuff but also explain the mechanisms behind it.” Julien Crevits
“I really enjoyed the LiveView life cycle video. Your explanations are fantastic as usual!” Juan Cervera
“...the tracing of the socket traffic was fantastic. Loving the course.” Jimmy Bosse
“The graphics and animations are excellent! Your explanations very much aid my understanding. It’s very engaging too.” Napoleon Ahiable
“I just watched the first few videos and your explanation of how mount is called twice, and how it sends the diff down the wire—perfect!” David Alm
“I really like the structure of this course (the git repo, course outline, and notes after each step). The pacing and flow have been just right for my Elixir knowledge. And the video length is just right for my tea breaks from my day job. ;)” Jon Hancock
“I've been writing Elixir for a few years and had a hard time wrapping my mind around the LiveView programming model. Your course gave me the know-how and confidence to get a couple of LiveViews configured and running in our production Phoenix app!” Matthew Lehner
“As an introduction to LiveView this course is super cool! 👍🏻 It's a very nice explanation of the fundamentals.” Jiří Erhart
“This course is great! The content is clearly delivered and presented as just complex enough to teach the concepts without overwhelming me during the learning process. No time wasted at any point.” Mark Berry
“You folks are wizards! Over the past year or so, I became quite interested in Phoenix LiveView and really want to learn it well. Your course has been very illuminating, helpful, and refreshing!” Mark Johnson
“The amount of value in this is INSANE. What a great resource.” David
“Over the past few months, I've purchased a lot of books related to Elixir, OTP, Phoenix and functional programming but none of them captivated me as much as this course. I really liked the format, ease of explanation, perfect pacing, and animations that helped reinforce the explanations.” Milan Vit
“I really like the great explanations of the overall programming model, what's happening on the wire, and how to debug that. The videos and exercises are well balanced!” Callum McIntyre