Why I Started Using Svelte
(And You Might Too)

Diving into My First Framework: Why Svelte?

A few months ago, I had just finished learning HTML, CSS, and JavaScript. As I started thinking about how to build real projects, I realized that writing everything from scratch would be inefficient. That’s when I discovered frameworks.

A framework provides a structured way to develop applications. Instead of manually coding everything, developers can follow a predefined architecture, which makes the process faster and more efficient.

As I explored different frameworks, two names kept appearing: React and Vue.js. Both are widely used, have large communities, and offer powerful features. At first, I was torn between them. However, after more research, I chose Svelte as my first framework.

I, personally, felt Svelte was more intuitive because it removes much of the complexity that comes with other frameworks. With React and Vue, I needed to understand concepts such as virtual DOM and state management. However, Svelte allowed me to write plain JavaScript in a reactive way, making it easier to grasp. The syntax is clean and easy to understand, with a more intuitive structure compared to other frameworks. I didn’t have to deal with a lot of boilerplate code, as Svelte allows me to write reactive logic directly within <script> without extra setup. This made it feel much more beginner-friendly.

What is Svelte?

Svelte is a framework for building user interfaces in the web environment. Unlike other frameworks, Svelte efficiently compiles code written in HTML, CSS, and JavaScript into optimized JavaScript at build time. Unlike React and Vue.js, which use a virtual DOM during runtime, Svelte transforms the code at build time, eliminating the need for a virtual DOM.

In addition to its intuitive syntax, Svelte’s reactivity feature is one of its key strengths. Other frameworks, such as React and Vue.js, require specific functions or APIs for state management. However, in Svelte, the UI updates automatically whenever a variable declared with let is modified. This makes Svelte a straightforward and efficient framework compared to others. It also allows data inside arrays and objects to be reactive, but more complex data structures, such as Set and Map, do not update reactively by default.

The structure of a Svelte component is as follows: it consists of three main parts—<script>, markup (HTML-like structure), and <style>. The <script> block handles logic and state, the markup defines the UI, and the <style> block contains scoped styles. This simple and modular structure makes Svelte easy to work with.

          <script>
            let count = 0;
          
            function increment() {
              count += 1;
            }
          </script>
          
          <button on:click={increment}>Click Me</button>
          <p>Count: {count}</p>
          
          <style>
            button {
              background-color: #ff3e00;
              color: white;
              border: none;
              padding: 10px 15px;
              font-size: 16px;
              cursor: pointer;
            }
          </style>
          

Svelte vs SvelteKit

Svelte is a framework designed specifically for building user interfaces. It focuses on writing components, making development fast and efficient. However, it does not provide built-in features for structuring an entire web application.

On the other hand, Sveltekit is a full-fledged framework for building complete web applications. It includes essential features such as routing, server-side rendering (SSR), static site generation (SSG), and API handling. Sveltekit extends Svelte, offering all the tools needed to develop complex applications efficiently.

Core Concepts of SvelteKit

A SvelteKit project consists of the following directories and files:

my-project/
              ├── src/
              │   ├── lib/
              │   │   ├── server/      # Server-only library files
              │   │   └── [your lib files]
              │   ├── params/          # URL parameter matchers
              │   │   └── [your param matchers]
              │   ├── routes/          # Application routes
              │   │   └── [your routes]
              │   ├── app.html         # Main HTML template
              │   ├── error.html       # Error page template
              │   ├── hooks.client.js  # Client-side hooks
              │   ├── hooks.server.js  # Server-side hooks
              │   └── service-worker.js # Service worker
              ├── static/              # Static assets (e.g., robots.txt, favicon.png)
              │   └── [your static assets]
              ├── tests/               # Test files (if Playwright is enabled)
              │   └── [your tests]
              ├── package.json         # Project metadata & dependencies
              ├── svelte.config.js     # SvelteKit configuration
              ├── tsconfig.json        # TypeScript configuration
              └── vite.config.js       # Vite configuration
            

SvelteKit is fundamentally based on Vite and provides a structure for building complete web applications, including UI components (`src/lib/`), pages (`src/routes/`), static assets (`static/`), and server-side code (`lib/server/`).

Routing

The official Svelte website describes it as follows: 'At the heart of SvelteKit is a filesystem-based router.' In other words, the project's directory structure directly determines the application's URL paths.

Basic Rules of Routing

• src/routes/ → Root route of the application
• src/routes/about/ → Generates the /about page route
• src/routes/blog/[slug]/ → Creates a dynamic route for /blog/[slug]

Square brackets [] allow developers to handle URL parameters dynamically.

Key Route Files (+ Prefix)

In SvelteKit, certain route files are prefixed with + to define routing functionality.

• +page.svelte → Defines the page component (UI)
• +page.js → Contains the load() function to fetch data for the page
• +page.server.js → Contains the load() function to fetch server-side data for a specific page
• +layout.svelte → Defines a shared page layout (e.g., nav, footer)
• +layout.js → Fetches layout-specific data
• +layout.server.js → Fetches server-side layout data
• +error.svelte → Custom error page for the route
• +server.js → Defines an API endpoint (supports GET, POST, PUT, DELETE)

Conclusion

So far, I have explored the core concepts of Svelte and SvelteKit, gaining a deeper understanding of how they work throughout this journey. Initially, just reading the documentation didn’t give me a full grasp of the concepts, but once I have started applying them in my actual projects, I realized how intuitive and simple they really are. Writing about what I’ve learned has further reinforced my understanding, making everything feel even clearer.

In the next post, I will share how I applied SvelteKit to build my own project and the challenges I encountered along the way. Stay tuned! 🛎️

Reference

🌐 Svelte Website