Creating a SvelteKit Project: A Beginner’s Guide and Vue.js Comparison

Introduction:

SvelteKit is quickly gaining popularity as a modern web framework for building fast and efficient web applications. SvelteKit is a Javascript framework for building apps using Svelte. Svelte is based on a tool for compiling components (essentially, Svelte.js is a compiler itself) at the build stage, allowing you to load only what is needed to display your application on the page — small, “digestible” JavaScript code. This means there is no virtual DOM, no frameworks on top of frameworks, and no framework at runtime. Its simplicity and reactivity makes it a compelling choice for both beginners and experienced developers. In this guide, we’ll explore the power of SvelteKit and demonstrate how to create a simple web app from scratch. We’ll also compare it with Vue.js, another popular JavaScript framework.

Getting Started with SvelteKit

Getting started with SvelteKit is a breeze. The easiest way to start building a SvelteKit app is to run npm create

npm create svelte@latest sveltekit-app
cd sveltekit-app
npm install
npm run dev

This sets up a basic SvelteKit project with everything you need to get started.

Component-Based Architecture:

Components are the building blocks of Svelte applications. They are written into .svelte files, using a superset of HTML.

<script> 
  // logic goes here 
</script>
 
<! -- markup (zero or more items) goes here -->
<style> 
  /* styles go here */ 
</style>

All three sections — script, styles and markup — are optional.

Understanding Reactivity in Sveltekit

One of the standout features of Sveltekit is its reactivity system. You don’t need to write complex state management code. Let’s look at a simple example:

<script>
   let count = 0;
   function increment() {
     count += 1;
   }
</script>
<button on:click={increment}>Increment</button>
<p>The count is {count}</p>

Changes to count are automatically reflected in the UI without additional code.

Server-Side Rendering (SSR) Made Easy

Server-side rendering (SSR) is the process of rendering a web page on the server before sending it to the client. This allows for faster page loads and improved SEO. SvelteKit makes it easy to implement SSR by providing a dedicated PageServerLoad type for load functions.

export async function load({ params }) {
  // Fetch some data from the database
  const posts = await db.getPosts();
// Return the data
  return { posts };
}

This load function will be called on the server when the page is requested. The params object contains the URL parameters that were passed to the page.

Creating Layouts and Components

SvelteKit makes it easy to create layouts and components for your app. Layouts provide consistent structures for pages. Here’s an example layout:

<! — src/routes/+layout.svelte →
<div class=”container”>
   <header>
     <h1>My Website</h1>
     <nav>
       <a href=”/”>Home</a>
       <a href=”/about”>About</a>
     </nav>
   </header>
   <main>
     <slot></slot>
   </main>
</div>

The <slot> element is used in +layout.svelte components to allow child pages to customize the layout. The <slot> element can be used to render any HTML element or Svelte component.

Routing and Navigation

SvelteKit’s routing system is intuitive. SvelteKit uses filesystem-based routing. Every +page.svelte file inside src/routes creates a page in your app.

src/ 
   routes/ 
     +page.svelte // Root route ('/') 
     about/
        +page.svelte//about route 
     blog/ 
        [slug]/
           +page.svelte // Dynamic route for blog posts

For example, to define a route for the page /about, you would create a directory called about in the src/routes directory.

To render a page for a route, you create a Svelte component with the filename +page.svelte. This component will be rendered when the user navigates to the corresponding URL path.

Life cycle hooks

SvelteKit lifecycle hooks are functions that are called at specific points in the lifecycle of a component. These hooks can be used to perform tasks such as initializing the component, updating the component, and destroying the component.

beforeUpdate and afterUpdate:
These are executed before and after the component’s DOM is updated. These hooks are useful for performing operations before and after re-rendering, such as manipulating the DOM or interacting with external libraries.

onMount and beforeDestroy:
The onMount lifecycle hook in SvelteKit is equivalent to Vue.js’s mounted hook. It’s triggered when the component is inserted into the DOM. The beforeDestroy hook is equivalent to Vue.js’s beforeUnmount hook and is triggered when the component is about to be removed from the DOM.

onDestroy:
SvelteKit provides the onDestroy lifecycle hook, which is similar to Vue.js’s unmounted hook. It’s triggered when the component has been removed from the DOM.

UI Component Libraries

While Svelte itself doesn’t have an official UI library like Vuetify, there are several third-party UI component libraries that you can integrate into your SvelteKit projects.

• Daisy UI
• Svelte Materialify
• Skeleton

Deploying Your SvelteKit App

Deploying your SvelteKit app is a breeze. You can use platforms like Vercel or Netlify for hosting. The build process is straightforward, and these platforms offer seamless deployment integrations.

Deploying your SvelteKit app with AWS Amplify and the @sveltejs/adapter-static adapter is a seamless process that takes advantage of the benefits of static site generation (SSG). SSG can greatly improve your application’s performance and SEO. Follow these steps to deploy your app:

Step 1: Prepare Your SvelteKit Project

Before deploying to AWS Amplify, ensure that your SvelteKit project is set up and configured correctly. Make sure you have installed the @sveltejs/adapter-static adapter. Sveltekit provides different adapters for different hosting environments ( netlify, vercel ). Choose the correct adapter for your deployment.

npm install — save-dev @sveltejs/adapter-static

Next, configure your SvelteKit project to use the adapter in your svelte.config.js file:

// svelte.config.js
import adapter from ‘@sveltejs/adapter-static’;
export default {
   kit: {
     adapter: adapter({
       fallback: ‘index.html’
     }),
   }
};

Step 2: Initialize and Deploy to AWS Amplify:

Log in to the AWS console and navigate to AWS Amplify. Choose ‘New App’ and select ‘Host web app.’ It will prompt you to connect your source code from either GitHub, GitLab, AWS CodeCommit, or BitBucket for deployment.

If you select GitHub, after authenticating with your GitHub account, you will be able to view a list of repositories within your GitHub account. Choose the desired repository and select the correct branch that contains your source code. You will then see the app settings.

In the ‘Build and Test’ settings, click the ‘Edit’ button and modify the ‘baseDirectory’ from ‘/’ to ‘/build,’ then click ‘Save.’

If you want to enable auto deploy on each commit click the checkbox below and click ‘next’.

Click “save and deploy” and that’s it. Your project will be deployed to AWS Amplify and you will get the link in the next window.

Comparing SvelteKit with Vue.js

Now, let’s compare SvelteKit with Vue.js, another popular JavaScript framework:

Reactivity:

Both SvelteKit and Vue.js offer reactivity, but SvelteKit’s approach is compiler-based, leading to smaller bundle sizes and potentially faster rendering.

Bundle Size:

SvelteKit generates smaller bundle sizes compared to many other frameworks, including Vue.js. This can lead to faster loading times and improved user experiences.

Vue.js produces larger bundle sizes compared to SvelteKit due to its runtime and virtual DOM. However, Vue 3 introduced the Composition API, which allows for more fine-grained tree-shaking.

Server-Side Rendering:

SSR is built into SvelteKit, making it easy to create universal apps that perform well in terms of SEO and initial page load times.

Vue.js supports SSR through libraries like Nuxt.js. While SSR is possible, it may require additional setup compared to SvelteKit’s built-in SSR.

Compilation vs. Runtime

Components in SvelteKit are compiled at build time. This means that the framework generates optimized JavaScript during the build process, resulting in lightweight components and better runtime performance.

Vue components are compiled at runtime using a virtual DOM. This offers flexibility but can introduce a slight runtime overhead compared to Svelte’s approach.

Automatic Updates:

In Sveltekit, Components are automatically updated based on their reactive variables and props. Svelte handles the reactivity at compile time, ensuring efficient updates without relying on a virtual DOM.

Vue uses a virtual DOM to track and update components when data changes. While this approach is efficient, it involves runtime computations.

Learning Curve:

SvelteKit’s simplicity and minimal boilerplate make it beginner-friendly. Vue.js is also approachable but may have a slightly steeper learning curve due to its more extensive feature set.

Ecosystem:

Vue.js has a mature ecosystem with a wide range of libraries and plugins. SvelteKit’s ecosystem is growing but may have fewer third-party libraries available.

Community:

Vue.js has a large and active community, while SvelteKit’s community is smaller but growing.

Conclusion:

• SvelteKit excels in terms of bundle size, thanks to its compilation approach, making it an excellent choice for performance-critical applications.
• Vue.js offers a more traditional virtual DOM-based approach and has a larger ecosystem of libraries and tools.
• SvelteKit’s file-based routing and built-in SSR simplify project setup and improve SEO performance.
• Vue.js is a mature framework with a large community and is suitable for both small and large-scale applications.

SvelteKit simplifies web app development with its reactivity, SSR support, and ease of use. Whether you’re building a simple website or a complex web application, SvelteKit’s elegance and performance benefits shine through. When comparing it to Vue.js, consider your project’s requirements and your team’s familiarity with each framework to make the right choice.

About the Author:

Murugesh Raja is a Software Development Engineer with over two years of hands-on experience in Full Stack Web Development. With a strong proficiency in Angular, Vue.js, and Python, he brings a wealth of knowledge and practical insights to the world of web development. Murugesh is passionate about solving complex problems and staying up-to-date with the latest tech innovations. When he’s not coding, you can find him exploring new technologies or honing his skills as a developer.

About CodeStax.Ai

At CodeStax.Ai, we stand at the nexus of innovation and enterprise solutions, offering technology partnerships that empower businesses to drive efficiency, innovation, and growth, harnessing the transformative power of no-code platforms and advanced AI integrations.

But the real magic? It’s our tech tribe behind the scenes. If you’ve got a knack for innovation and a passion for redefining the norm, we’ve got the perfect tech playground for you. CodeStax.Ai offers more than a job — it’s a journey into the very heart of what’s next. Join us, and be part of the revolution that’s redefining the enterprise tech landscape.