What is Svelte?

Welcome to the first lesson of Svelte Basics: Getting Started and Core Concepts. In this course, you’ll learn how to build modern, efficient, and interactive web applications using Svelte, a cutting-edge JavaScript framework. Svelte is unique because it shifts much of the work to the build step, compiling your components into highly optimized vanilla JavaScript. This approach eliminates the need for a runtime framework, resulting in faster performance and smaller bundle sizes.

Unlike traditional frameworks like React or Vue, which rely on a virtual DOM and runtime to manage updates, Svelte compiles your code ahead of time. This means that instead of shipping a framework to the browser, Svelte applications run with minimal overhead. By the end of this lesson, you’ll understand what makes Svelte special and why it’s a compelling choice for modern web development.

Svelte’s core philosophy is to move the heavy lifting from the browser to the build step. Unlike traditional frameworks that rely on a runtime and a virtual DOM to manage updates, Svelte compiles your code into optimized JavaScript before it even reaches the browser. This results in faster execution and smaller bundle sizes, as there’s no need to ship an additional framework to the client.

Before diving deeper into how Svelte compiles your code, it's important to understand what compilation is and how it differs from transpilation.

• Compilation is the process of converting code written in a high-level language into lower-level machine code (or another optimized form) that can run efficiently. This is common in languages like C or Rust, where the code is compiled into machine code before execution.
• Transpilation, on the other hand, is the process of converting code from one language (or syntax) to another at the same level of abstraction. For example, TypeScript is transpiled into JavaScript because both are high-level languages.

In the case of JavaScript frameworks, React and Vue typically use transpilation to convert JSX (JavaScript XML) or SFC (Single-File Components) into JavaScript that can run in the browser. Svelte, however, takes a different approach—it compiles its components into highly optimized JavaScript, eliminating the need for a virtual DOM at runtime.