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%
AI / Frontend Development / JavaScript / Software Development

Dev News: Vue 3.4, Nuxt 3.9, and React Server Components Analyzed

Vue updates with a rewritten template parser and a refactored reactivity system and an analysis of React Server Components.
Jan 6th, 2024 11:00am by
Featued image for: Dev News: Vue 3.4, Nuxt 3.9, and React Server Components Analyzed
Photo by RealToughCandy.com via Pexels.

Vue creator Evan You released version 3.4 of Vue, the JavaScript framework for building user interfaces. You said the release includes “substantial internal improvements” such as a rewritten template parser and a refactored reactivity system.

The revised template parser is two times faster for templates of all sizes, You noted.

“Previously, Vue used a recursive descent parser that relied on many regular expressions and look-ahead searches,” You wrote. “The new parser uses a state-machine tokenizer based on the tokenizer in htmlparser2, which iterates through the entire template string only once.”

A few of the other changes in Vue 3.4 are:

  • defineModel, a macro that shipped as an experimental feature, is now stable
  • The V-bind same-name shorthand feature is available
  • A number of improvements to hydration mismatch error messages
  • Error codes with a production error reference page added to the documentation

The full changelog is available on GitHub.

Nuxt 3.9. Announced

Nuxt 3.9 was released over the holiday break. The open source framework for web development comes with Vite 5 and Rollup 4 support, and is Vue 3.4 ready, according to developer and Nuxt core team lead Daniel Roe.

It’s now possible to “play around” with interactive server components in what Roe warned was a “highly experimental update.” This allows developers to specify components to hydrate within a server component by using the nuxt-client directive, he added.

Also added in this release:

  • A new granular loading API
  • Run single events in callOnce
  • Error types

Bun Fixes Bugs

Bun released v 1.0.21 with 33 bugs fixed on Tuesday. Bun is a JavaScript runtime, bundler, transpolar and package manager. Among the fixes creator Jared Sumner said are addressed in this release: Memory leaks in errors from nodes and improvements to its Node.js compatibility.

Additional changes include:
console.table() — a Web API that prints a table for an object or iterable that’s useful for debugging is now supported.
bun:sqlite now offers more detailed error messages.
bun:sqlite uses less memory. It now reports SQLite’s memory usage to the garbage collector, which prompts the garbage collector to free memory “more aggressively when necessary,” Sumner wrote.

Copilot on iOS

AI continues to make headway on mobile, as we’ve reported in the past few weeks of Dev News (see AI on Apple and Gemini AI for Android). The most recent addition is Microsoft rolling out an app for Copilot on iOS and iPadOS, with both now available for download from the Apple App Store, the Verge reported Sunday.

The app allows developers to access GPT-4 from OpenAI without having to pay for a subscription, the report noted. Further, the app integrates with DALL-E3, allowing developers to create images from text.

Developer Analyzes Pros and Cons of React Server Components

React Server Components were the hot topic for React developers last year and inevitably there will be pros and cons developers uncover as they adopt RSC. Dev News doesn’t generally cover analysis, but it’s a bit of a slow news week so we’re sharing developer Mayank’s detailed analysis of RSC — the good, the bad, the ugly and the uglier.

Given the hype around RSC, it’s refreshing to see someone analyze its weak points as well as its strengths. Mayank focused on user experience in particular and how RSC might affect that. In “the uglier” section, they called out bundle size with RSC, noting that two years ago, Next.js 12 with Pages Router had a baseline bundle size of about 70KB compressed. Now, with Next.js 14 and App Router, that baseline is 85-90KB.

“After uncompressing, that’s almost 300KB of JavaScript that the browser needs to parse and execute, just to hydrate a ‘hello world’ page,” they wrote. “Concurrent features and selective hydration can help prioritize user events, but do not help with this baseline cost. They’re probably even contributing to this cost too, just by virtue of existing. Caching can help avoid the cost of redownloading in some cases, but the browser still needs to parse and execute all that code.”

It’s particularly problematic since reducing bundle size has been cited as one of the reasons for React Server Components, Mayank added.

React is a “legacy framework created to solve Facebook-scale problems, and as such is a bad fit for most use cases,” they wrote.

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