Dev News: Svelte 5 vs. VanillaJS and Google’s Project IDX
Rich Harris, Svelte’s creator, says Svelte 5 is going to be radical, and as proof he offered a chart showing how many lines of code it creates for various functions versus Svelte 4 and, more significantly, vanilla JavaScript. For most of the functions he lists, it runs neck-and-neck with vanilla JavaScript.
We’re thinking this shift is made possibly by the promised code modernization he told The New Stack about earlier this year.
The Svelte team is switching the underlying code from TypeScript to JavaScript — no, you read that right, that’s actually what he said. We double-checked after several developers told us that couldn’t be right.
“People are getting confused because they assume that JavaScript means ‘no types,’ but what we’re actually doing is converting our .ts files to .js files with type annotations in JSDoc comments rather than TypeScript syntax,” Harris told The New Stack. “This gives us equivalent type safety but eliminates the friction normally associated with things like TypeScript.”
Google’s Project IDX to Offer Multiplatform App Development
Google announced a new browser-based development “experience” that’s built on Google Cloud and leverages Codey, a foundational AI model trained on code and built on PaLM 2. It also supports Next.js deployment via a Firebase Hosting integration.
Google did not specify whose code or where it comes from in the blog post.
Project IDX leverages the AI Codey, which as of now supports C++, Go, Java, JavaScript, Kotlin, Python, Ruby and TypeScript, among others.
It’s also built on Visual Studio Code using Code OSS, which should give you some idea of where they’re headed with this. It has pre-baked templates for Angular, Flutter, Next.js, React, Svelte, Vue and languages such as JavaScript, Dart and soon Python and Go, the post stated.
“At the heart of Project IDX is our conviction that you should be able to develop from anywhere, on any device, with the full fidelity of local development,” the blog post stated. “Every Project IDX workspace has the full capabilities of a Linux-based VM, paired with the universal access that comes with being hosted in the cloud, in a data center near you.”
Project IDX includes a built-in web preview and there are plans to add an Android emulator and an embedded iOS simulator.
It integrates Firebase Hosting, which allows developers to deploy a shareable preview of a web app or to deploy to production.
“And because Firebase Hosting supports dynamic backends, powered by Cloud Functions, this works great for full-stack frameworks like Next.js,” the blog post added. That functionality put it neatly in place to compete with Vercel and Netlify, which also support Next.js deployments.
Vercel Launches Next.js Commerce 2.0
Speaking of Vercel and Next.js, the frontend development company released Next.js Commerce 2.0 Monday and it’s all about speed.
In a blog post, the company points out e-commerce sites took a hit with Google when page experience became a ranking factor in search results. Amazon, for instance, found that just 100 milliseconds of extra load time cost the e-tailer 1% in sales. There are a lot of reasons, including personalization, images and videos, for why this is a hard problem for e-commerce sites to solve, the blog post explained.
The updated solution leverages Next.js 13 and introduces an app router, it noted, to create storefronts that feel static but are completely dynamic.
It includes a dynamic storefront, simplified architecture (a single provider per repository), which results in less code, the post notes. There’s also a new e-commerce accelerator template, which features best patterns for building composable commerce applications, including support for BigCommerce, Medusa, Saleor, Shopify and Swell.
TypeScript 5.2 Release Candidate Now Available
Microsoft announced the TypeScript 5.2 RC on Tuesday. So what’s new? Maintainer Daniel Rosenwasser walked through the updates, which includes:
- Using declarations and explicit resource management, which is designed to cut down on the “noise” created in code when cleaning up after creating an object;
- Decorator metadata. This is an upcoming ECMAScript feature that makes it easy for decorators to create and consume metadata on any class they’re used on or within;
- Named and anonymous tuple elements. Tuples are used to store multiple items in a single variable. TypeScript previously had a rule that tuples could not mix and match between labeled and unlabeled elements. With this update, TypeScript can preserve labels when spreading into an unlabeled tuple.
- Easier method usage for unions of arrays. “In previous versions on TypeScript, calling a method on a union of arrays could end in pain,” Rosenwasser wrote. “In TypeScript 5.2, before giving up in these cases, unions of arrays are treated as a special case. A new array type is constructed out of each member’s element type, and then the method is invoked on that.” The long and short of it is that methods like filter, find, some, every and reduce should all be invokable on unions of arrays in cases where they were not previously.
- Type-only import paths with TypeScript implementation file extensions. This means developers can now write import-type statements that use .ts, .mts, .cts, and .tsx file extensions. It also means that import() types, which can be used in both TypeScript and JavaScript with JSDoc, can use those file extensions.
- Comma completions for object members. “TypeScript 5.2 now gracefully provides object member completions when you’re missing a comma,” Rossenwasser wrote. “But to just skip past hitting you with a syntax error, it will also auto-insert the missing comma.”
- Inline variable refactoring. Using the “inline variable” refactoring will eliminate the variable and replace all the variable’s usages with its initializer, he explained, adding that this may cause that initializer’s side effects to run at a different time, and as many times as the variable has been used.”
- Optimized checks for ongoing type compatibility; and
- Breaking changes and correctness fixes.
