Svelte & SvelteKit: Why the Simplest Javascript Framework is a Total Bumhole to Work With [In a Good Way]

7 min readSep 13, 2023

By Fachry Dwi Handoko and Faraihan Rafi Adityawarman

Honorable mention to Muhammad Yusuf Haidar

Introduction

There is arguably no greater pain in web development than trying to center a <div>. Just ask your friendly neighborhood software engineer or UX designer; certainly, he or she could attest to that.

Exactly like poking a hibernating bear’s backend in a claustrophobic cave with a stick [unless you’ve got chalk to draw a defensive circle], there’s a rather simple trick to it:

  style.css

  parent-element
      display: flex
      justify-content: center
      align-items: center

  child-element
      margin: 0 auto

But you know what’s way better than CSS styling manually, for each semantic HTML element, one by one? Frameworks. That’s right; the hype is real. In fact, I could almost hear a random Jamstack developer out there, just screaming, “LET’S GOOOO !!!”. Granted, that’s actually Fachry, as of the time of writing.

Colloquially known as a web framework (WF) or web application framework (WAF), it is a software development toolkit that is designed to support and ease the creation of web applications with additional integrated features, such as APIs, microservices, and or databases. In essence, a framework is a complete package to rapidly build a given software project [1].

This article will serve to explain the underlying principles of a specific web framework: Svelte. Additionally, we will go over its renowned combination of client-side and server-side features, which have garnered popularity amongst generations of software developers, both old and new, as well as a comparison to other modern frameworks.

SVELTE

Svelte is an open-source web framework created as the brainchild of Rich Harris and first released in 2016 [2]. As a Javascript framework and compiler, it offers a fresh, productive approach to facilitating the creation of frontend interfaces, and its application framework, SvelteKit, is a static site generator for Jamstack.

Just as NEXT is helpful when working with React, SvelteKit is an extensional framework that has become highly in-demand by modern web developers. It offers a number of specialized features such as server-side rendering, code-splitting, components for serverless platforms, routing, and many more [2].

What’s different here, however, is that SvelteKit proposes a different approach than the very popular front-end frameworks like React, Vue, or Angular. Since these frameworks do most of the work in the user’s browser, e.g., handling a virtual DOM, Svelte [and SvelteKit] goes through a compilation step. The results are high-performance and browser-friendly JavaScript bundles with small package sizes [3].

While the Svelte application’s build process is the biggest innovation of the framework, it’s also very easy to learn, has great documentation, and comes with great experience testimonials from developers. In addition, there are cross-platform frameworks like Svelte Native that allow developers to use Svelte to build mobile applications for iOS and Android operating systems [2] [3].

And the real sweet schtick?

Svelte is considered revolutionary among frontend developers; what sets it apart from its counterparts is an innovative approach to building user interfaces. Unlike most other frameworks, which rely on a virtual DOM (Document Object Model) to update the UI efficiently, Svelte takes a compiler-centric approach [3].

What does that even mean?

In Svelte, components are compiled at build time, which means there is no runtime library required in the final output. This leads to smaller bundle sizes, faster load times, and improved runtime performance compared to frameworks that rely on a virtual DOM. Using its “reactive declarations” and “stores”, you can easily track and update variables when their dependencies change, and also enable global state management, making it simple to share data across components [4].

At the heart of Svelte is a customized compiler that takes Svelte component files marked with a .svelte extension, then compiles them into highly optimized JavaScript code during the development build process [3]. This compilation step results in efficient, low-level code that directly manipulates the DOM, eliminating the need for a virtual DOM like in other frameworks.

One real-world example of Svelte development is for building stateful single-page or real-time applications, such as chat apps, collaborative tools, and online gaming interfaces, thanks to its reactivity and capability for interactive widgets, forms, and input components that require real-time validation and user feedback [4].

  # Creating a Svelte Project

  # create a new project in the current directory
  npm init svelte

  # create a new project in my-app
  npm init svelte my-app

As stated beforehand, Svelte embraces the concept of components, which allows developers to create modular, reusable pieces of UI code. These reusable components are intuitive to write and work seamlessly together. And fret not, for Svelte has a low learning curve. Its syntax is straightforward and easy to pick up, especially for those familiar with the basic languages of HTML, CSS, and JavaScript. It doesn’t introduce a whole new programming language or complex abstractions, making it very approachable for beginner-level developers [5].

  # index.svelte  -  My SvelteKit Movie App 

  <script>
      import PopularMovies from "../components/PopularMovies.svelte";
      import SearchMovies from "../components/SearchMovies.svelte";
      import { fly } from 'svelte/transition';
      export let popular;
  </script>

  <section in:fly={{ y: 50, duration: 500 }} out:fly={{ duration: 500 }}>
      <SearchMovies />
      <PopularMovies {popular} />
  </section>

SvelteKit also includes a powerful in-built routing system that is declarative and intuitive, making it easy to define routes and navigate between pages. Routing in SvelteKit is file-based, and it naturally supports server-side rendering (SSR) [3]. This allows a developer to render pages on the server for better SEO purposes and a decreased initial load times while maintaining the interactivity of a single-page application.

A Rising Star

The recent [stable] release of Svelte is a relatively new ordeal compared to Nuxt or NEXT, so its developer ecosystem and community are still growing. However, it has since quickly gained significant traction and maintains an active community that openly contributes to its development and offers full support [6]. Moreover, Svelte’s popularity grew by a staggering 150% in the last two years, based on an increase of 8–20% in installation and usage.

Additionally, it had gained a higher satisfaction rate than both React or Vue, as well as being considered the most interesting frontend framework in the last three years [6] [7] [8].

Frontend frameworks ranked by State Of JS — 2021

When compared to other modern frameworks in the building of user-interfaces, such as NEXT, Svelte is overall superior for a multitude of different reasons. Yet each has its own range of strengths and weaknesses. Truth be told, it depends on what you’re after; how your workflow goes; what type of system you’re building; whichever you’re most comfortable working with; and so on.

Nevertheless, Svelte and NEXT are both popular frameworks among frontend developers. The main difference is in its architecture; Svelte is a compiler-centric framework with a simple syntax and eliminates the need for a virtual DOM, while NEXT is a React-based framework that focuses on server-side rendering (SSR) and static site generation (SSG) to improve SEO and initial load times with a virtual DOM at its core.

NEXT places a great emphasis on modular, scalable, and maintainable code via dependency injection, SOLID, and decorators; asynchronous features that characterize a domain-driven design (DDD) architecture. The likes of which came to define the majority of modern industry standards in web development [9].

While SvelteKit is a great tool that excels in scenarios where performance and simplicity are critical, this aspect may struggle when handling large-scale, centralized corporate systems [10]. This forces SvelteKit applications to adopt a greater degree of optimization in order to keep up with NEXT, which has the advantage of real-time and microservice-based systems.

Lastly, NEXT benefits from React’s larger and more mature ecosystem, having a vast number of third-party packages, libraries, and plugins available, along with a well-established community [8].

Ultimately, and I simply can not stress this enough, pick the right tool for the job and keep in mind of you and your team’s core competencies. Be adaptable, be Agile. That being said, move over Vue and Angular. There’s a new kid on the block. All the while, Svelte’s unique identity and simplicity will ensure its endurance for decades to come.

FURTHER READS

For other references about Svelte, make sure to check these out:

REFERENCES

GeekForGeeks (2023). “Web Development”. https://www.geeksforgeeks.org/web-development/.
Fireship (2021). “Svelte in 100 Seconds”. Svelte in 100 Seconds.
Fireship (2023). “SvelteKit in 100 Seconds”. SvelteKit in 100 seconds.
Mozilla Developers (2023). “Getting started with Svelte”. https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Svelte_getting_started. MDN Web Docs. Retrieved: 09/10/2023.
Svelte.Dev. “Svelte components”. https://svelte.dev/docs/svelte-components.
Ideo Software (2020). “Svelte — the “new” frontend framework!”. https://dev.to/ideoagency/svelte-the-new-frontend-framework-4ghf. Dev.to. Retrieved: 09/10/2023.
Twardowska, Beata (2023). “Why Svelte is the Next Big Thing in JavaScript Development”. https://naturaily.com/blog/why-svelte-is-next-big-thing-javascript-development. Naturaily. Retrieved: 09/10/2023.
Shawn Wang and Mark Erikson (2021). “The State of JS”. https://2021.stateofjs.com/en-US/libraries/front-end-frameworks.
McMahon, Jaimie (2023). “SvelteKit vs. Next.js”. https://cloudcannon.com/blog/sveltekit-vs-next-js/. Cloud Cannon. Retrieved: 09/11/2023.
Taylor, Will (2021). “Why you should consider building your next project with Svelte”. https://www.willtaylor.blog/svelte-next-project/. Will Taylor Blog. Retrieved: 09/12/2023.