North Star

Rate this content
Bookmark

Svelte 5 is out, and it's radically different but intimately familiar.

This talk has been presented at JSNation US 2024, check out the latest edition of this JavaScript Conference.

FAQ

Svelte developers believe the web is a critically important technology with unmatched openness and potential as an application delivery mechanism, which needs to be preserved and improved.

Svelte 5 introduces explicit state annotation with runes, compiler augmented reactivity, style encapsulation, and improved developer experience with features like native scoped styles and transitions.

The main goal of Svelte is to provide a better developer experience without compromising user experience, aiming to be the framework with the best vibes rather than focusing solely on performance metrics.

The North Star symbolizes the guiding principle or mission for Svelte and its developers, representing the goal of making better software and contributing positively to the web's future.

Svelte is HTML-first, focusing on states rather than changes between states like JavaScript does. It allows developers to use valid HTML directly in components, offering a more intuitive approach compared to React's JSX.

SvelteKit is a companion project to Svelte, designed to solve broader application development problems such as setting up build tooling and defining routes, enhancing Svelte's capabilities.

Svelte aims to solve the problem of building resilient, accessible, and delightful software by focusing on ease of use, efficient performance, and a strong developer community.

Rich Harris was inspired by his childhood obsession with space and the concept of finding direction and purpose in uncertain environments, which he applies to his work in open source software.

Svelte uses compiler augmented reactivity and runes to manage reactivity at the language level, allowing for fine-grained control and efficient state updates without an explicit framework API.

Svelte is a user interface framework that started as a side project eight years ago by Rich Harris. It began as a compiler that transforms components into self-contained JavaScript, aiming for efficiency and ease of use.

Rich Harris
Rich Harris
29 min
18 Nov, 2024

Comments

Sign in or register to post your comment.
Video Summary and Transcription
As a child, the speaker was fascinated with space and finding direction. Svelte is an HTML-first approach to web development that simplifies tasks and offers efficient reactivity. The speaker reflects on Svelte's growth, goals, and design philosophy. Svelte aims to fix broken software and prioritize user focus. The future direction includes error boundaries, better debugging, and AI's role. Building open source software is challenging, and Rust's impact is discussed. The speaker values framework diversity and highlights the advancements and challenges faced by web development.
Available in Español: Estrella del Norte

1. Introduction to Space and Finding Direction

Short description:

As a child, I was obsessed with space and my father taught me how to read the sky and find the North Star. I've been thinking about how this concept applies to other areas of our lives. My name's Rich Harris, and this is a talk about finding direction and purpose in open source.

As a child, I was obsessed with space. I loved coming to places like this. On cloudless nights, I would go into our back garden with my father, himself a bit of a space cadet, and he would teach me how to read the sky. He taught me the names of the stars and the constellations. He taught me that the things that seem most fixed are not fixed, but that through careful observation you can begin to predict their movements. And he taught me how to find the North Star.

On a clear night, if you can find the Big Dipper, then you can extend this line a little further to find Polaris, so named because a line drawn from the South Pole to the North Pole and extended into space would just about meet it. It is the fixed point about which the heavens turn and it always points due north. Ancient mariners used Polaris to cross the oceans. In the early United States, escaped slaves followed it to freedom. Today we don't tend to rely on celestial navigation, we have Google Maps. But I've been thinking a lot lately about this concept of being able to orient ourselves in an otherwise uncertain environment and how it applies to other areas of our lives. What does it mean to be pointing the right way?

My name's Rich Harris, you can find me at richharris.dev on Blue Sky, this is a talk about finding direction and purpose in open source. Like many of you, I write software for a living. More specifically, I work on a user interface called Svelte. I started working on Svelte eight years and three days ago. It started out as an innocent, fun side project that I had no idea would take over my life. The big idea was this. What if a framework, rather than being code that ran in the browser, was a compiler that transformed your component into self-contained JavaScript? We called it the magical disappearing framework and compared to React, it produced astonishingly efficient bundles. Because it moved work out of the browser and into your build process, we could make your apps really small and really fast.

2. Evolution of Svelte and HTML Approach

Short description:

Svelte three came out in 2019 and asked a different question. Can we use the compiler to make web development itself faster? Svelte by itself only solves a narrow slice of the problem of building a web application. In 2020, we started working on a companion project called SvelteKit. Last month, we released Svelte 5. Unlike React, Svelte is unapologetically HTML first. Svelte takes a different approach, it takes HTML as the starting point.

Svelte three came out in 2019 and asked a different question. Can we use the compiler to make web development itself faster? If we're not constrained by the rules of JavaScript, can we make components easier to write with less boilerplate? That was the point at which people really started paying attention to Svelte.

It turns out that while most developers care very deeply about performance and bundle size in theory, in practice we pick the tools we enjoy using. Some thought leaders will try to shame you for this. But I think it's pretty reasonable that if you're going to spend 40 hours a week working on something, it may as well be fun. And with compilers, better developer experience needn't come at the expense of user experience. And Svelte has a really good developer experience, at least according to surveys like the state of JavaScript. I don't know how long we can keep this streak up, but I'm excited to find out.

Svelte by itself only solves a narrow slice of the problem of building a web application. Namely, keeping the DOM in sync with your application state. And leaves everything else to you, like setting up your build tooling, organizing your code, defining your routes, generating optimal bundles and deploying to different environments and many, many other problems. In 2020, we started working on a companion project called SvelteKit, which was the first major framework to be built on top of Vite. It's designed to solve those problems for you.

All of which is to say that the project has had many identities over the course of its life. Last month, we released Svelte 5. On one level, it's very much a continuation. It's a backward-compatible release, which you can drop into an existing project with minimal disruption. But on another, it's the most radical change the project has undergone yet. So at this point, let me take a moment to introduce you or reintroduce you to the new Svelte.

Unlike React, Svelte is unapologetically HTML first. JavaScript is a decent general purpose language. But as a language for describing user interfaces, it's a bad match. When you write JavaScript, you're primarily concerned with the changes between states that result from user interaction. But when you're describing a UI, you're primarily concerned with the states themselves. Frameworks slap a declarative layer on top of JavaScript that lets you sort of pretend. But you often find yourself working against the grain of the language.

Svelte takes a different approach. It takes HTML as the starting point. If you have some valid HTML, whether you wrote it yourself or co-pilot wrote it for you or you found it on CodePen or StackOverflow or even in your browser DevTools, you can drop that into a Svelte component and it will work. The same is not true of JSX, which superficially resembles HTML, but changes it in a variety of subtle and annoying ways.

QnA

Available in other languages:

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Full Stack Documentation
JSNation 2022JSNation 2022
28 min
Full Stack Documentation
Top Content
The Talk discusses the shift to full-stack frameworks and the challenges of full-stack documentation. It highlights the power of interactive tutorials and the importance of user testing in software development. The Talk also introduces learn.svelte.dev, a platform for learning full-stack tools, and discusses the roadmap for SvelteKit and its documentation.
The Wind and the Waves: The formation of Framework Waves from the Epicenter
JSNation 2022JSNation 2022
19 min
The Wind and the Waves: The formation of Framework Waves from the Epicenter
Top Content
Our understanding of innovation is wrong. Innovations are not introduced by a single point of light. The story of who invented the computer is not linear. Many steps forward led to the development of the computer. Angular has shaped and influenced multiple JavaScript waves, and Angular v14 simplifies development with standalone components.
Progressive Enhancement - What It Is and Isn’t, a Practical Introduction With Svelte
JSNation 2023JSNation 2023
20 min
Progressive Enhancement - What It Is and Isn’t, a Practical Introduction With Svelte
Progressive enhancement is a strategy that provides a baseline experience for all users while enhancing it for those with modern browsers. Feature detection and graceful degradation are complementary approaches to achieve this. Polyfills can emulate new browser functionality in old browsers. Progressive enhancement is about meeting user needs while considering performance. Building apps in SvelteKit allows for easy development of progressively enhanced apps. Svelte components and DOM content provide a convenient way to structure and update the UI. Form submission and progressive enhancement can be achieved by enabling file upload and processing when JavaScript is disabled.

Workshops on related topic

Build with SvelteKit and GraphQL
GraphQL Galaxy 2021GraphQL Galaxy 2021
140 min
Build with SvelteKit and GraphQL
Top Content
Featured WorkshopFree
Scott Spence
Scott Spence
Have you ever thought about building something that doesn't require a lot of boilerplate with a tiny bundle size? In this workshop, Scott Spence will go from hello world to covering routing and using endpoints in SvelteKit. You'll set up a backend GraphQL API then use GraphQL queries with SvelteKit to display the GraphQL API data. You'll build a fast secure project that uses SvelteKit's features, then deploy it as a fully static site. This course is for the Svelte curious who haven't had extensive experience with SvelteKit and want a deeper understanding of how to use it in practical applications.

Table of contents:
- Kick-off and Svelte introduction
- Initialise frontend project
- Tour of the SvelteKit skeleton project
- Configure backend project
- Query Data with GraphQL
- Fetching data to the frontend with GraphQL
- Styling
- Svelte directives
- Routing in SvelteKit
- Endpoints in SvelteKit
- Deploying to Netlify
- Navigation
- Mutations in GraphCMS
- Sending GraphQL Mutations via SvelteKit
- Q&A
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
JSNation 2023JSNation 2023
174 min
Developing Dynamic Blogs with SvelteKit & Storyblok: A Hands-on Workshop
Top Content
Featured WorkshopFree
Alba Silvente Fuentes
Roberto Butti
2 authors
This SvelteKit workshop explores the integration of 3rd party services, such as Storyblok, in a SvelteKit project. Participants will learn how to create a SvelteKit project, leverage Svelte components, and connect to external APIs. The workshop covers important concepts including SSR, CSR, static site generation, and deploying the application using adapters. By the end of the workshop, attendees will have a solid understanding of building SvelteKit applications with API integrations and be prepared for deployment.
Building with SvelteKit and GraphQL
JSNation 2022JSNation 2022
170 min
Building with SvelteKit and GraphQL
Workshop
Scott Spence
Scott Spence
Want to get familiar with the framework that took the top spot for most loved framework on the Stack Overflow developer survey in 2021?Svelte is a super versatile framework with no virtual dom unlike React and Vue, it's a compiler that builds your projects into vanilla HTML, CSS and JavaScript.This workshop will go over the basics of setting up with SvelteKit and querying data from a GraphQL API and using that data in SvelteKit to retrieve data for use in the client (browser).Key learnings:How to use SvelteKit to build a simple project retrieve data from a GraphQL API and display it in the client. Many of the core concepts of Svelte and SvelteKit will be covered in this workshop.
Build Full Featured Frontend App with Svelte
React Summit 2020React Summit 2020
192 min
Build Full Featured Frontend App with Svelte
Workshop
Mikhail Kuznetsov
Mikhail Kuznetsov
Svelte is a new prominent JS framework exposing “write less do more” philosophy. During this workshop you will get proficiency as a Svelte developer. We will be building an app that mimics the famous Q&A website stackoverflow.com. Will start developing from simple front end components, later we'll connect it to a real running backend and then test it and optimise for production.Attending a workshop is the fastest way to acquire a body of knowledge about building web apps with Svelte.