2024 Predictions by JavaScript Frontend Framework Maintainers
What’s ahead for frontend in 2024? Since we broke our crystal ball, The New Stack talked with creators and maintainers from Angular, Next.js, React and Solid about their plans for 2024. Here’s an overview of what frontend developers can expect in the coming year.
Angular: Optional Zone.js
In the past year, the two big Angular achievements were introducing fine-grained reactivity with Signals and deferrable views, said Minko Gechev, the technical lead and manager for Angular DevRel at Google. This next year will build on that by further focusing on fine-grained reactivity and making Zone.js optional, he told The NewStack.
In Angular, a Zone is an execution context that persists across async tasks. Zones are explained in detail in this GitHub repository, but a zone has five responsibilities, including intercepting asynchronous task scheduling and wrapping callbacks for error handling and zone tracking across async operations. Zone.js can create contexts that persist across asynchronous operations, as well as provide life cycle hooks for asynchronous operations.
“We’re exploring enabling optional Zone.js for existing projects, and developers should be able to take advantage of that feature just by refactoring their existing apps,” Gechev said. “With optional Zone.js, we’re expecting improvement in load times and faster initial render. Working on fine-grained reactivity takes this to another level, enabling us to detect for changes in only parts of the template of a component.”
These features will lead to an even faster runtime, he said.
In another performance play, Angular is considering whether to enable hybrid rendering by default. It would be possible to opt out of hybrid rendering, since it can increase hosting requirements and costs, he added.
“We see a lot of value in SSG [static site generation] and SSR [server-side rendering] and with the solid foundation we set in v17, we’re working on final polishing touches to enable this experience from the start,” Gechev said.
Another priority is delivering on its Signal Request for Comments, he added.
Developers might also see improvements to Angular’s documentation. Based on its developer survey, Gechev developers want an upgraded learning experience, and part of that includes making Angular.dev the new home for the framework. Developers have also prioritized initial load time — which the hybrid rendering, partial hydration and optional Zone.js partial should address, he added — as well as component authoring, which Angular plans to further simplify.
“We’re committed to iteratively delivering features and incrementally enhancing them over time,” Gechev said. “Developers will be able to benefit from all the improvements in 2024, and will get an even better developer experience and performance in following years.”
Next.js: A New Compiler in Works
Next.js introduced a new app server designed to support React Server Components (RSC) and Server Actions in 2023. It continues to support the old app server and their routing systems are interchangeable, said Lee Robinson, head of product at Vercel, which oversees the framework. That interoperability means developers can take their time adding the new features.
“There’s customers who have been building with Next.js for five, six years, and their adoption of these newer features will also take multiple years,” Robinson said. “We like to bring people along for the journey as smooth as we can.”
In the new year, there are a number of issues Next.js wants to address, but one priority is probably going to be simplifying caching. It could be easier in terms of developer experience, he said.
“Normally, the status quo is that a lot of developers in the ecosystem have to pull in a bunch of extra packages or learn how to use other tools to do this fetching, caching and revalidating,” Robinson said. “Next.js has built a lot of this in now, which is very powerful, but it also means there’s additional things that you need to learn and the initial feedback has been, ‘This is great; it’s very powerful, but we would love if it was a little easier.”
The Next.js team will also continue to focus on performance improvements, which he called “continuous investment for us.”
That’s likely to take the form of a new compiler in the new year that will speed up how fast it takes to start Next.js on a developer’s machine, he added. The compiler has been in the works for about a year, and Vercel has been using it internally for its properties and apps. The compiler, which is powered by Rust, is faster without caching than the previous compiler was with caching, he said.
“We’re getting really close to having that rolled out, to a point where everybody can turn that on by default, and it’s faster than the existing the existing compilation solution with Webpack,” Robinson said. “Developers want their tools to be faster. They’re never going to complain about it being faster. So it’s been interesting to see the tool makers, not the users of the tool, but the actual tool developers moved to these lower-level tools like Rust to help get these last mile of performance wins.”
Goal three is to continue building the base for the next 10 years of Next.js.
“This new routing system, you know, we’re obviously very excited about it. We believe it’s a foundation for the future,” he said. “But also it’s going to take time. People are going to try out, they’re gonna have feature requests, and they’re going to want to see things changed. And we’re viewing this as a very long-term investment for the next five to 10 years.”
One “someday” but probably not this year’s goal is a better way of handling content inside of Next.js, he added.
“Today, it works and you can still connect to any content source you want, but there’s ways to potentially simplify the developer experience,” he added. “It’s more of a nice to have than a requirement, which is why I don’t think we’ll get to it in 2024, but I would like to do something with it in the future.”
React: 2024 Previews
The React team is expecting more framework adoption of React Server Components in the new year, said Eli White, engineering manager on React at Meta.
“RSCs have been a major change for most people to what they think of as the scope of React, from just a UI layer to having more of an influence on the way you architect your application for the best user and developer experience, especially for applications where SPAs [single page applications] weren’t good enough,” White said.
While he didn’t specify any new developments for 2024, White did indicate that they’ll be shipping and sharing more progress on some of the revelations from 2023. For instance, at React Advanced, the team gave conference goers a look at React Forget, which is React’s auto-memoizing compiler. React Forget will mean developers no longer have to use useMemo and useCallback, White said.
“At React Native EU we shared that we are bringing the familiar Chrome dev tools that web developers are familiar with to React Native, starting in 0.73,” White added. “We also shared a first look at our research into Static Hermes, our native compiler for JavaScript, which has the potential to not just speed up React Native applications, but fundamentally shift what JavaScript can effectively be used for. “
Solid: Focused on Primitives
Solid developers can watch for the SolidStart 1.0 and Solid.js 2.0 in 2024, according to Solid creator Ryan Carniato. SolidStart is a meta-framework, which means it’s built on the framework Solid.js. It’s comparable to Svelte’s SvelteKit, he said.
SolidStart’s documentation explained it thus:
“Web applications often comprise many components: databases, servers, frontends, bundlers, data fetching/mutations, caching and infrastructure. Orchestrating these components is challenging and often requires a large amount of shared state and redundant logic across the application stack. Enter SolidStart: a meta-framework that provides the platform to put all of these pieces together in a one location.”
Since SolidStart is still in beta, Carniato had the opportunity to basically use what was already in the ecosystem to make it better.
“One of the big pieces is instead of writing all our own deployment adapters, we now use Nitro, which also powers the Nuxt framework, and this lets you deploy to all the different platforms,” Carniato said.
Another example is any Solid router will work in SolidStart.
“It meant a lot of updates to the underlying pieces of the router so that they can all work together, but the end result I’m quite happy with is that there’s way less code for our small team of volunteers to maintain, and it gives a lot of flexibility and control to the developer,” he said. “They’re not being forced into a single solution, which is really important to me, because everyone has their own needs. And as I said, if you build the right pieces and figure out what those building blocks are, people can do a lot more.”
The end result is a meta-framework with “swappable” pieces that isn’t too opinionated, he said. The Solid team has been thinking through the impact of the right pieces of primitives in a world where increasingly meta-frameworks are dictating what developers use.
“For me, it’s always been about building blocks of primitives, a very engineering focus, and I think that is part of the reason why it’s it’s different,” he said. “I’ve always liked giving the choice, and I think if you have the right primitives, the right like pieces, you can build to the right solution.”
Solid 2.0 should ship sometime in the mid to late part of 2024, he said. Right now, they’re prototyping how it will handle asynchronous systems, he said.
“Solid 2.0 is going to be really important release too, because we’re taking another look at the reactive system and looking at how we can address async signals or asynchronous systems,” Carniato said.
Solid tries to balance control with performance, he added.
“We have a lot of very enthusiastic people in our community, very technical-minded people [who] care about performance, people who care about control,” he said. “We do attract a lot of the people who really want control over every part of what they build.”
