Hi all,
In my spare time I was reading about Astro (yet another Javascript framework) and I stumbled across something they call The Island Architecture [1] [2].
Sounds to me like rendering multiple live views in a page.
What do you think about the architecture and using live views to mark islands in pages?
Cheers!
[1] Astro Islands 🚀 Astro Documentation
[2] Islands Architecture
Looks like it’s similar to LiveComponent. You can render as many LiveComponents as you want in a Liveview and it can encapsulate its own state and logic.
It’s not really related because it’s a concept for view transition api.
It defines parts of page that will somehow stay in place (or transition) when the page goes to the next state.
Astro can do it because it’s SPA and application knows both previous and next state, it can take screenshot for transition.
Currently it’s not working for MPA, but maybe it will, because they are trying to support MPA as well
All that screenshotting is done by the view transition api. How things are animated is handled in css. The only requirement that’s there for JS is that it needs to update the DOM. Something as simple as pjax and alternatives can do that though even with a technically MPA/server rendered page.
Yes it’s done by css, but the transition call happens when the DOM is modified… I thought MPA weren’t yet supported by the view transition api.
From this page… Smooth and simple transitions with the View Transitions API - Chrome for Developers
tldr;
Additionally, although the current implementation targets single page apps (SPAs), this feature will be expanded to allow for transitions between full page loads, which is currently impossible.
If you can update the DOM with some JS in a callback you’re set. That can be done for a lot more systems than what I’d consider a SPA.
So You think it might be easily set up in Phoenix Liveview? When the DOM is morphed? or when we navigate, patch, redirect, or even phx-click?
If LV provides a way to setup the view transition around its code of applying changes using morphdom, then yes. It likely requires some changes within LVs js itself, but I wouldn’t expect that to be an impossible task.
We need the right hook 
Yeah, probably another dom callback besides onBeforeElUpdated or something like that.
But redirect might not work…
Is shouldn’t matter how the dom is updated. In the end anything LV does should boil down to “and now morphdom applies all its updates”. That’s the same no matter if it’s due to a patch, redirect, assign change, …. LV already has events emitted for navigation events. These are likely the points where view transitions are expected. The only issue is that you cannot “enable” view transitions across multiple event listeners. It needs a callback.
It has been discussed recently in this post…
Not for now, but there is hope
The offer is still open if someone wants to figure out with interfaces we’d need for user-land to support view transitions
© Copyright Elixir Forum | Terms | Privacy & Cookies
