2 min read
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.