Svelte combines a small bundle size, very good performance, and ease of use. This book will start by shedding light on how Svelte achieves this, and then we'll look at how to implement applications with Svelte using the various possibilities Svelte provides.

Svelte: A Beginner's Guide

Preface

Svelte is a relatively new JavaScript frontend framework for developing websites and web apps.

Getting Started with Svelte

Welcome to the second part of our Svelte intro series! In the first part, we got introduced to the history of Svelte and made our first little steps at writing a simple component. In this and the following parts, we’ll have a closer look at specific aspects of writing Svelte code. In the end, you’ll be able to create applications in Svelte that scale. We’ll start with taking a deep dive into Svelte’s template syntax.

Template Syntax

In the introductory tutorial of this series, we learned that Svelte is able to compile regular variable assignments inside components into something that will automatically update the view. Whenever you assign something to a variable, Svelte will notice that and schedule a rerender for the next browser paint. In the second part, we had a closer look at the component syntax to see how to add dynamic behavior to our HTML code. In this part, we’ll focus on the contents of the  tag and take a look at how we can run other code in reaction to a variable change.

Reactive Statements

Svelte’s reactivity inside Svelte components is intuitive and easy. Because Svelte is a compiler, it can transform regular variable assignments into something the UI will rerender when it changes (as we saw in Part 2 of the series). Reactive assignments make derived or computed variables very easy (as we saw in Part 3 of the series).

Stores

Components are at the core of frontend frameworks like Svelte. They are the primary unit for organizing and implementing your view layer. Components encapsulate a specific UI and/or behavior—such as the look of a button, a list containing arbitrary elements, or a specific section of a page.

Component Interaction Concepts

This is the final tutorial in our series introducing Svelte. We’ve come quite a long way. The introductory tutorial provided some background on Svelte’s history, as well as the first steps of writing an application with it. The tools for building such an application were then introduced in more detail in the following tutorials. We took a deep dive into the template syntax of Svelte, which is an extension of HTML. We saw how to use reactive statements to react to variable changes—for example, in order to create computed variables. We then looked at Svelte stores, which can be used to share state across multiple components, and we learned about various ways to integrate components with each other.

Community Questions