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: Sept 1, 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.

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

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.

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.

Video

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

Video

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

Video

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

Video

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

Video

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

Video

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

Video

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

Video

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

Video

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

Video

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

Video

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




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