SapperJS — A New Framework Powered by Svelte.js
The Next Big Step in Web Development!
ByPayal Mittal
Sapper, short for Svelte app maker, is yet another JavaScript framework. The special thing about it is that it is built upon Svelte. It is inspired by Next.js and follows the same style pattern but way too faster and smaller than it.
It is an amazing framework that builds extremely high-performance web apps of all sizes at considerably fast speed, all the while reducing the amount of code used.
The term Sapper is derived from the ancient war times and used specifically to define ‘combat engineer’.
It possesses all the characteristics that define a web framework to be perfect; which are mentioned here-
- Universal codebase
- Server-side rendering
- Instantaneous navigation to subsequent pages
- Client-side hydrating the server-rendered HTML
- Supports progressive web app characteristics
- Automatic code splitting
- Hot module reloading
- Easy-to-maintain codebase
- Ability to customize every aspect of the system
- High-performance without compromise
- Easy to learn the entire framework within an hour
It has all these properties and therefore qualifies to be called an ‘ideal’ framework for building applications.
Why choose Sapper?
We have already discussed that while building advanced web applications, Sapper takes advantage of all the modern practices. So, we’re going to get a quick look into some of those practices in here. Let’s move then-
✔ Server-side Rendering
Sapper supports server-side rendering feature which means that it first pre-renders every sapper component (page) on the server-side. It generates HTML for the page at build time and sends it to the client-side. It then runs the component again at the client-side to update as per the dynamic data.
This way you can ensure that the component can run on both client and server sides.
✔ Automatic Code Splitting
Sapper splits up your code into small chunks (one per route). The bundle size of these chunks is smaller than those generated by traditional frameworks like React.js or Vue.js.
The initial download size can be further reduced by code splitting which eliminates the need to download the entire app code when the first page rendered. Instead, when the browser loads a Sapper app, it only downloads the code necessary to render the first page (route). This reduces the initial load time considerably and makes it easy to run even on mobile devices or with slow internet connections.
The code splitting enables the downloading of a page code only when the page is visited for the first time. It also removes the need to download the code for the pages that are never visited.
✔ Preloading
Sapper provides a preload function for data loading. The pages that need data from API services can define a preload function to do so. This function runs when the page is loaded and returns an object whose property values are then passed to the page as props.
In Next.js, the equivalent to preload is getInitialProps.
The preloading feature enables the page update without letting the user see it, which is generally the case in client-side loading.
✔ Prefetching
Sapper uses prefetching to avoid browser lagging and enabling faster page loads. It works by anticipating the next move of the user by the mouse hovers and relevant pages he/she visits and then runs that page’s preload function.
As soon as the user hovers over the page link, Sapper starts downloading the page code, reducing the time required to render the next page and provides a better user experience.
It spares an extra couple of hundred milliseconds which makes all the difference for the user.
✔ Static Site Generation
Sapper supports static site generation as it generates the HTML for each page at build time. This creates a site (static one) where all the pages a user might visit have already been rendered to HTML files.
It improves the app performance as no HTML generation, either client-side or server-side, is needed when a user visits each page.
✔ End-to-end Testing using Cypress
Sapper enables end-to-end testing using Cypress and everything needed to run Cypress tests comes preconfigures in Sapper. With this feature, you can write various tests to exercise the functional attributes of the application in ways as the user would.
Other reasons to use Sapper are-
- Typescript-support
- Supports offline usage through Service Workers
- Static site exporting
- High-level project structure
- Easy to understand and customize
- Memory efficient
- Improved SEO
- Amazing development experience
As I said earlier- quite a perfect framework!
Routing in Sapper
Sapper offers two types of routes i.e., Pages and Server routes. Let’s see what they are and how they work-
- Page Routing
Sapper encodes the pages in your app by .svelte filenames inside the src/routes directory and these filenames determine the page’s routes.
For instance, you want to navigate to /xyz page then Sapper renders a xyz.svelte file to the src/routes folder. Any file named src/routes/xyz.svelte or src/routes/xyz/index.svelte will correspond to /xyz route.
It makes the navigation process very easy, predictable, and you can navigate to multiple pages at a time.
For nested routes, you need to create a separate folder for each subroute.
- Server Routes
Like pages, the source files for server routes reside inside the src/routes directory. The src/routes directory can contain both the .js files for server routes and .svelte files for pages.
These source files define functions for server-side code in .js files. These server-route functions process HTTP requests.
“Typically, the server route functions receive an HTTP request and response objects as arguments, they analyze the request object and call relevant methods on the response object to provide response data.”
The functions can invoke API services to create, retrieve, update, and delete data. Server routes allow collecting the server-side code with client-side code in the same project.
Getting Started
To get started to build a new Sapper app, run these commands-
npx degit "sveltejs/sapper-template#rollup" my-app
# or: npx degit "sveltejs/sapper-template#webpack" my-app
cd my-app
npm install
npm run dev
The above command will create a new project inside the my-app directory, install all the dependencies, and run a server on <u>localhost:3000</u>.
Project Structure of Sapper-
All the required project files and folders of Sapper are structured as follows-
├ package.json
├ src
│ ├ components
│ │ ├ Button.svelte
│ │ ├ Card.svelte
│ │ ├ Header.svelte
│ ├ routes
│ │ ├ _error.svelte
│ │ ├ _layout.svelte
│ │ ├ [id].svelte
│ │ ├ index.svelte
│ │ └ list.svelte
│ ├ client.js
│ ├ server.js
│ ├ service-worker.js
│ └ template.html
├ static
│ ├ global.css
└ webpack.config.js
For in-depth details, refer to the documentation.
How’s Sapper different from Next.js?
While Next.js is among the most loved frameworks and close to perfect, it is not ideal. It follows an amazing concept that all the app pages are files in your-project/pages directory and each file is a React component.
It makes the whole process very easy as you can find the page code just by looking at the filesystem rather than spending hours to guess the right component name.
Besides, it supports astounding features like code splitting and server-side rendering. But unlike Sapper, it surely has some flaws like bigger size and uses a large amount of code, which causes performance lack.
Where Next.js takes 204kb for a simple ‘hello world’ app, Sapper takes only 7kb for the same and it might lower further in the future by exploring the optimization possibilities. In case of an app, Sapper required less than half the size as used by React/Redux implementation, which is quite amazing.
One crucial point is that code-splitting doesn’t come free, it doesn’t cost money of course, but it won’t be of much use in the case of frameworks like React and Vue.js. The reason is that the initial code-chunk size would at least be of the size of the framework, which would be almost like the size of the total app. But Sapper doesn’t follow such a trait and can reduce the initial chunk size considerably!
Important Note
This is a introductory blog to Sapper but here is the spoiler- Team Svelte has rewritten Sapper and replaced it with Sveltekit. So from now on, you’ll have to deal with Sveltekit only and not Sapper.
However, Sveltekit has the same features as Sapper which I hope you understood in this blog. We’ll learn more about Sveltekit in the next blog, till then stay connected.
Thanks for reading this article!! We are eager to hear your suggestions and feedback and do not forget to hit claps before leaving 😛.