Learn Phoenix LiveView

The comprehensive tutorial that teaches you everything you need to build a complex, realistic, production-ready LiveView app.

Praise for my previous tutorial, Phoenix on Rails:

Dillon Luther

This course is fantastic. I felt like I cheated and jumped way ahead in Elixir/Phoenix.”

Jonathan Caprell

“I’ve bought a lot of Elixir resources over the last six years, and I’m really impressed with how good this is.

Serafeim Seroglou

“The clear, in-depth explanations of Elixir and Phoenix fundamentals allowed me to get up to speed really quickly into this exciting new domain.”

LiveView is the future of web development

Phoenix LiveView is revolutionizing the world of web devlopment. Its innovative approach lets you build dynamic, interactive web interfaces with no Javascript, rendering your HTML on the server and delivering real-time updates through the power of Elixir and OTP.

But the learning curve can be steep. LiveView isn’t like other frameworks, and it takes time to understand its unique architecture.

Learn Phoenix LiveView is the comprehensive tutorial. It’ll take you from zero knowledge and teach you how to build a complex, realistic, fully-featured and production ready LiveView app in record time.

Once you’re done with this tutorial you’ll be so blazingly productive in LiveView that you’ll wonder how you ever used anything else.

Learn Phoenix LiveView is a written tutorial. It’s currently available in early access. About 80% of the tutorial is complete and available, with the rest expected to be completed by the end of July 2024.

For now it’s available at an exclusive discounted price. Once the full course is complete, the price will go up.

Build a realistic project

You’re a professional. You want to build serious software that solves realistic problems, not simplistic toy apps that no-one would use in real life.

That’s why I designed Learn Phoenix LiveView to be realistic. You won’t waste time on contrived nonsense about flicking lightswitches or fizzbuzzing the foobars. Instead you’ll build a fully-featured Slack clone.

First you’ll build a simple but functional chat app that covers the basics. Then you’ll implement new features one-by-one, learning new LiveView concepts along the way, until you have a powerful app that’s production-ready.

As your app grows in complexity you’ll learn what LiveView looks like in practice, not just theory.

Leave no stone unturned

LiveView is a uniquely powerful tool - but its uniqueness means there’s a lot to learn that’s different from other technologies you might have used.

A complex, realistic LiveView app will use all of LiveView’s advanced features - and the Slack clone you’ll build is no exception. Learn Phoenix LiveView covers every LiveView concept: streams, hooks, function components, live components, async updates, PubSub, presence tracking, file uploads and more.

If you can build this in LiveView, you can build anything.

Learn the full stack

The above LiveView concepts are only part of the story. LiveView lets you build powerful, interactive UIS, but a web app is more than a user interface, and mastering Phoenix requires learning more than just LiveView.

I’ve got you covered. Learn Phoenix LiveView assumes no prior knowledge of any Phoenix concepts. It’ll teach you the full stack required to build a realistic LiveView app, including Ecto schemas, migrations, queries, the repo, the router, Mix and more. No stone is left unturned.

Once you’re done with this tutorial you’ll have everything you need to build a fully-featured Phoenix app from scratch. LiveView is the icing on the cake.

Understand the BEAM and OTP

In theory, LiveView’s basic idea (keep state on the server and live-update the UI over a websocket) could be implemented in any language. And since LiveView debuted in 2019, imitators have begun to emerge, such as Rails’s Hotwire or Laravel Livewire.

But LiveView will always stand above the competition for one simple reason: it’s built in Elixir. This means it runs on the BEAM, AKA the Erlang virtual machine, using OTP, the Open Telecom Platform. This suite of technologies unlocks a world of power that simply isn’t available in the average programming language.

Learn Phoenix LiveView doesn’t skim these details. It explains everything you need to know about advanced Elixir concepts such as processes, genservers and supervisors. This isn’t academic - the more you understand about exactly how LiveView makes use of OTP and the BEAM, the easier you’ll find it to build highly concurrent, scalable and fault-tolerant apps in Phoenix. And the more you’ll appreciate what makes LiveView so special, and why Chris McCord took a bet on an obscure little language called Elixir when he created Phoenix.

Convinced? Buy it for life

No subscription, no time limit. Lifetime access with a single payment.

Early Access
  • For personal use
  • Lifetime access
  • 70 lessons + full source code
  • All future updates for free
$50
$30
Sign up now

Questions

What’s the stack?

The tutorial uses the latest version of everything as of 2024: Elixir 1.17, Phoenix 1.7, and LiveView 1.0. It will be kept updated as new versions of these technologies are released in the future.

Do I need to know non-LiveView Phoenix before I can learn LiveView?

Not at all! This course is suitable for the total Phoenix beginner.

What about Ecto?

Ecto is Phoenix’s data mapping library. You use Ecto to interact with your app’s database, to store and retrieve data.

Learn Phoenix LiveView doesn’t skip Ecto. It teaches all the Ecto concepts you need - migrations, schemas, queries, changesets, repos - to build a complex and realistic LiveView app.

What about Tailwind?

Since Phoenix 1.7, newly-generated Phoenix apps use Tailwind CSS for their styling. You don’t have to use Tailwind in your Phoenix project - it’s easy to, for example, use SASS, LESS, or vanilla CSS instead - but Tailwind is the default.

Tailwind is a simple framework that’s very easy to learn. The app you’ll build in Learn Phoenix LiveView uses Tailwind for its styling, but you don’t need a deep knowledge of Tailwind to understand the tutorial.

Does this course teach OTP?

LiveView derives much of its power from the Open Telecom Platform (OTP), a powerful set of tools, libraries and design principles that’s built into the BEAM (the Elixir virtual machine).

You don’t need to understand OTP to build a LiveView app, but it helps. Learn Phoenix LiveView teaches and explains all the OTP/BEAM concepts that make LiveView work, such as processes, supervisors, applications and GenServers. Once you’re done you’ll understand what makes LiveView so uniquely powerful, and why it couldn’t have been built in any language except Elixir.

Is there anything else I need to know?

This tutorial assumes that you understand basic web development concepts such as HTML and HTTP. You don’t have to be an expert, but if you don’t know what a  <div>  tag is, I recommend studying the basics before diving into LiveView.

I’m a student / unemployed / from a poorer part of the world, can I have a discount?

Maybe. Send an email explaining your situation and I’ll see what I can do.

I have another question.

I’d love to hear it! Get in touch on george@arrowsmithlabs.com.

You’ll learn LiveView thoroughly from this course - I guarantee it. Sign up, and if you aren’t impressed, send an email within 30 days of purchasing and I’ll give a full refund.

Table of contents

01 Installation


02 mix phx.new


03 Directory structure


04 Phoenix.Router


05 HEEx


06 Layouts


07 Ecto.Migration


08 Schema and Repo


09 mount/3


10 mount/3 is called twice


11 Events


12 update/3


13 Function components


14 Path params and routes


15 link/1


16 handle_params/3


17 Contexts


18 Page titles


19 Ecto.Query


20 Changesets part 1


21 Changesets part 2


22 Forms part 1


23 Forms part 2


24 Flash


25 Uniqueness validations


26 Rate limiting


27 phx.gen.auth


28 Messages


29 Associations and preloading


30 Sending a message


31 Seeds


32 Streams


33 External dependencies


34 Timezones


35 Deleting messages


36 Tailwind groups


37 Processes


38 handle_info/3


39 PubSub


40 Hooks


41 Phoenix.Presence part 1


42 Phoenix.Presence part 2


43 Room index page


44 many_to_many


45 Room memberships part 1


46 Room memberships part 2


47 stream_configure


48 Toggle membership


49 'New messages' divider part 1


50 'New messages' divider part 2


51 Static files


52 Asset compilation


53 Unread message count


54 Phoenix.LiveView.JS


55 Modals


56 New room form


57 Live action


58 Phoenix.Component


59 use


60 Usernames


61 Auth pages


62 The User schema


63 User registration


64 User sessions


65 Date dividers


66 Live components


67 File uploads


68 Pagination


69 Threads part 1


70 Threads part 2