LiveView V2 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!




Release Schedule: 2020-07-15 through 2020-09-01

Version: Sept 1, 2020


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




Programmer Passport LiveView V2






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.

Itinerary


1. LiveView Basics

2. LiveView Events

3. Pubsub

4. Organization

Why an itinerary?

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

Description

NOTE! This version of the LiveView content is under development. We’re starting by updating all of the videos. Then, we’ll update the written content and links. The updates will tentatively be compldted by Feb 1, 2021.

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.

History

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 <u>Metaprogramming Elixir</u>, 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.


Videos

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.

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.

Video

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

Video

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.

Video

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

Video

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

Video

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

Video

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

Video

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

Video

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

Video

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

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.

Video

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

Video

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

Video

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

Video

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

Video

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

Video

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

Video

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

Video

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

Video

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

Video

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

Video

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

Video

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

Video

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

Video

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

Video

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

Video

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

Video

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

Video

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

Video

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

Video

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 V2




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.

Projects

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".