Logo of Svelte.js

Svelte.js Day 1: Foundational Concepts

Jun 4, 2024 | Learning

The internet is fast evolving, and with it, the tools we use to create increasingly interactive digital experiences. Svelte is one such tool that holds incredible potential to further shift the paradigm. I plan to deep dive into developing using Svelte over the following articles. If you’re new to Svelte, you can start here to learn the foundational concepts and how to get started building your first Svelte app.

What is Svelte.js and SvelteKit?

Svelte.js

Svelte.js is an innovative front-end framework designed to simplify the process of building reactive web applications. Unlike traditional frameworks like React or Vue, which use a virtual DOM to manage reactivity and state, Svelte shifts the work from the browser to the build step. In essence, it is a compiler. This means that Svelte components are compiled into highly efficient imperative code that updates the DOM directly, resulting in faster and more lightweight applications.

Key features of Svelte.js include:

  • No Virtual DOM: Svelte operates without a virtual DOM, compiling components to optimized vanilla JavaScript at build time.
  • Reactivity: State management and reactivity are built into the language, making it intuitive and less boilerplate-heavy.
  • Less Code: Svelte’s syntax is streamlined, requiring less code to achieve the same functionality as other frameworks.

SvelteKit

SvelteKit is the official application framework for Svelte, designed to provide a comprehensive solution for building robust, production-ready web applications. It combines the simplicity and efficiency of Svelte with powerful features such as server-side rendering (SSR), static site generation (SSG), and seamless client-side navigation.

Key features of SvelteKit include::

  • Hybrid Rendering: Supports both SSR and SSG, allowing for optimal performance and SEO.
  • File-based Routing: Simplifies routing by using the filesystem structure.
  • TypeScript Support: First-class TypeScript support for type-safe code.
  • Optimized Build: Efficient bundling and optimization for faster load times and reduced bundle size.

Similarities and Differences between Svelte.js and React.js

Svelte and React get mentioned together often, its understandable. But while the share similarities, they are also very different.

Some similarities include:

  • Both are used to build user interfaces.
  • Component-based architecture.
  • Support for state management and reactivity.

However, some major differences include:

  • Compilation: Svelte compiles components at build time, whereas React uses runtime reconciliation with a virtual DOM.
  • Performance: Svelte often results in smaller and faster applications due to its compile-time optimizations.
  • Syntax: Svelte’s syntax is more straightforward and less verbose than React’s JSX.
  • Learning Curve: Svelte’s simpler API and fewer abstractions make it easier for beginners to pick up compared to React.

Why is Svelte Great?

By now, it should be pretty clear why Svelte stands out.

Key features of SvelteKit include::

  • Performance: By compiling components to vanilla JavaScript, Svelte eliminates the overhead associated with virtual DOM diffing, resulting in faster updates and reduced runtime costs.
  • Simplicity: The syntax is clean and concise, making it easier to read and write. This reduces development time and improves maintainability.
  • Reactivity: Built-in reactivity makes managing state straightforward, avoiding the need for external state management libraries.
  • Bundle Size: Svelte produces smaller bundle sizes, which translates to faster load times and better user experiences.

How Can I Start Learning Svelte?

Svelte’s official channels, as well as popular code learning forums are packed with resources to help you learn Svelte. To help you get started, I’ve included some valuable resources:

  1. Official Documentation: Svelte.js and SvelteKit offer comprehensive guides and tutorials.
  2. Svelte Tutorial: The official Svelte tutorial provides an interactive way to learn the basics.
  3. Courses:
  4. Community:
    • Svelte Society: A community-driven site with resources, tutorials, and events.
    • Svelte Discord: Join the community chat to ask questions and get help.

Steps to Create a SvelteKit App

This tutorial assumes that you have a foundational understanding of web development. Before beginning you should have a popular IDE installed and already be familiar with terminal commands. If not, I recommend reading about it here. I often recommend Visual Studio or Atom as a great starting point for programmers. Both are free, scalable, and versatile for a number of programming language.

Now that that’s out of the way, lets get started!

Install Node.js: Ensure you have Node.js installed. You can download it from nodejs.org.

Create a New SvelteKit Project: Open your terminal and run:

npm create svelte@latest my-svelte-app

You’ll be asked a series of questions about which tools you’d like to install and whether you want to apply a template or barebones app. It its your first time, try it with the template to get a feel of what is possible with Sveltekit. Additionally, absolutely install it with prettier and Typescript.

Once done, Navigate to the Project Directory:

cd my-svelte-app

Install Dependencies:

npm install

Run the Development Server:

npm run dev

Open Your Browser: Open your browser and navigate to http://localhost:3000. You should see your new SvelteKit app running.

Start Coding:

The main entry point for your application is src/routes/+page.svelte. To effectively edit app files, its recommended you use an Integrated Development Environment, or IDE for short. IDEs are a type of software that allows you to build and test how the your application will run prior to shipping. One of the easiest and most popular IDEs available is VS Code, though there are others like Atom and JetBrains. For this and other exercises, we will use VS Code as our default IDE.

Opening the main Svelte App folder with VS Code, you can begin browsing and editing your app. We recommend

Use the file-based routing system by creating new .svelte files in the src/routes directory.

By following these steps, you’ll be able to set up a new SvelteKit application and start building with one of the most exciting frameworks in the web development landscape today. Happy coding!