LiveView Course

What's in this preview?

We want you to get the feel for typical Groxio content and the reasons we provide each type of content. Each Groxio module comes in four scheduled releases consisting of the central PDF, videos, and resource links. Later releases have projects as well. You can see part of the first release here.

The most fun you'll ever have building interactive web applications.

Buy Course Today!

Preview PDF!

Version: Aug 3, 2020

Just $70.00, A La Carte
(other options available)

Programmer Passport LiveView

Why a book?

The scientific teaching method we follow is the Dreyfus learning model. Books provide the metaphors experts need to build context, step-by-step instructions for beginners, and the exercises that intermediates need to learn.


1. LiveView Basics

2. LiveView Events

Why an itinerary?

The itinerary is a virtual guide. This optional list describes the highlights of each release to maximize your learning time.


Phoenix is the web development framework for Elixir, and LiveView is a Phoenix service that allows interactive page flows without JavaScript.

The LiveView project has swept through the Elixir community like wildfire. It takes traditional web development, which focuses on individual tasks that render HTML, and flips the model on its head. Instead, LiveView lets a programmer build a data structure in memory. Then, the user renders the data as a string, and any changes to the data structure automatically trigger a render.

The end result is that the developer’s focus shifts from things that are difficult, like managing concurrency or IO, to something that programmers are good at, writing small functions to change state.


When Chris McCord - creator of Phoenix - moved from a Ruby consultancy to the Elixir community, he was looking for the kind of infrastructure that would let something like LiveView flourish. He wrote a book called Metaprogramming Elixir, and then shifted his attention to the Phoenix framework. After years of building effective infrastructure with startling scalability and reliability, he was finally ready to attack LiveView.

The project was unveiled at ElixirConf in 2019, and released in 2020 as a part of Phoenix 1.5. It has been an opensource project from the very beginning, and is rapidly gaining notariety in many programming communities. The very website you’re working on now is built in LiveView, with only four tiny custom JavaScript functions for analytics and payment processing.


Public & Private

Why videos?

Groxio language modules have two kinds of videos. Our overview videos set the history and context of a language, or wrap up the work we've done, and are free to support language ecosystems. Our coding instruction videos, mostly starting with the second release, are paid content, and each one offers a live coding project.

Every learning level benefits from pair programming. Our videos are professional, but do not scrub away every tiny mistake. That way, you can see how experienced programmers deal with errors and changes in code organization.

1: LiveView Getting Started

Introducing LiveView. In this video, we build our first LiveView app together. We have a timer firing messages on a one-second increment. This video begins to establish the LiveView lifecycle and walks through building the classic layers of a LiveView application, from beginning to end.


2: LiveView, The Functional Core

In this episode, we begin to build out the functional core for our application and introduce the design system presented in my book, Designing Elixir Systems with OTP. By designing your application in layers and layering your code using reducers in an Elixir-friendly way, we will set ourselves up for success as we write our user interface.
Subscriber content


3: LiveView, The LiveView Overview

In this episode, we shift from practice to theory. We begin to present the different parts of a LiveView lifecycle, and the interplay between our state, handlers, and templates. We break down into detail the high-level ideas that will go into every LiveView you write, and establish the glue that will tie our applications together.
Subscriber content


4: LiveView, Links and Layers

It's all reduce! We build in buttons that take phx-click and phx-value messages. We'll use skinny LiveView handlers to manage more than one counter, and work more on our layers that use skinny handlers to fire our reducers to each modify a socket, and we'll let those tiny socket reducers fire the reducers in our core.
Subscriber content


5: LiveView, Schemaless Changesets

Changesets are an integral part of Elixir's Ecto database framework, but you don't need to have a database schema to make them work. In this episode, we use a schemaless changeset. This approach lets us validate forms in real time with rules rather than complex logic.
Subscriber content


6: LiveView, Scaffolding

Code generation can accelerate your progress through many typical database problems. The Phoenix LiveView generators do much of the work for you. We'll generate a basic template, and then extend it piece by piece to build the features we want.
Subscriber content


7: LiveView, Stateless Components

LiveView's component model allows a LiveView to reuse two different kinds of code, with and without state. This video shows how stateless components work, complete with lifecycle analysis. We'll show how components work, and then show a refactoring exercise to make a bit of HTML a stateless component.
Subscriber content


8: LiveView, Stateful Components

Stateful components are more complicated than stateless ones, but also more powerful because they can receive events. We'll build a stateful component, and observe their different rules. Along the way, we'll see how they provide a more extesnive set of capabilities, because their events implement behavior.
Subscriber content


9: LiveView, Functional Core 2

We take our second pass through the layering system made famous in Designing Elixir Systems with OTP. We build the functional core to our memory game, building a constructor and reducer. These two functions form the features that we plug into mount and handle_event functions.
Subscriber content


10: LiveView, Boundaries

Where core code has pure functions with certain outcomes, boundary layers handle process machinery, or code that accepts user input. The boundary is the API for a service, a context in Phoenix.
Subscriber content


11: LiveView, Navigation

LiveView allows several ways to manage URL state, sometimes without ever leaving a LiveViiiew. We begin to use the various functions for Phoenix redirection. Live Patch will let us change the URL without leaving the flow of a LiveView. LiveRedirect will let us do a a full transition between live views.
Subscriber content


Bonus: Phoenix, phx.gen.auth

José Valim's company, Dashbit, builds a authentication service for Phoenix. In this video, we show you how it works, from end to end. We walk through the various layers of code, and use the generator to build an auth layer. Then, we integrate it into a LiveView page, complete with the socket.
Subscriber content

Community Resources

Cool quick trips for LiveView

Why resource links?

Each new chapter has a set of links, separated into three categories. The categories reflect different competency levels and resources that match that stage of learning, for each Groxio release.

Learn It

These resources will get you on the path to learning with background information, tooling and exercises.

Do It

You decide how deep to go. These resources are exercises and projects to cement your learning.

Grok It

These resources will help you put your new knowledge into context so you'll be better at your everyday job.


Longer Excursions (chapters 3 and 4)

Why projects?

The Dreyfus model is originally instruction for pilots. A typical pilot course is based on reading material to understand context, and then flying a plane. Our videos and PDFs are important, but in the end, programmers need to program in order to learn. Our projects offer different levels of assistance, from "give me the answer" to "make this test pass".