Giovanni

Finally did it bsky.app/profile/gfra...

Here's the last call site if you want to check the code yourself: github.com/phoenixframe...

JS.set_attribute/2 under the hood runs DOM.putSticky(el, name, operation) which stores the "operation" function in a private key in the DOM element.

While patching, DOM.applyStickyOperations(toEl) re-plays all stored DOM operations which should stick through patching!

Think of CSS transitions, caret position, scroll state. All is preserved while efficiently updating the DOM.

morphdom `onBeforeElUpdated(fromEl, toEl)` callback allows tapping into the transform. LV uses it to re-apply DOM "sticky" operations to the toNode, the "target" state.

LiveView server-side renders new HTML, and sends to client the smallest diff necessary to update the client DOM to match the server state

The DOM patching is done by morphdom, which transforms the existing DOM tree to match a new DOM tree in order to preserve internal state of the original elements

TLDR; LiveView "sticky" DOM operations re-run when DOM is patched with new HTML

Demo: gio.wtf/demos/sticky...

Here's the explanation of how it works:

Why LiveView DOM patching doesn't overwrite attributes updated through JS commands? This is one of the top questions I received after my "mastering live view reconnects" talk.

I finally have time to explain it 😁

Answer and link to demo in the thread 🧵

Phoenix | Technology Radar | Thoughtworks We continue to have positive experiences with Phoenix, a server-side web MVC framework written in Elixir. Phoenix builds on the rapid application development and developer [...]

Cool to see #PhoenixLivewView featured on latest @thoughtworks.com Tech Radar

“well-suited for building highly interactive frontends without the need for a full JavaScript framework”

Avoiding unnecessary JS bloat is key to achieve high performance at low cost

www.thoughtworks.com/radar/langua...

Great initiative from jump.ai 👏

Consider sponsoring to Wikipedia today (:

YouTube video by Code Sync Phoenix LiveView: Mastering Reconnects for a Seamless User Experience -Giovanni Francischelli

I believe this is a solved problem in the sense that the tools are there. DX could be improved tho to make it more obvious tho: www.youtube.com/watch?v=AnbW...

Would love to hear your thoughts. And totally agree with Elixir happiness 😁

Elixir Radar 481

Elixir Radar issue 481 is out! 📣

You can read it here: buff.ly/gJLStkm

This issue comes with content from @josevalim.bsky.social @solnic.dev @wojtekmach.bsky.social @gfrancischelli.bsky.social , Chris O'Donnell and Baptiste Chaleil. Thank you!

#ElixirLang

Thank you ❤️

I’ll try to give it a proper answer when I get some free time

Thank you 💕!! I think a higher level API for this should probably be possible 🤔

YouTube video by Code Sync Phoenix LiveView: Mastering Reconnects for a Seamless User Experience -Giovanni Francischelli

My talk at #ElixirConf is live 🎉

100% biased but I highly recommend watching it if you are doing #LiveView #Elixir 😁

I explain not only how to fix reconnect issues, but even how to eliminate them with some software design adjustments that also improve DX and UX!

www.youtube.com/watch?v=AnbW...

One of my fav talk from this conf. Great stuff 😁

Espero q tenha se divertido tanto quanto eu 😁

So for the "Pure UI" logic, where to draw the line between using JS commands versus relying on LV assigns which might make UX suffer if connection is slow? That's the criteria I'm trying to come up with, so devs can use it to guide design decisions. What state should be tracked in the client only?

Heey thanks for engaging! Optimistic UI covers a lot of what I'm looking, but not everything. Some UI interactions have nothing to do with accessing remote data. But lots of LV developers fall in the mistake of using assigns to control some piece of UI that could be controlled by JS commands

Thanks! Didnt know this video. In my experience there’s usually a way to leverage JS cmds to drive the UI and fix UX when server feels distant. I’m trying to arrive at a definition/rule that helps identifying when this is possible. If u dont mind sharing some specific example would be very helpful 🙏

Heey Petar, in your experience how does UX gets impacted negatively? Did the JS commands help? Thanks you for sharing 🙏

Senior Fullstack Engineer (EU) EU

We are hiring an #elixirlang engineer in the EU (UK, Ireland, Netherlands, Spain or Portugal).

No need to already know Elixir. We will teach you. Want to work on an amazing team?

Go here: job-boards.greenhouse.io/workera/jobs...

If you have questions on the role. DM me.

See you there! elixirconf.eu 15-16 May 2025

Very excited to share I'll be presenting "Phoenix LiveView: Mastering Reconnects for a Seamless User Experience" at @elixirconfeu.bsky.social 😁

#elixirconfeu

GitHub - samaraoliveiram/poc-liveview-embedded Contribute to samaraoliveiram/poc-liveview-embedded development by creating an account on GitHub.

Hey something like it yes, there's a bare minimal proof of concept here github.com/samaraolivei...

With those other interop tools being available, don't you think saying *no JS is a core idea* isn't very accurate?

Thanks mate! What are your thoughts on js hooks and JS.dispatch then, aren't they encouraging to write JS?

Personally I see Phoenix.JS just as a convenience layer of interoperability plus composability goodies.

Hey Josh, do you mind saying why you consider *no JS* a core idea? Asking because I don't really see it, and I'm curious to understand how exactly our experiences diverge.

Get Rid of Your Old Database Migrations Are database migrations good? Probably, but are we using them in the right way? In this post, I write about how I think about migrations and what I'm doing to mitigate some of their shortcomings.

Thanks @whatyouhi.de for this blog post andrealeopardi.com/posts/get-ri... ❤️

I vaguely remembered seeing this before, today it saved us time 😁

Seems like #LiveView is way more popular tag