matt-savvy

matt-savvy

Fixing My Biggest SPA Pet Peeve In Phoenix

Hey gang, recently updated my core components and generated live views to fix a big frustration of mine. Wrote up a post here:

Does this bother anyone else? Is there appetite for updating the Phoenix templates to support this better?

Most Liked

GrammAcc

GrammAcc

Yeah, “all” is a hyperbole I guess. :slight_smile: There’s always going to be a lot of transient or session-related state for any interactive app. Things like the state of form fields in a bulk edit workflow should be preserved so the user doesn’t lose work if they accidentally close the page, but not in the URL. Using the URL for something like that could even present a security/compliance risk since URL params show up in network logs.

I think my frustration with SPAs wrt URL state comes from the fact that a lot of things that could be easily stored in URL state are often not simply because of the patterns that SPA frameworks encourage. The common example is a pagination param like page=2 being sent to the BE apis to load the page data on the “next page” button click, but not exposing that to the browser URL. If the user leaves the page, they have no way to get back to whichever page they were on without clicking through different pages or maybe using the jump-to-page input (if it’s implemented on that page). This is especially bad if the app isn’t set up to handle client-side routing and load components based on the URL path because then the user gets redirected to the homepage, so they have to click all the way through the app to get back to the view they were on, then page through it. This gets worse when we start adding other basics like sorting and filtering to the view. :slight_smile:

Personally, I think the ability to link directly to a particular view of data on a website is one of the superpowers of the web. We lost a lot of things when we moved from primarily native desktop UIs to browser-based UIs (easily implemented undo/redo for example), but the web does make some interaction patterns easier out of the box, and tunneling directly to a specific view with specific state at any arbitrary point in the application is one of the things the web can do easily that native apps need special consideration from the engineer to support.

Cheers!

krasenyp

krasenyp

That’s a good article and touches on something which bothers me deeply - the complete disregard for semantic markup. I mean, do it for the visually impaired people who might use assistive technology. You don’t have to use aria-* attributes, proper semantic markup goes a long way. When I see a button that does navigation or if/else in template which renders an anchor or a button, I get goosebumps. There are many other cases, I’m sure everyone has encountered at least one.

FlyingNoodle

FlyingNoodle

But this isn’t the same thing.

You can replicate the “click entire row” behaviour while still respecting accessibility. Check out the free tailwind course: Build UIs that don't suck - Tailwind CSS

In this case, the solution is to put some position classes on the table row and then making an <a> element that overlaps the entire row.

Where Next?

Popular in Blog Posts Top

marcelo
Long story short, over the past years we’ve been scaling our operation quite a lot at Unbabel. Most of our codebase is Python and some of...
New
jordiee
https://medium.com/@jpiepkow/distributed-state-is-hard-5a0d384c2f3c
New
aymanosman
This is a very short article about using AWS Systems Manager Parameter Store to load secret configuration in a simple way.
New
sashaafm
How to use the blogs section You can post links to your blog posts either in one of the Official Blog Posts threads (like this one), or, ...
296 25433 131
New
paulanthonywilson
This is an overview of different ways to try and kill an OTP process (in Elixir) and the behaviour to expect when that happens. I know th...
New
brainlid
OTP 26 was released and the Elixir 1.14.4 builds have been updated! Erlang OTP 26 changed how map keys are sorted, or not sorted actually...
New
ragamuf
Does the world need another How to create a blog article? Maybe not. But then again, creating something out of nothing is what we love....
New
ryanrborn
A long-running GenServer holds orders, positions, strategy state, and operational flags for a system trading real capital. The post walks...
New
bram209
Hello everyone, I just published my first blog post ever. I am learning Elixir, OTP &amp; Phoenix and wanted to start a blog for a while...
New
rlopzc
Use the new log handlers to plug Slack or any other provider into your logging system. https://rlopzc.com/posts/integrate-slack-into-the...
New

Other popular topics Top

aadeshere1
I have a another noob question about loop. Since elixir is immutable, while loop is not directly possible. total = 10 while total != 0 ...
New
Nvim
Anybody knows a comprehensive comparison of Django and Phoenix, thanks for the help. Where are they similar? Where do they differ the m...
New
greenz1
I have a phoenix application from which a user can download multiple(5-6) files of size 1MB. I couldn’t find anything related to sending ...
New
minhajuddin
I have seen a lot of code which picks the first element from a list using Enum.at(0) instead of List.first. Is there a reason why people ...
New
josevalim
Hi everyone, One of the features added to Elixir early on to help integration with Erlang code was the idea of overridable function defi...
New
nobody
Hi! In PHP: $_SERVER[‘SERVER_ADDR’] - in Elixir? Searched the docs for ip address and the web, no good results. Thanks!
New
jason.o
In the code below, if the create action is not set to accept “extra_key” as an input, it errors out with a message shown above. Is there ...
New
komlanvi
Hi everyone, I was playing with phoenix liveView but I run into an issue. I have a form and want to validate each input text when the te...
New
Qqwy
Update: How to use the Blogs &amp; Podcasts section You can post links to your blog posts or podcasts either in one of the Official Blog...
3271 127089 1222
New
dokuzbir
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New

Latest on Elixir Forum

Elixir Forum

We're in Beta

About us Mission Statement