LiveView V3 (LV 0.18 for Ph 1.7) Course

0. LiveView V3 Kickoff

In this video, we walk through the major new features in the last year of LiveView development that is shipped in Phoenix 1.7. We'll cover Tailwind integration, links, verified routes, components, and customization strategies.

1. LiveView V3 Intro to LiveView

This video marks the first in an in-depth exploration of Phoenix LiveView. We'll build a classic counter, one with some basic features that set up our data, modify it based on user interactions, and then render the changes.
Subscriber content

2. LiveView V3 Abstractions

LiveView is not like most web development frameworks. Explore the abstractions underneath LiveView as you learn how LiveView's inversion of control lets you build dynamic, interactive code without writing custom JavaScript.

3. LiveView V3 Functional Core

LiveView code works best when you work in layers. Learn how to break off a core of pure functional code by following a design technique called CRC. Working with constructors, reducers, and converters, your functions can mirror LiveView's organization, leading to cleaner designs.
Subscriber content

4. LiveView V3 Function Components

Function components are some of the best new organizational features within Phoenix. These little constructs allow better layering and type protection by letting users extract concepts, express them in pure Elixir code, and call them in much the same way they would traditional HTML.
Subscriber content

5. LiveView V3 Components and Slots

Functional components allow a concept called slots. These nifty bits of custom code let you customize your own HTML-like constructs in surprisingly flexible ways. Work with us as we implement a slot to build a functional component to represent multiple widgets on the same page.
Subscriber content

6. LiveView V3 Live Components

Function components allow components to emit structured text like HTML. Live components are more powerful and also more complex. They let you build components that track and respond to their own stream of changes. Follow Bruce tate as he builds out a LiveView feature using both of these powerful features.

7. LiveView V3 Bindings

Bindings let users interact with LiveViews by allowing framework JavaScript to send messages to the server. Button clicks, form validation and submission are all examples of LiveView bindings. Best of all, we don't have to write any custom JavaScript to get fully interactive behavior! Join us to find out how it all works.
Subscriber content

8. LiveView V3 Plugs and Sockets

Elixir is all reduce and Phoenix is no exception. Traditional request-response applications reduce over a data structure called Plug.Conn. It's no stretch to say Phoenix applications are giant functions. LiveView too works with reduce, but over a data structure called the socket. Join Bruce Tate to find out how.
Subscriber content

9. LiveView V3 LiveComponent Life Cycles

Phoenix LiveView is a behaviour, and that means it works through inversion of control. The key to understanding how any such framework does its job is to understand the abstractions that drive the callbacks. This talk provides a subway train map as a metaphor for Phoenix life cycles.
Subscriber content

10. LiveView V3 Links and Push Navigation

Phoenix LiveView links are almost magical. They allow users to change the state of a page without a full reload, all the while maintaining a rich browser history and enforcing good security practices. Join Bruce Tate as he walks through how links work within a LiveView application.

11. LiveView V3 Life Cycles

Phoenix LiveView is a behaviour, and that means it works through inversion of control. As we did in the earlier Life Cycle video for Phoenix live components, we apply the subway map metaphor to the overall Phoenix LiveView. Join Bruce as he walks through how LiveViews work with a simple visual metaphor.
Subscriber content

12. LiveView V3 phx.gen.auth

The Phoenix framework has always had excellent generators. This version is no different. The excellent work at Dashbit has been incorporated into LiveView to install a token based authentication system that secures both LiveView routes and more traditional HTML based services. Find out how it all works.
Subscriber content

13. LiveView V3 Plugs and Authentication

LiveView applications must consider two kinds of requests. An initial traditional HTTP request provides the initial page download. Next, LiveView connects to the client page via sockets and then maintains an interactive conversation with the client. This video will help you understand the role of custom plugs in this process.
Subscriber content

14. LiveView V3 On Mount

LiveView allows two different kinds of navigation: traditional HTTP requests and live redirects or patches. Authentication frameworks must deal with both. The on_mount helper provides a way to secure requests that skip the entire HTTP machinery, providing a localized place to code policy.
Subscriber content

15. LiveView V3 Generation

LiveView has excellent code generation capabilities, and we take full advantage. In this video, we show you how to generate live views, complete with customized contexts and schema code. In later videos, we will customize this generated code for our purposes.
Subscriber content

16. LiveView V3 Auth Plugs

In this LiveView video, we build a custom authentication solution that restricts access to an admin account we specify. We build a plug that will enforce admin authority with a simplistic hard-coded feature, and weave it into the route.
Subscriber content

17. LiveView V3 Layers

In this LiveView 0.18.x code generation video, we look at the typical layers of generated templates and how they work with one another. We walk through schemas, contexts, live views, and components to see the way the layer systems work.
Subscriber content

18. LiveView V3 SVG Components

Build live graphics with Phoenix and SVG. In this LiveView video, we look at how to use LiveView components in conjunction with SVG vector-based graphics. Since SVG represents images with textual elements, LiveView can easily render them.

19. LiveView V3 Live SVG Components

In this SVG with LiveView video, we bring together the concept of live components and SVG graphics. We tie the two together with bindings within the SVG elements so that users can interact with elements by clicking on them.
Subscriber content

20. LiveView V3 Live Actions

In this LiveView video about live actions, we take advantage of the fourth argument in routes to establish a live action, one that we can access from within the LiveView and Live Components to specialize behaviour.
Subscriber content

21. LiveView V3 Specialize a Context

In Phoenix generated code, a context is a boundary API, one that wraps up a set of business features for interacting with an important concept. We group together a set of points into a puzzle, extending our context and making it more powerful.
Subscriber content

22. LiveView V3 Handling Events

In this LiveView video, we integrate our customized context into our LiveView by implementing our button presses to save the individual points that make up our SVG puzzle.
Subscriber content

23. LiveView V3 Lifecycle

In this LiveView video, we continue to improve our puzzle, improving the hover CSS and also customize the size of the view. We also reinforce the Live Component lifecycles, comparing a LiveView lifecycle to a subway map.
Subscriber content

24. LiveView V3 PubSub Overview

In this LiveView with PubSub overview, we look at the abstract problem we want to solve. The first of three videos on the topic describes the overall service in layman's terms, and prepares for the next two videos of PubSub in IEx and LiveView.

25. LiveView V3 PubSub in IEx

Phoenix PubSub is a service that works in LiveView, but also outside of it. Exploring this concept in IEx, the video walks through the process models for building a broadcast service that sends messages to subscribed parties.

26. LiveView V3 PubSub in Action

In this LiveView with PubSub implementation, we use PubSub to build an implementation that synchronizes one LiveView with another. The powerful service uses existing libraries to build a powerful feature in about a half hour.
Subscriber content

27. LiveView V3 Streams

Streams in LiveView allow users to view large collections of data without keeping them in memory. In this video, we walk through the streams in generated code and show how they are used to present data and keep it up to date through hooks.
Subscriber content

0. LiveView V2, Rewrite

This video marks the first of the new videos for Groxio's LiveView module. We'll update the LiveView content to version 0.17.5. We'll pull out some of the highlights to expect over the next few video releases.

1. LiveView V2, mix phx.new

This Phoenix LiveView video walks you through generating a new Phoenix application, creating a route, and a working LiveView. We leave some hints describing the abstractions you'll encounter as you build a full working interactive web application, a complete page with dynamic content.
Subscriber content

2. LiveView V2, the HEEX Sigil

In late 2021, Phoenix LiveView integrated the Surface API. These tools provide the same interpolation of traditional LEEX sigils, but with the added benefits of checking the structure of HTML. In this video, we take you under the hood to see how sigils are built, and how the H sigil is used.
Subscriber content

3. LiveView V2, Buttons and Handlers

LiveView works by using events that transform data. In this video, we transform data with the click of a button. This basic concept uses the techniques that LiveView depends on, inside and out. We build in a button by replacing a handle_info with a handle_event, relying on the same reducer.

4. LiveView V2, the OTP Abstraction

LiveView abstractions aren't wholely new. They are based on Elixir's OTP library. In this video, we show how OTP works under the hood by building a counter with recursion and a loop. LiveView uses OTP callbacks under the hood to establish state, render content, and transform state via events.
Subscriber content

5. LiveView V2, Behaviours and Callbacks

LiveView is behaviour. That means the code is a top-level program that someone else wrote that calls our code at strategic points. This LiveView abstraction video walks you through how the behaviour works and which callbacks LiveView implements from scratch, and which it borrows from OTP.
Subscriber content

6. LiveView V2, the CRC Abstraction

In this section, we walk you through another abstraction, Enum.reduce. In essence, LiveView is a reducer over application state. This video shows how the different event handlers fit together in a LiveView program, the role of mount, and how render fits into the framework.
Subscriber content

7. LiveView V2, A Functional Core

When refactoring an Elixir's Phoenix LiveView app, programmers must control complexity by developing their applications in layers. In this way, layers shield the developer from complexity by limiting focus to one layer at a time. This video introduces a core layer.
Subscriber content

8. LiveView V2, HEEX Template Files

Another Phoenix LiveView refactoring tool is the HEEX template. Programmers can break their code out of the mainline module to isolate development of user interface concepts into a separate file. This is the role of the HEEX template. This video shows how the `use` directive and template files work.
Subscriber content

9. LiveView V2, Function Components

Historically, LiveView provided two kinds of components, stateful and stateless components. Recently, the Phoenix team took advantage of the excellent Surface framework to add function components. This video walks you through the expression of components using functions.
Subscriber content

10. LiveView V2, Stateful Components

LiveView offers stateful components to combine HTML with state change. These components are perfect for a tabbed notebook or a counter button. We'll walk through the implementation of a specialized counter. This preliminary implementation will serve as the basis for several refactorings.
Subscriber content

11. LiveView V2, Slots

When you're using Phoenix LiveView, sometimes you need places to put custom HTML content. Enter the slot. Say you are building menu control. A slot would let you custmoize the contents of each element of the menu. Slots are places for dynamic content within a Phoenix component, and in this video, we show you how to use them.
Subscriber content

12. LiveView V2, Slots and Collections

Phoenix LiveView developers often need to render custom collections of things. By letting a component's user customize the contents of the control, more flexibility is possible. With a slot, you can render a tabbed control and pass in the contents of each notebook tab. Then the control could focus on showing and hiding the tabs.
Subscriber content

13. LiveView V2, Lifecycle

The magic of Phoenix LiveView is in the lifecycle. When the browser loads a page, Phoenix sends down exactly what's needed to make the changes.
Subscriber content

14. LiveView V2, Schemaless Changesets

In LiveView, sometimes it's helpful to collect structured input from multiple fields in a combined form. The model for dealing with this kind of data is the changeset, and typically they are backed with an Ecto database, though they don't have to be. We'll walk you through how to handle schemaless changesets with Phoenix.
Subscriber content

15. LiveView V2, Forms

In Phoenix, as with other web frameworks forms represent groups of inputs. This video walks through the events, tags, and coding strategies for dealing with forms. We'll walk through creating and validating forms, complete with error tracking and event handling. We'll show you how it all works together.
Subscriber content

16. LiveView V2, Submitting Forms

In Phoenix LiveView, once you've handled the validation use case, you can move on to submitting form data. In this video, we'll submit a form, and apply the changes to our counter control. This code will work with schemaless changesets, so it will plug into our multi-counter nicely.
Subscriber content

17. LiveView V2, Refactoring with Boundaries

Phoenix LiveView applications are so simple you'll often want to put all of your code in one place, but you should resist your impulse to do so. When needed, you can refactor your code to handle uncertainty and deal with external interface. This video shows you how.
Subscriber content

18. LiveView V2, Layers

In this video, we explore the layers of a LiveView application using the techniques defined in Designing Elixir Systems with OTP. In particular, we explore where core and boundary layers play in typical applications.
Subscriber content

19. LiveView V2, Managing URLS Via Patch and Redirect

Single page applications introduce features other applications don't have, but also challenges. One such challenge is how to deal with URLs as the state of the page changes. LiveView has the answers in Patch and Redirect. We'll work with them in this video.
Subscriber content

20: LiveView V2, PubSub

Publish and subscribe is a tool for working with applications which must communicate. Rather than each process connecting directly to another, they connect through intermediaries. This pattern allows publishing of events which can in turn hold data. In other words, PubSub is perfect for LiveView. This video shows you how.
Subscriber content

1: LiveView V1, 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 V1, 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 V1, 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 V1, 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 V1, 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 V1, 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 V1, 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 V1, 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 V1, 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 V1, 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 V1, 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

12. LiveView V1, Push State Navigation

Some frameworks like LiveView make it difficult to manage URLs. Phoenix can handle such requirements easy with a couple of options for push state navigation. In this section, we maintain code separation, but keep a seamless experience by using push state navigation.
Subscriber content

13. LiveView V1, Generate Phoenix Contexts

Frameworks like Ruby on Rails made code generation famous. These kinds of features are important when you want to maintain the flexibility of custom code, but don't want to write every single line yourself. In this section, we generate a backend context to help us manage high scores.
Subscriber content

14. LiveView V1,Refactor a LiveView

In this episode, we refactor our memorization game to begin to fold in the scoring system. We need to introduce a second form. Since business requirements are not always straightforward, walking through the integration of a sophisticated system into a simpler one is a powerful concept.
Subscriber content

15. LiveView V1,Use Phoenix Contexts

With the forms and scoring system integrated, we're ready to integrate the Score context we built earlier. This video has plenty of practical advice about where the layers in the overall system should live, and how the basic integration points in Phoenix contexts and live views work together.
Subscriber content

16. LiveView V1,Phoenix PubSub

Communicating within a web page uses events, but communication across processes demands a different kind of infrastructure. Enter Phoenix PubSub. A publish subscribe system is ideal for web applications, where services often must reach groups of users. The publish-subscribe pattern is ideal for this task.
Subscriber content

17. LiveView V1, Working With Constraints and Migrations

In this video, we begin to integrate the readings we generated earler into our picker. Along the way, we begin to establish the flow for adding features in Phoenix. We will further cement the ideas of a boundary layer, how to improve our validations, and integrate relationships into our existing application.
Subscriber content

18. LiveView V1, Integrating Generated LiveViews

In this episode, we start puttnig the finishing touches on our memorization game. Along the way, we modify the typical Phoenix layout, and build some context functions for next and previous for our literary passage picker. We will also need to tie our high scores to individual passages.
Subscriber content

19. LiveView V1, Integrate High Scores

This video integrates high scores into our picker. Like many of the videos in the LiveView series, we're switching from a new-application flow to a new feature flow. We need to integrate the scores to the picker, and also let our picker flow into the main game.
Subscriber content

Bonus: Schemaless Changesets

This video is a more generic treatment of the concepts we covered in Video 5, Schemaless Changesets. We talk about the concepts you can use to validate a form independent of an Ecto database.
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