Qqwy

Qqwy

TypeCheck Core Team

I’ve been building some projects using Phoenix LiveView, and have read the source code of quite a few more projects made by other people (thanks, Phoenix Phrenzy contest!).

One thing I am seeing, is essentially a dichotomy in two approaches to working with state and interactivity, when working with LiveView-powered applications that are essentially ‘single-page’ (i.e. rather than one or multiple pages with multiple independent LiveView snippets, the whole interface is driven by LiveView).

Approach 1: “Shallow State”

In this approach, we have many nearly-independent LiveViews/ (stateful) LiveComponents that mostly work with their own socket.assigns directly.

Because socket.assigns is a map, and because all of these components are stateful, the data that is stored and the communication between them is mostly ad-hoc, i.e. non-normalized.

Approach 2: “Deep State”

In this approach, we have a single LiveView with potentially multiple nested (stateless) LiveComponents that contains the state in a (deeply) nested map in its socket.assigns. Most or all changes that come in travel through this single LiveView’s handle_event and potentially update (some nested part of) its socket.assigns. The socket.assigns consists of one or a few Elixir Structs, which makes it very clear what kind of data to expect, i.e. the data is normalized.

Using this approach, it is possible to extract most of the domain-logic out to its own separate module(s), making the code easy to test. Of course, you do end up with more code since you add a/some layer(s) of abstraction between the LiveView-module and the place where the actual state-transition logic happens.

This kind of architecture has strong similarities with first-order functional reactive programming (also known as ‘the Elm Architecture’(TEA)).


Now, I don’t know which approach is better suited for what kind of situations, but I find it very interesting to see that there are these two sort-of opposed kinds of working with LiveView going on, and I’d love to start a discussion on the pros and cons! :grinning:

Showing Posts 5 to 1

sodapopcan

sodapopcan

I’ve been thinking about this a lot over the past few days and was happy to find this question but a bit disappointed in the lack of discussion here. Maybe I’m not looking far enough back through the forum (very possible).

Thank you @Qqwy for making me aware of the Phoenix Phrenzy contest! This is super helpful as I’m just working on my first substantial project in Phoenix with LiveView.

I’ve been working with nested state which is nice with components but then ran into the temporary_assigns issues @mbuhot pointed out. Is anyone aware of any way to achieve this with nested state or it’s just plain impossible right now?

Regardless, I’m likely going to be converting to flat state when I get back to it tonight. My desire to nest was largely due to having a noisy bloated mount/3 and I was able to write a query with preloads to get all my initial state in one call. But then I found this solution in the winning submission to Phoenix Phrenzy which I find compelling: georacer/lib/geo_racer_web/views/race/view_model.ex at 6a54ed21f3a9705da72fc92699a5932b1071f798 · zkayser/georacer · GitHub

chrismccord

chrismccord

Creator of Phoenix

Deep diffing shipped many weeks ago :slight_smile:

Qqwy

Qqwy OP

TypeCheck Core Team

During @chrismccord’s Keynote-talk at ElixirConf.EU V yesterday he told us about the new changes and additions that are happening to LiveView.

One important thing he mentioned, is that there will be better diffing-support for deeply-nested states. Previous versions of the LiveView assigns-diffing would not be able to look deeper into the keys of nested maps (and especially inside structs), meaning that code like this:

<div>
  <span> <%= @post.author %> </span>
  <p> <%= @post.content %> </p>
</div>

would be re-evaluated as a whole every time one of the fields inside assigns.post would change. This is now (in the newest version on master; the latest kinks were ironed out during these last couple of days) no longer the case.


So the tl;dr: Deep states will be much better supported going forward, which means that we as developers have more flexibility in the approach we take.

mbuhot

mbuhot

I’m just learning LiveView through the PragStudio course which is excellent so far.

The temporary_assigns feature makes it feel like the framework is pushing users towards the shallow state style. Can you indicate that a nested map key is a temporary?

I found it difficult to track which assigns are available within the template without some declaration of the data structure, so I’ve adopted a convention of an inner Assigns module within the LiveView module that declares a @type and provides functions for managing the state:

Example
defmodule MyApp.MyViewLive do
  use MyApp, :live_view

  alias MyApp.SomeContext
  alias MyApp.SomeContext.SomeSchema

  defmodule Assigns do
    @type t :: %{
            items: [SomeSchema.t()],
            filter: String.t()
          }

    @spec new([SomeSchema.t()]) :: t()
    def new(initial_data) do
      %{
        items = initial_data
        filter = ""
      }
    end

    def temporaries() do
      [items: []]
    end

    def with_filters(socket, items, filter) do
      socket |> assign(items: items, filter: filter)
    end
  end

  @impl true
  def mount(_params, _session, socket) do
    initial_data = SomeContext.get_some_data()
    socket = assign(socket, Assigns.new(initial_data))
    {:ok, socket, temporary_assigns: Assigns.temporaries()}
  end

  def render(assigns) do
     ~L""" access @items etc here """
  end

  def handle_event("some_event", %{"filter" => filter}, socket) do
    data = SomeContext.get_some_data(filter)
    socket = socket |> Assigns.with_filters(data, filter)
    {:noreply, socket}
  end
end

For the relatively small examples I’ve followed so far, this has been helpful to allow me to treat the Socket.assigns map as a data structure with well defined operations. Looking forward to some more complex examples with Components :slight_smile:

Qqwy

Qqwy OP

TypeCheck Core Team

Hi everyone! Are there more people who have given this some thought, or am I too early with this discussion? :upside_down_face:

Let me just ask you, then: In what way do you manage state in your LiveView application? :grin:

— All posts loaded —

Where Next? Top

Trending in Discussions Top

cblavier
Hey there, It’s been more than a year since we started using LiveView as our main UI library and building a whole library of UI componen...
New
mudasobwa
I am happy to introduce the very α version of the new programming language compiled to BEAM. Welcome Cure. It has literally three kille...
New
budgie
A little off-topic, but I feel like people here have a good head on their shoulders. I used to be quite good at making software. Was luc...
New
axelson
Hi there! :wave: @frigidcode and I (but mostly him) have been running an Elixir Book club, we’re almost done with Designing Elixir Syste...
New
achempion
I’ve been using Emacs as my main code editor for more than a two years. It’s a custom build version although I’ve tried doom emacs and sp...
New
budgie
I love Elixir. It’s one of 2 programming languages I’ve ever fallen in love with. But I don’t use it anymore. Serverless was the promis...
New
jtormey
Lately I’ve been thinking about how to organize components as a LiveView application grows. One of the pain points I’ve found (for myself...
New

Other Trending Topics Top

GenericJam
Edit: 2026 May 15 - This post is archived. Mob is alive!! Main docs: mob v0.7.11 — Documentation A bit of explanation for the slightly c...
New
garrison
Hobbes is a low-level distributed database for the Elixir programming language. Hobbes provides a simple, safe, and scalable storage lay...
New
KristerV
Hey. Is there anyone here who creates agents in their apps? Not talking about using agents, but creating them. I’m finding it pretty diff...
New
mcass19
ExRatatui lets you cook up rich terminal UIs in Elixir, powered by Rust’s ratatui via Rustler NIFs. Build interactive terminal applicatio...
New
webofbits
With AI doing more of the implementation work, I’ve been wondering how much coding I should deliberately keep doing myself. My main conc...
#ai
New
georgeguimaraes
Just published claude-code-elixir, a plugin marketplace for Claude Code with Elixir support. These are the plugins I’ve been using for my...
New

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews