Meet Sapper, a military grade PWA framework inspired by Next.js

2 min read

There is a new web application framework in town. Categorized as “Military grade” by its creator, Rich Harris, Sapper is a Next.js-style framework that is almost close to being the ideal web application framework.

[box type=”info” align=”” class=”” width=””]Fun Fact: Sapper, the name comes from the term for combat engineers, hence the term Military grade. It is also short for Svelte app maker.[/box]

Sapper offers high grade development experience, with declarative routing, hot-module replacement, and scoped styles. It also includes modern development practices at par with current web application frameworks such as code-splitting, server-side rendering, and offline support. It is powered by Svelte, the UI framework which is essentially a compiler that turns app components into standalone JavaScript modules.

What makes Sapper unique is that it dramatically reduces the amount of code that gets sent to the browser. In the RealWorld project challenge, Sapper implementation took 39.6kb (11.8kb zipped) to render an interactive homepage. The entire app cost 132.7kb (39.9kb zipped), which is significantly smaller than the reference React/Redux implementation at 327kb (85.7kb). Infact, the implementation totals 1,201 lines of source code, compared to 2,377 for the reference implementation.

Another crucial feature of Sapper is code splitting. If an app uses React or Vue, there’s a hard lower bound on the size of the initial code-split chunk, the framework itself, which is likely to be a significant portion of the total app size. Sapper has no lower bound for initial code splitting, which makes the app even faster.

The framework is also extremely performant, memory-efficient, and easy to learn with Svelte’s template syntax. It has scoped CSS, with unused style removal and minification built-in. The framework also has a svelte/store, a tiny global store that synchronises state across the component hierarchy with zero boilerplate.

Currently Sapper is not released in version 1.0.0. Currently, Svelte’s compiler operates at the component level. For the stable release, the team is looking for ‘whole-app optimisation’ where the compiler understands the boundaries between the components to generate even more efficient code. Also, because Sapper is written in TypeScript, there may be plans to officially support TypeScript.

Sapper may not be ready yet to take over an established framework such as React. The reason being, that the developers may have an aversion to any form of ‘template language’. Moreover, React is extremely flexible and appealing to new developers. This is because of its highly active community and other learning resources, in particular, the devtools, editor integrations, tutorials, StackOverflow answers, and even job opportunities. When compared to such a giant, Sapper still has a long way to go.

You can view the framework’s progress and contribute your own ideas at Sapper GitHub and Gitter.