✴️  All courses 40% off through Dec. 1. Use coupon code 2020SALE.

Phoenix
LiveView

The best way to learn what Phoenix LiveView can do is to see it in action!

When it comes to a new technology, there are few things more frustrating than hearing "it's a game-changer!" but having no idea:

  • What It Is
  • How It Works
  • Where To Use It

This LiveView video course focuses on two main things: super clear explanations and loads of practical examples. Then you'll know for certain if it's right for you and, if so, how to use it in your project.

“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 Clemens Müller

You'll find out how LiveView works under the hood, what's on the wire, and have a solid understanding of the programming model. Nothing is left behind the scenes as “magic.”

The real-life examples explore how LiveView solves all sorts of common UI challenges. By seeing LiveView used in many diverse situations, you'll quickly build up a strong intuition for when and how to use it.

For Phoenix developers who want to improve their apps (and their lives!), there isn't a tool more important right now than LiveView!

“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 Julien Crevits

New to LiveView?

Here's the quick lowdown.

LiveView enables you to build Phoenix apps with interactive, real-time user experiences without writing JavaScript. The results are dramatic and game-changing:

  • both client and server in sync, always and seamlessly
  • persistent connections highly-optimized for web scale
  • robust and resilient UIs so you can rock and roll
  • a unified code base that's easier to maintain
  • no custom JavaScript or external dependencies

Oh yeah, and LiveView also has a simple (almost addictive) programming model which makes it a really fun library to use.

But reading about LiveView doesn't come close to seeing it in action. So the first video in the course compares and contrasts LiveView with something you already know:

Course Outline

Videos just the way you like 'em: easy to digest, straight to the point, and paced for experience developers.

1 What Is LiveView?

See how LiveView is different from other common approaches to building interactive, real-time features.

Module-1
2 Button Clicks

Build a basic LiveView from scratch to see how to react to user events.

Module-2
3 LiveView Life Cycle

A deep-dive exploration of the lifecycle of a LiveView and what's on the wire.

Module-3
4 Dynamic Form

React to dynamically-changing form data.

Module-4
5 Dashboard

Update a dashboard on a periodic interval.

Module-5
6 Live Search

Search an Ecto repo and see results without a full page reload.

Module-6
7 Autocomplete

Automatically make suggestions for text input fields.

Module-7
8 Filtering

Filter data with LiveView and get snappy results.

Module-8
9 Live Navigation

Use pushState to navigate between pages without full page reloads.

Module-9
10 Pagination

Page through Ecto results, keeping the URL updated so pages can be bookmarked.

Module-10
11 Sorting

Sort tabular data without a full page reload.

Module-11
12 Form Create

Dynamically create data from a form using Ecto changesets.

Module-12
13 Live Validations

Validate form data in real-time based on Ecto schema validations.

Module-13
14 Toggling State

Toggle a bit of state in a quick and easy way.

Module-14
15 Real-Time Updates

Use Phoenix PubSub to push out real-time updates across multiple browser sessions.

Module-15
16 JavaScript Interop

Bring your favorite JavaScript API or library to the party! Hook it in and push events to a LiveView.

Module-16
17 Live Components

Get a clear understanding of stateless and stateful LiveComponents: what they are, how they work, and when and why to use them.

Module-17
Currently under construction for the Pro Package:
18 Extracting Components

Improve the design of your app by understanding how to restructure LiveViews into components.

Module-18
19 Charting with JS

Add a wow factor to your app by using a LiveView for real-time charting with the help of a JS library. (Sneak peak)

Module-19
20 Mapping with JS

Update a map in real-time across multiple browser sessions by combining the power of LiveView and a JavaScript mapping library. (Sneak peak)

Module-20
21 Authentication

A deep-dive exploration of the phx.gen.auth library and how to use it to ensure that only authenticated users can access specific LiveViews. (Sneak peak)

Module-21
22 Triggering Controller Actions

Design a LiveView that validates a form in real-time, but POSTs the form data to a regular Phoenix controller action. It's a handy technique!

Module-22
23 Testing

No headless browser required here. LiveView has first-class testing support so you can write high-confidence tests that run orders of magnitude faster than using a bulky browser.

Module-23
24 File Uploads

Interactively upload multiple files directly to cloud-based storage services with progress updates. It all just works out-of-the-box without having to write custom JavaScript.

Module-24
25 Keyboard Shortcuts

Take your app's interactivity up a notch by triggering LiveView key events for specific key presses.

Module-25
26 Custom Modal Component

Design a reusable, stateful modal component from scratch that reacts to key and click events.

Module-26
27 Background Jobs

Submit background jobs and get real-time progress updates.

Module-27
28 And More!

Under Construction
“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 Jaime Iniesta

What You'll Get

25+ Videos

Stream online or download. English subtitles. No rambling or fumbling. Straight to the point and perfectly paced.

Animations

See the entire lifecycle and how everything works. Get a solid mental image of the programming model.

36+ Exercises

Get deliberate and directed practice by applying what you learned to build different examples. Solutions included.

Source Code

Full source code for all the examples, with Git branches for the beginning and ending code.

Cheatsheets

A handy PDF summarizing the techniques covered in the course for quick reference.

Lifetime Access

No monthly subscription. No time limit. Start today, work at your own pace, and revisit as often as you like.

Start the course today and find out how LiveView brings the heat without any of the burn!

Starter Package
Available Now
  • First 15 videos
  • 26 exercises
  • 4 hours of screencasts
$99 Free

Have an account? Sign in to add this course to your account.

Pro Package
Under Development
  • All 25+ videos
  • 36+ exercises
  • 6+ hours of screencasts
  • PDF Cheatsheets

Get the Starter Package and we'll send you progress updates on the Pro Package. Or drop your email here!

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 Felix Borzik

For Experienced Developers

To keep this course focused and paced just right, we assume you're already familiar with Elixir and Phoenix.

If you're new to Elixir, our Elixir and OTP course is the most approachable introduction out there. Start here to get the clarity and confidence to jump right into LiveView.

Elixir

If you've been around the block with Elixir and Phoenix, discover how Absinthe makes building a GraphQL API a breeze for Elixir developers in our Full-Stack GraphQL course.

Unpacked Graphql

Created with 💛 by
Mike and Nicole Clark

Mike and Nicole

We've been using Elixir and Phoenix since their early days. Over the past few years we've created three Elixir and Phoenix-related courses: Elixir and OTP, Multi-Player Bingo, and Full-Stack GraphQL.

Last year we started working on a Phoenix course, and as LiveView began to heat up we knew it would play a big role in the course. So in late 2019 we immersed ourselves in LiveView. The simple programming model makes it a really fun and effective library to use. We enjoyed it so much, in fact, that we couldn't stop using it to build all sorts of interactive UI features that traditionally require custom JavaScript. And we were blown away by the results!

After building a dozen or so of these features, we realized they wouldn't all make sense in the application we created for the Phoenix course. Alas, some of the LiveView examples would end up on the cutting room floor. 😓 But then we thought, "Hey, we could turn this into a fun and practical mini-course!" So that's exactly what we're doing. We hope you enjoy it. 😀

More about us →

With Help From
An Awesome Tech Reviewer

José Valim

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! 💥

José Valim
“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
Yeong Sheng
“Top notch care given to the details and explaining how the magic happens. Thanks to @clarkware and Nicole for stitching this together.” Yeong Sheng
Marko Honkanen
“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
Lauren Fackler
“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
Clemens Muller
“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
Felix Borzik
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
Thomas Galibert
“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
Bert Cammayo
“This is by far the best course I've ever watched! Each section is easy to digest and comprehend.” Bert Cammayo
Tony Hanusiak
“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
Toni
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
Michael Chavez
“I like that each video is short and covers one feature to implement. I give it max + 1 stars!Michael Chavez
Jukka Välimaa
“I've enjoyed getting a more practical grasp of LiveView together with an understanding of the way it works. Thanks!” Jukka Välimaa
Walther Diechmann
“You have a very special way of slicing any elephant into digestible lumps, and adding tasty sides! Thanks a bunch!” Walther Diechmann
“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 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
Jaime Iniesta
“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
Julien Crevits
“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
Joaquin Alcerro
“The graphical explanation is awesome!! It helped me better understand all the heavy lifting Live View does for us.” Joaquin Alcerro
Peck
“This is great tech, so good of @pragmaticstudio to release the early access course. That's going to lead to some amazing things being built!Peck
Daryl Spitzer
“I finished all 8 sections of @pragmaticstudio’s free(!) Phoenix LiveView course released so far. I couldn’t recommend it more highly. If you haven’t learned Elixir, I also highly recommend their Developing with Elixir/OTP course.” Daryl Spitzer
Juan Cervera
“I really enjoyed the LiveView life cycle video. Your explanations are fantastic as usual!” Juan Cervera
Napoleon Ahiable
“The graphics and animations are excellent! Your explanations very much aid my understanding. It’s very engaging too.” Napoleon Ahiable
David Alm
“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
Jon Hancock
“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
Matthew Lehner
“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
Jiří Erhart
“As an introduction to LiveView this course is super cool! 👍🏻 It's a very nice explanation of the fundamentals.” Jiří Erhart
Mark Berry
“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
Mark Johnson
“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
“Just watched the first batch of @pragmaticstudio @elixirphoenix LiveView videos, and they're amazing!” James Lavin