SvelteKit Basics: A Crash Course

Welcome to the second part of the SvelteKit series! If you're already comfortable with HTML, CSS, and JavaScript, but new to Svelte, you're in the right place. This post will give you a solid understanding of Svelte's fundamentals, setting the stage for you to dive into more advanced SvelteKit features later on.

What is Svelte?

Svelte is a front-end framework that helps you build reactive web applications with less boilerplate code than other frameworks like React or Vue. It’s unique because it compiles your code at build time, which means that the resulting application runs faster because there's no virtual DOM. Instead, Svelte updates the DOM directly.

Svelte is component-based, which means you build your app by composing reusable blocks of code (components) that each manage their own HTML, CSS, and JavaScript. This leads to clean, modular code that’s easy to manage as your app grows.

How is Svelte Different?

• No Virtual DOM: Unlike React and Vue, Svelte doesn’t use a virtual DOM. It compiles your app into highly optimized vanilla JavaScript at build time.

• Write Less Code: Svelte eliminates the need for concepts like useState (React) or data (Vue). Variables in Svelte are automatically reactive, which means they update the DOM whenever they change.

Getting Started with Svelte

Before diving into SvelteKit, let’s quickly cover Svelte’s core features.

1. Components

Svelte apps are built around components. Each Svelte component is just an .svelte file, which can contain three things:

• HTML: The structure of your component.
• CSS: Scoped styles that only affect the component.
• JavaScript: Logic to control the component's behavior.

Here’s what a simple component looks like:

<script>
  let name = 'world';
</script>

<h1>Hello {name}!</h1>

<style>
  h1 {
    color: purple;
  }
</style>

In the example above:

• <script> defines the JavaScript logic. The name variable is automatically reactive, meaning the DOM will update if the value of name changes.
• <h1> is the HTML that will be rendered.
• <style> is scoped CSS that only applies to this component.

2. Reactivity in Svelte

In Svelte, reactivity is automatic. Instead of calling setState or similar methods to update the UI, you simply assign new values to variables, and Svelte takes care of updating the DOM.

<script>
  let count = 0;

  function increment() {
    count += 1;
  }
</script>

<button on:click={increment}>
  Click me! {count}
</button>

The {} syntax is used for binding variables into HTML. Every time you click the button, the value of count is updated, and the DOM reflects the new value automatically.

3. Props in Svelte

Props in Svelte work similarly to how they do in other frameworks: they allow you to pass data from a parent component to a child component. To accept props in Svelte, you define them as variables with the export keyword:

<script>
  export let name;
</script>

<h2>Hello, {name}!</h2>

You can pass the prop like this:

<ChildComponent name="Svelte" />

4. Bindings and Events

Svelte makes it easy to handle user input by binding form elements to variables. This two-way data binding ensures that the UI and JavaScript logic are always in sync.

<script>
  let name = '';
</script>

<input bind:value={name} placeholder="Enter your name" />
<p>Your name is {name}</p>

Transitioning to SvelteKit

Now that we’ve covered the basics of Svelte, let’s talk briefly about how SvelteKit expands on this. SvelteKit is the application framework built on top of Svelte, which adds essential features like:

• File-based routing: Automatically creates routes based on your project’s file structure.
• Server-side rendering (SSR): Builds pages server-side to improve performance.
• Static site generation (SSG): Pre-renders pages into static HTML for blazing-fast load times.
• Client-side hydration: Merges the static HTML with client-side JavaScript to make your app fully interactive.

Next Steps

In the next installment, we’ll dive into these rendering strategies (SSR, SSG, and CSR) and show how SvelteKit seamlessly switches between them depending on your needs.

If you're ready to explore more advanced SvelteKit topics or have any questions, join us over in The Developers Lounge on Discord. We’ve got a mix of beginners and seasoned developers eager to help out. Let’s dive into SvelteKit together and build something awesome! Join here.