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 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.
The itinerary is a virtual guide. This optional list describes the highlights of each release to maximize your learning time.
LiveView Version “0.18.x” for Phoenix 1.7. Phoenix is the web development framework for Elixir, and LiveView is a Phoenix service that allows interactive page flows without JavaScript. The library is extremely productive, highly scalable, and fast. It’s no wonder that it is one of the most highly paid web frameworks in the world.
LiveView has a reputation for being hard to learn, but worth it for several reasons. Components drift away from traditional Elixir syntax. You can’t trace LiveView through a pipeline of functions like you can with native Phoenix. Don’t worry, though. This video series will help you make the breakthroughs you have been seeking by walking you through the rough spots step by step.
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 open source project from the very beginning, and is rapidly gaining notoriety 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.
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.
In 2023, Groxio revamped this LiveView course. In this optional video, we walk existing Phoenix and Groxio customers 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.
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
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.
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
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
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
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.
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
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
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
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.
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
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
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
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
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
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
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
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.
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
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
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
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
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
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.
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.
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
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
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.
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
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
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.
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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.
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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.
These resources will get you on the path to learning with background information, tooling and exercises.
You decide how deep to go. These resources are exercises and projects to cement your learning.
These resources will help you put your new knowledge into context so you'll be better at your everyday job.
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".