TNS
VOXPOP
Where are you using WebAssembly?
Wasm promises to let developers build once and run anywhere. Are you using it yet?
At work, for production apps
0%
At work, but not for production apps
0%
I don’t use WebAssembly but expect to when the technology matures
0%
I have no plans to use WebAssembly
0%
No plans and I get mad whenever I see the buzzword
0%
Frontend Development / JavaScript / Software Development

Dev News: Astro 3.0, State of CSS, and React Opinions

Astro becomes first major framework to support the View Transitions API. Plus: State of CSS, and a dev wonders if React is too opinionated.
Sep 2nd, 2023 6:00am by
Featued image for: Dev News: Astro 3.0, State of CSS, and React Opinions
Photo by Killian Eon via Pexels

Astro 3.0 was released this week, making it the first major web framework to support the View Transitions API. This API enables fade, slide, and even persist stateful elements across the page navigation, which previously were only possible inside JavaScript Single Page Apps, according to the release notes.

“View Transitions are a set of new platform APIs that unlock native browser transition effects between pages,” the release note explained. “Historically this has only been possible in Single Page Applications (SPAs), but web browsers and spec authors have been working hard over the last few years to bring native page transitions to the platform, and Astro 3.0 is the first web framework to bring them to the mainstream.”

Developer and designer Joe Bell created a demo that puts some of the Astro View Transitions on display, but essentially it allows developers to:

  • Morph persistent elements from one page to another;
  • Fade content on and off the page for a less jarring navigation;
  • Slide content on and off the page; and
  • Persist common UI across pages, with or without refresh.

“The best part about View Transitions in Astro is how simple they are to use. With just 2 lines of code, you can add a subtle — yet tasteful! — fade animation to your site,” the release notes stated.

Other updates include:

  • Image optimization;
  • Astro components render 30-75% faster;
  • SSR Enhancements for serverless, which means new ways to connect to the hosting platform;
  • HMR Enhancements for JSX, which means fast refresh support for React and Preact; and
  • Optimized Build Output with cleaner and more performant HTML.

State of CSS: CSS-in-JS Trend Plateaus

The CSS-in-JS sector has plateaued, according to the 2023 State of CSS survey. The report, published this week, surveyed 9,190 developers around the world about their use of CSS.

CSS-in-JSS allows programmers to style their components by writing CSS directly in their JavaScript or TypeScript code. The report suggested the reason behind the plateau may be that native CSS is adopting many of the main advantages of CSS-in-JS.

The report also found that newcomer Open Props has generated a “small but passionate” following that’s eager to retain the framework. Open Props, which became available in May, was created by Adam Argyle, a Google software engineer who is also the creator of Tailwind CSS.

Meanwhile, Bootstrap is the most used framework, which is interesting because it also had the most developers (at 41%) who said they would not use it again. Tailwind ranked as the major CSS framework that developers are happiest to keep using.

CSS Retention over time

Graph from the 2023 State of CSS report

That’s Just, Like, Your Opinion, Man

Ryan Hoffnan is a full-stack developer who describes himself as “frontend oriented.” Recently, he raised the question of whether React, the unopinionated JavaScript framework, is becoming opinionated.

An unopinionated framework doesn’t dictate how developers structure their code or use third-party libraries, he explained. React has taken steps toward being opinionated, such as using folder trees as routers, he contended.

“For example, the official React documentation now recommends using Next.js or Remix for server-side rendering (SSR),” Hoffnan wrote. “These frameworks provide a number of features that can help developers build more efficient and scalable React applications, but they also come with a set of opinionated choices about how code should be structured and organized.”

He theorized this may be a maturity issue, since there’s now a wider range of third-party libraries and tools available. This adds to the appeal of creating an opinionated framework, which simplifies finding tools.

“Another reason for React’s increasing opinionatedness is that companies are increasingly looking for ways to reduce development costs and time to market,” he wrote. “Opinionated frameworks can help to achieve these goals by providing developers with a pre-configured set of tools and libraries that are known to work well together.”

Group Created with Sketch.
THE NEW STACK UPDATE A newsletter digest of the week’s most important stories & analyses.