SPAs, Shared Aspect Transitions, and Re-Assessing Technological know-how | CSS-Tips


Web Development


Nolan Lawson sparked some dialogue when he explained a recognizable shift absent from one-page applications (SPAs):

Hip new frameworks like Astro, Qwik, and Elder.js are touting their MPA [multi-page application] with “0kB JavaScript by default.” Website posts are earning the rounds listing all the troubles with SPAs: record, emphasis management, scroll restoration, Cmd/Ctrl-click, memory leaks, and so forth. Gleeful potshots are getting taken towards SPAs.

I believe what is significantly less talked over, though, is how the context has adjusted in modern yrs to give MPAs additional of an higher hand in opposition to SPAs.

It would seem a quantity of individuals seriously clung to that initial element simply because Nolan revealed a observe-up to clarify that SPAs are considerably from doomed:

[T]he stage of my post wasn’t to bury SPAs and dance on their grave. I believe SPAs are excellent, I’ve labored on numerous of them, and I assume they have a shiny foreseeable future ahead of them. My key point was: if the only reason you’re using an SPA is since “it would make navigations faster,” then possibly it is time to re-evaluate that.

And there is good purpose he claims that. In actuality, the very first short article precisely details to do the job remaining performed on Shared Aspect Transitions. If they move forward, we’ll have an API for animating/transitioning/sizing/positioning elements on web page entrance and exist. Jake Archibald demonstrated how it performs at Google I/O 2022 and the video is a gem.

If you’re asking yourself how one site can changeover into a further, the browser will take screenshots of the outgoing website page and the incoming website page, then transitions between all those. So, it’s not so substantially just one web site getting yet another as significantly as it is the browser keeping on to two images so it can animate just one in though the other animates out. Jake states what is happening at the rear of the scene is a DOM construction is established out of pseudo-elements containing the site visuals:


We can “screenshot” a certain factor if we want to isolate it and use a different animation from the relaxation of the site:

  website page-changeover-tag: website-header
  comprise: paint

And we get pseudo-elements we can hook into and assign personalized @keyframe animations:


Dang, that is clever as heck!

It is also proof in the pudding of just how considerably HTML, CSS, and JavaScript continue to evolve and make improvements to. So a lot so that Jeremy Keith suggests it is large time we re-assess our past judgment of some systems:

If you weren’t conscious of alterations in excess of the previous couple of a long time, it would be effortless to even now think that single web site applications offer some special strengths that in actuality no extended hold true. […] But developers continue to be suspicious, even now prefering to have confidence in 3rd-party libraries in excess of indigenous browser features. They created a determination about these libraries in the earlier. They evaluated the state of browser aid in the earlier. I would like they would re-examine people selections.

The elements for SPAs specially:

In current years in unique it feels like the website has come on in leaps and bounds: service workers, indigenous JavaScript APIs, and an astonishing raise in what you can do with CSS. Most essential of all, the interoperability between browsers is receiving greater and better. Common help for new website benchmarks comes at a speedier rate than at any time in advance of.

HTML, CSS, and JavaScript: it is still the greatest cocktail in city. Even if it will take a moment for it to capture up.

Leave a Reply

Your email address will not be published. Required fields are marked *