[HN Gopher] Defaulting on Single Page Applications ___________________________________________________________________ Defaulting on Single Page Applications Author : 0xblinq Score : 46 points Date : 2023-03-27 20:47 UTC (2 hours ago) (HTM) web link (www.zachleat.com) (TXT) w3m dump (www.zachleat.com) | pqdbr wrote: | This article was the first time I learned about | https://developer.chrome.com/docs/web-platform/view-transiti.... | | It looks really great, and I think Rails Hotwired / Turbo could | really benefit from this API. | | Of course, someone beat me to it: | https://dev.to/nejremeslnici/how-to-use-view-transitions-in-... | kerblang wrote: | Nobody ever talks about the monolithic all-in-one framework | upgrade? You really haven't come to terms with SPA until you've | done the all-in-one framework upgrade, man. It's like running | thru a hailstorm of razor blades | benatkin wrote: | > You can't JavaScript your way out of an excess-JavaScript | problem. These large JavaScript bundles are costly to site | performance. | | I was gonna say: | | "This is what some Hugo fans might say, but 11ty and Astro | suggest otherwise." | | Then I saw the author of the post is the author of 11ty. | | Still, the middle ground is being pursued by Svelte and Fresh. I | prefer something less frameworky though. | nfRfqX5n wrote: | > Inclusive and robust by default, Energy-efficiency, Privacy- | focused I imagine trying to use these reasons with executives and | getting laughed out of the room | slaymaker1907 wrote: | I think the view transitions API will be good, but it's currently | only available for Chromium browsers so it is not really a | competitor to SPAs for the time being. I'm also kind of opposed | to really broad generalizations like this since what is most | effective currently kind of depends on what you're building. A | calculator built as an MPA would be kind of ridiculous. | Ralfp wrote: | I've liked the transitions demo from Chrome guys, but it has | barely any support yet. | endisneigh wrote: | The SPA vs server side rendered page debate is so exhausted at | this point. The tech is such that they're nearly equivalent if | you have a good team that understands the appropriate technology. | | You can have an SPA with a proper router that respects page | history, loads html fragments from a server, remembers positions | on reload, etc. | | You can also have a server side rendered page sprinkled with | JavaScript and use web sockets to create dom element level | transitions and interactivity | | The "MPA" described in the article has always been possible in a | "SPA." It's more about the UX of your app than anything else | the_gipsy wrote: | > You can have an SPA with a proper router that respects page | history, loads html fragments from a server, remembers | positions on reload, etc. | | In theory. | ec109685 wrote: | Your second paragraph essentially is creating a little mini | browser, and you have to make sure to get every detail right or | you're back to the uncanny valley of SPA web _pages_. | Performance can even be worse with SPA "page" navigation if | multiple round trips are needed for the data on the next page. | | SPA's should be used web _apps_ (think slack or Asana), and | stick to sever rendered for web pages. | EGreg wrote: | Is this an SPA? | | https://intercoin.app | slaymaker1907 wrote: | I think you've highlighted a big problem with SPAs in that | they can encourage multiple API calls per user action. IMO, | you should probably have a single endpoint per thing a user | might do that might combine several conceptual APIs. i.e., if | you have an API to add something to a list, have that API | also return the current list. | simonw wrote: | How do you make sure your SPAs work well with screen readers? | endisneigh wrote: | More or less the same as a regular page - use aria labels, | update names and titles of elements, make sure the focus is | set correctly, etc. | taeric wrote: | And try to be frugal on the tags you make. | | Component design is the enemy here. Just take a peak at the | nav elements in many designs and see how embedded the divs | go. | sebazzz wrote: | Are you referring to styled-components and the like? What | is exactly the problem with that?* | | * except media queries, those seem hard | zdragnar wrote: | Many prebuilt component libraries design for maintenance | and all possible uses over being frugal. The actual | markup can get really ugly with i.e. MUI. | | When you put in the effort to build the components | yourself, you aren't trying to be everything for | everyone, so you get to skip a lot of the cruft. | taeric wrote: | Exactly this. Is a large reason to not try to build the | most general components, either. Build what you need, | where you can. | | That all said, I also have to ack that the libraries are | going to be hard to beat for speed of delivery. :( | taeric wrote: | The idea of components is fine. I should have been clear, | there. The problem typically comes from the authoring | tools. To have the hooks necessary to put the decoration | that we want, in html, they typically add a ton of div | elements. When, realistically, you could almost certainly | get what you want with very minimal markup. | | And being fair, I'm sure this has gotten a bit better in | recent years. But the Rube Goldberg efforts people would | put in to get the "flow" of the browser to automatically | place things in locations that were easily calculated is | frustrating. | chatmasta wrote: | Screen readers don't read the hierarchy of elements back | to you. They find the text that renders inside the | elements and read it out loud to you. And for navigating | between elements, the level of nesting is much less | relevant than having the correct aria-role assigned to | each element that contains an interactive component. | fks wrote: | An incredible example of what's suddenly possible with the View | Transition API: | https://twitter.com/charca/status/1637832314364497920 (Built with | Astro) | thrill wrote: | Quit using these ginormous frameworks and libraries. Vanilla | Javascript is all you need. | graypegg wrote: | The organizational and maintainability benefits you get from | using something like react far out weigh the actually quite | minor file size bump. That is the least of your worries. | | source: myself; someone who moved to working on a project | entirely written in vanilla JS... which has just become its own | bespoke framework. | WillPostForFood wrote: | I agree, but note that we are talking about a benefit that | accrues to the developer, not the user. | slaymaker1907 wrote: | It also benefits users in that you can implement more | features and fix more bugs in less time. Performance is a | feature and what that means is that while you can't just | completely ignore it, it's not always the highest priority. | simonw wrote: | I think it's worth calling out accessibility directly, in | particular screen reader compatibility. | | I have yet to find a great guide to making SPAs work well with | screen readers that goes beyond "read the ARIA spec" - but the | ARIA spec isn't actually that useful for understanding the nuts | and bolts of how you should build things so that e.g. screen | readers know when the SPA has navigated to a new page, or loaded | fresh content in a smaller page region. | | My understanding is that MPAs are, by default, massively more | accessible than SPAs. But my experience is that SPA authors | rarely seem to indicate that they care. ___________________________________________________________________ (page generated 2023-03-27 23:00 UTC)