The ‘Kubernetes’ of Frontend Development – InApps 2022

Vercel, the creator of the popular Next.js React and JavaScript framework, recently introduced Next.js 11, the latest version of the framework with new features to accelerate performance and developer collaboration.

New in Next.js 11 are features providing developers with faster starts and changes, real-time feedback, instantaneous live collaboration and significant image optimization enhancements, said Guillermo Rauch, CEO and co-founder of Vercel and co-creator of Next.js.

At the recent Next.js Conf 2021, Vercel introduced a preview of Next.js Live, which enables Next.js to run entirely inside the web browser.

“Next.js Live is our system for making development basically real-time, not just real-time for yourself — like seeing your changes happen in like 10 milliseconds — but also for the rest of your team seeing the change that you’re making on their screen,” Rauch told InApps. “Ten milliseconds is our internal sort of deadline for you make a change and how quickly you should see it on the screen.”

The main innovation behind this is that Vercel has placed the entire dev server technology, that before lived in a node process on your local machine, entirely in the web browser, Rauch said.

“So, all the technology for transforming the front-end UI components is now entirely ‘dogfooded’ inside the web browser, and that’s giving us the next milestone in terms of developer performance,” he said. “It makes front-end development multiplayer instead of single player.”

Moreover, by tapping into ServiceWorker, WebAssembly and ES Modules technology, Vercel makes everything that’s possible when you run Next.js on a local machine possible in the context of a remote collaboration. Next.js Live also works when offline and eliminates the need to run or operate remote virtual machines.

Meanwhile, the Aurora team in the Google Chrome unit has been working on technology to advance Next.js and has delivered Conformance for Next.js and the Next.js Script Component.

Rauch described Conformance as a co-pilot that helps the developer stay within certain guardrails for performance.

Conformance for Next.js is a system that provides carefully crafted solutions and rules to support optimal loading, said Shubhie Panicker, tech lead of the Web Platform at Google, during a Next.js Conf keynote.

“As a developer, Conformance means that you are free from having to memorize lots of complicated rules for loading performance and keeping up with the changing landscape,” she said. “You can think of Conformance as a compiler, like TypeScript — following the rules is constraining, but in a way that builds confidence because it ensures predictable outcomes. It makes teams productive and becomes essential as features increase and teams scale.”

Conformance is a combination of ESLint rules and runtime checks and development, Panicker said.

“Conformance is how we are open-sourcing the system that we use at Google,” she said. “We are early in this journey and are looking to evolve the technology with feedback from the community.”

Rauch compared Conformance to Kubernetes in that both came out of internal projects at Google.

“If you look at it in the context of the entire sort of cloud native space and the role that Kubernetes plays there, there’s a growing, credible case that Next.js is sort of becoming the Kubernetes of the front-end space,” he said. “It has a ton of momentum behind it in terms of the partnerships with Google and Facebook putting a lot of resources behind it, and also the ecosystem-wide investments into integrations and improvements.”

In addition, like Kubernetes came from all the lessons Google learned from Borg, Google is now offering the lessons learned from their Conformance systems internally to frameworks like Next.js to help with loading performance, Rauch said.

The Next.js Script Component is another optimization from Google that improves loading performance by enabling developers to set the loading priority of third-party scripts, Rauch said.

“Developers often struggle with where to put third-party scripts in their application for optimal loading,” said Houssein Djirdeh, a developer relations engineer in the Web Platform group at Google, during a Next.js Conf keynote. “With this new script component, developers need only define the strategy property and Next.js will prioritize. This can massively improve loading performance.”

The new script component enables three different loading strategies: before-interactive, for scripts such as security and authentication that need to be fetched and executed before the page is interactive; after-interactive, for scripts such as tag managers and analytics that can fetch and execute after the page is interactive; and lazy-onload, for scripts such as chat support widgets that can wait to load last during idle time, Djirdeh said.

“At Google Chrome, we believe our collaboration with Next.js is an example of how to set predictable outcomes for loading performance,” he said. “After wrestling with potential solutions for the browser, we’ve come to realize that frameworks were the missing piece to the solution… We love working with great frameworks to help developers make the web faster.”

Other new features in Next.js 11 include font enhancement automations, image enhancements and more.