brainlid

brainlid

You are storing some Phoenix LiveView state in the browser. You want to retrieve that saved state as early as possible to improve the user experience.

The approach we used earlier waits for the LiveView to request the client to send the data. In your situation, you know you want the data, so why wait around to be asked for it? Can you have it automatically pushed from the client without being requested? Can you do it in a way that is reusable for other pages and other LiveViews and not just this one page?

This recipe improves the design and even makes it work for multiple LiveViews in the same application!

Showing Posts 1 to 2

derek-zhou

derek-zhou

Very nice. I always pass at least 2 pieces of info in params: the locale and the timezone of the client; there is no better way to pass them.

The params can be either an object or a function returning an object. The second way is the best as used in the article. because during the LV session you could change any of your stored value so they would need to be re-evaluated in run-time, this is why it need to be a function.

ani

ani

Note that when the live view is mounted via a live_redirect (vs initial full page render), the element node passed to the params function will not have the full subtree, so node.querySelector("div[data-state-restore='true']") will return null and the restore data won’t be available in the connect params.

— All posts loaded —

Where Next? Top

Trending in Blog Posts Top

rhcarvalho
At the heart of every Phoenix application is the often “invisible” HTTP server layer. For over a decade Cowboy has served the community ...
New
pckrishnadas88
Hey everyone! :waving_hand: I’ve published Part 7 of the Building Distributed Systems in Elixir series, where we build core distributed ...
New
mudasobwa
So, instead of wasting my afternoon arguing with anonymous handles on X, I turned to my trusty, soulless assistant and said: “Listen, ple...
New
pckrishnadas88
I’ve published Part 4 of my Elixir distributed systems learning series. This part explores process linking using low-level primitives di...
New
abreujp
New article: Elixir Project Structure — From mix new to a Growing Codebase I’ve published a new article in my Elixir learning series on d...
New
zorn
An educational side project in Elixir, Phoenix, and Tauri. I share what I learned while wiring Automerge into the BEAM, including how I s...
New
jola
The way Phoenix is set up adding a CDN sub-domain for serving static assets, without worrying about the main dynamic content, is incredib...
New

Other Trending Topics Top

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
garrison
Hobbes is a low-level distributed database for the Elixir programming language. Hobbes provides a simple, safe, and scalable storage lay...
New
marciok
Hi there! We created Gust: A task orchestrator inspired by Airflow. For those who have never heard about Aiflow, it’s a Python-based wor...
New
jimsynz
Beam Bots (or just BB for short) is a framework for building fault-tolerant robotics applications in Elixir using familiar OTP patterns. ...
New
Dmk
Xamal is a deployment tool for Elixir apps that deploys native releases to bare metal servers over SSH. It’s a port of GitHub - basecamp/...
New
Damirados
Hello everyone. After busy few months I am happy to announce v0.1.0 of Emerge & Solve. They are GUI (Emerge) and State management (S...
New

We're in Beta

About us Mission Statement

Options

Thread Display Mode




Thread Preview

Skip Thread Previews