11 C
New York
Sunday, March 3, 2024

The JavaScript Framework That Puts Web Pages on a Diet

Websites are too damn big.

The average web page is about 2 megabytes, according to HTTP Archive, a site that tracks the performance of websites and the technologies they use. Sure you can download 2 megabytes in less than a second on a good 4G mobile connection. But today’s web pages are problematic for people on slow connections or with small bandwidth caps. Not all that long ago, a complex game or software program fit on a 1.4-megabyte floppy disk.

There are many reasons today’s web is so bloated, including the ads and tracking scripts that saddle so many pages. Another reason is that websites do much more than just display text and images. Many sites now look and feel like full-blown desktop applications.

To build these interactive sites, many web developers turn to open source packages that handle common tasks. These tools liberate programmers from a lot of grunt work, but they can add heft to a project. Facebook's popular open source React library for building user interfaces, for example, weighs in at 100 kilobytes. Throw in some other tools and graphics, and soon you’re talking many megabytes.

The up and coming JavaScript framework Svelte, created by visual journalist and software developer Rich Harris, aims to make it easier to write faster, smaller interactive websites and applications. Web developer Shawn Wang says he cut the size of his personal website from 187 kilobytes to 9 kilobytes by switching from React to Svelte.

"It was a big 'wow' moment," Wang says. "I wasn't even trying to optimize for size and it just dropped."

Harris, a graphics editor for The New York Times, created and released the first version of Svelte in 2016 while working for The Guardian. Many of his projects involved interactive graphics and animations, but he worried that the graphics could take too long to load or would chew through users’ data limits.

Frameworks add heft to websites because they traditionally serve as a middle layer between an app's code and the user's browser. That means developers need to bundle the entire framework, in addition to their own code, with an app, even if they don't use all of the framework's features. Wang compares this to a rocket ship that needs massive fuel tanks to launch into space.

Harris took a different approach. Svelte performs its middle-layer work before a developer uploads code to a web server, well before a user ever downloads it. This makes it possible to remove unnecessary features, shrinking the resulting app. It also reduces the number of moving parts when a user runs the app, which can make Svelte apps faster and more efficient. “Svelte is like a space elevator,” Wang says. The framework was tricky to create, but advocates say it makes it easier for developers to build efficient apps.

an abstract depiction of screens and bubbles connected

The WIRED Guide to Open Source Software

Everything you ever wanted to know about Linux, GNU, and how big companies are making money off of free, collaboration-based software.

By Klint Finley

Wang says he likes to use Svelte for web pages, but he still uses React for larger applications, including his professional work. For one thing, the larger an app, the more likely a developer will use all of React's features. That makes it less wasteful. In fact, some Svelte apps are bigger than apps made with React or similar tools. And there’s much greater demand for React developers than Svelte developers.

In the State of JavaScript 2019 survey of more than 21,000 developers, 88 percent of respondents who had used Svelte said they were satisfied with it, giving it the second-highest satisfaction rating in the survey, just behind React’s 89 percent satisfaction rate. But only 7.8 percent of respondents had used Svelte, and 24.7 percent had never heard of it. Meanwhile, 80.3 percent had used React.

Harris understands why many developers would be hesitant to invest in learning Svelte. The world of JavaScript development moves fast, and programmers already have a dizzying number of tools to choose from and learn. "React has the advantage of being backed by Facebook, a strong job market, and a huge ecosystem of third-party things that work with it," he says. Although Harris uses Svelte to make graphics and animations for The New York Times, the publisher's site is still based on React.

Svelte is still a hobby project that Harris and other developers work on primarily in their free time. Harris only works on it "on the clock" when he needs to fix something or add a feature that helps him with his work for the Times.

Harris says Svelte is best suited for cases where performance and file sizes are particularly important, such as apps that run on smart TVs or low-power devices.

But some Svelte developers use it to build larger apps. Ryan Atkinson is the founder of Felt Social, which makes tools for building highly customizable social websites. He says he chose Svelte because it makes for faster, more responsive applications, even if they’re not always the smallest. “Svelte’s architecture can fundamentally change the game of building user interfaces,” he says.

Atkinson says programmers often dismiss tools that are good for building small things, thinking they're "toys" that can't be used to build big things.

"I think that's a fallacy," he says. After all, he points out, JavaScript was once considered a “toy language.” Now it’s used to write apps like Gmail and Google Docs.

Related Articles

Latest Articles