Svelte: A Beginner's Guide
()
About this ebook
Svelte is a relatively new JavaScript frontend framework for developing websites and web apps.
The praise that Svelte has received over the last two years is testament to it not being "just another frontend framework". It won "breakthrough of the year" on the State of JS survey 2019, followed by topping the satisfaction rating in 2020. It was also voted the most loved web framework in the Stack Overflow 2021 survey.
Svelte appeals to developers with its combination of a small bundle size, very good performance, and ease of use. At the same time, it comes packed with a lot of goodies. A simple state management solution to build upon is already provided, as well as ready-to-use transitions and animations. 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.
Simon Holthausen
Simon is passionate about web frontends. He has expert knowledge in Angular and Svelte and is also proficient in other frameworks, leading several projects to success. He is also part of the Svelte maintainer team, his most significant contribution being the VS Code extension.
Related to Svelte
Related ebooks
CSS Master Rating: 0 out of 5 stars0 ratingsJump Start Vue.js Rating: 4 out of 5 stars4/5Node.js: Novice to Ninja Rating: 0 out of 5 stars0 ratingsJavaScript: Novice to Ninja Rating: 2 out of 5 stars2/5JavaScript: Best Practice Rating: 0 out of 5 stars0 ratingsVue.js: Tools & Skills Rating: 0 out of 5 stars0 ratingsRails: Novice to Ninja: Build Your Own Ruby on Rails Website Rating: 4 out of 5 stars4/5ASP.NET Application Development Fundamentals Rating: 0 out of 5 stars0 ratingsModern Web Development with Deno: Develop Modern JavaScript and TypeScript Code with Svelte, React, and GraphQL (English Edition) Rating: 0 out of 5 stars0 ratingsExploring Web Components: Build Reusable UI Web Components with Standard Technologies (English Edition) Rating: 0 out of 5 stars0 ratingsVue.js for Jobseekers: A complete guide to learning Vue.js, building projects, and getting hired (English Edition) Rating: 0 out of 5 stars0 ratingsTailwind CSS Rating: 0 out of 5 stars0 ratingsInstant HTML5 Responsive Table Design How-to Rating: 0 out of 5 stars0 ratingsInstant StyleCop Code Analysis How-to Rating: 0 out of 5 stars0 ratingsReact.js Design Patterns: Learn how to build scalable React apps with ease (English Edition) Rating: 0 out of 5 stars0 ratingsVisual Studio Code: End-to-End Editing and Debugging Tools for Web Developers Rating: 0 out of 5 stars0 ratingsJump Start Git Rating: 0 out of 5 stars0 ratingsMake Bootstrap Themes Rating: 0 out of 5 stars0 ratingsjQuery Mobile Web Development Essentials - Third Edition Rating: 0 out of 5 stars0 ratingsExtending Jenkins Rating: 0 out of 5 stars0 ratingsInstant Handlebars.js Rating: 0 out of 5 stars0 ratingsJump Start PHP Environment: Master the World's Most Popular Language Rating: 0 out of 5 stars0 ratingsYour First Week With Node.js Rating: 0 out of 5 stars0 ratingsNode.js: Tools & Skills Rating: 0 out of 5 stars0 ratingsJump Start Sass: Get Up to Speed With Sass in a Weekend Rating: 0 out of 5 stars0 ratingsProfessional ASP.NET Design Patterns Rating: 4 out of 5 stars4/5Practical Rust 1.x Cookbook Rating: 0 out of 5 stars0 ratingsMicrosoft .NET Framework 4.5 Quickstart Cookbook Rating: 0 out of 5 stars0 ratings
Programming For You
Python Programming : How to Code Python Fast In Just 24 Hours With 7 Simple Steps Rating: 4 out of 5 stars4/5Coding All-in-One For Dummies Rating: 4 out of 5 stars4/5C++ Learn in 24 Hours Rating: 0 out of 5 stars0 ratingsPYTHON: Practical Python Programming For Beginners & Experts With Hands-on Project Rating: 5 out of 5 stars5/5SQL QuickStart Guide: The Simplified Beginner's Guide to Managing, Analyzing, and Manipulating Data With SQL Rating: 4 out of 5 stars4/5Excel : The Ultimate Comprehensive Step-By-Step Guide to the Basics of Excel Programming: 1 Rating: 5 out of 5 stars5/5Learn to Code. Get a Job. The Ultimate Guide to Learning and Getting Hired as a Developer. Rating: 5 out of 5 stars5/5C# 7.0 All-in-One For Dummies Rating: 0 out of 5 stars0 ratingsGrokking Algorithms: An illustrated guide for programmers and other curious people Rating: 4 out of 5 stars4/5HTML & CSS: Learn the Fundaments in 7 Days Rating: 4 out of 5 stars4/5Python: For Beginners A Crash Course Guide To Learn Python in 1 Week Rating: 4 out of 5 stars4/5Learn PowerShell in a Month of Lunches, Fourth Edition: Covers Windows, Linux, and macOS Rating: 0 out of 5 stars0 ratingsHacking: Ultimate Beginner's Guide for Computer Hacking in 2018 and Beyond: Hacking in 2018, #1 Rating: 4 out of 5 stars4/5Java for Beginners: A Crash Course to Learn Java Programming in 1 Week Rating: 5 out of 5 stars5/5Python: Learn Python in 24 Hours Rating: 4 out of 5 stars4/5Learn SQL in 24 Hours Rating: 5 out of 5 stars5/5SQL: For Beginners: Your Guide To Easily Learn SQL Programming in 7 Days Rating: 5 out of 5 stars5/5SQL All-in-One For Dummies Rating: 3 out of 5 stars3/5Data Structures and Algorithm Analysis in Java, Third Edition Rating: 4 out of 5 stars4/5Linux: Learn in 24 Hours Rating: 5 out of 5 stars5/5Game Development with Unreal Engine 5: Learn the Basics of Game Development in Unreal Engine 5 (English Edition) Rating: 0 out of 5 stars0 ratings
Reviews for Svelte
0 ratings0 reviews
Book preview
Svelte - Simon Holthausen
Preface
Who Should Read This Book?
This book is for developers with experience of JavaScript. If you’ve already used a JavaScript framework such as React, you’ll find this book an easy read, but it’s also suitable for readers with no prior experience of such frameworks.
Conventions Used
Code Samples
Code in this book is displayed using a fixed-width font, like so:
A Perfect Summer's Day
It was a lovely day for a walk in the park.
The birds were singing and the kids were all back at school.
You’ll notice that we’ve used certain layout styles throughout this book to signify different types of information. Look out for the following items.
Tips, Notes, and Warnings
Hey, You!
Tips provide helpful little pointers.
Ahem, Excuse Me ...
Notes are useful asides that are related—but not critical—to the topic at hand. Think of them as extra tidbits of information.
Make Sure You Always ...
... pay attention to these important points.
Watch Out!
Warnings highlight any gotchas that are likely to trip you up along the way.
Supplementary Materials
https://www.sitepoint.com/community/ are SitePoint’s forums, for help on any tricky problems.
books@sitepoint.com is our email address, should you need to contact us to report a problem, or for any other reason.
Chapter 1: Getting Started with Svelte
Svelte is a relatively new JavaScript frontend framework for developing websites and web apps.
The praise that Svelte has received over the last two years is testament to it not being just another frontend framework
. It won breakthrough of the year
on the State of JS survey 2019, followed by topping the satisfaction rating in 2020. It was also voted the most loved web framework in the Stack Overflow 2021 survey.
Svelte appeals to developers with its combination of a small bundle size, very good performance, and ease of use. At the same time, it comes packed with a lot of goodies. A simple state management solution to build upon is already provided, as well as ready-to-use transitions and animations. This introductory tutorial will shed light on how does Svelte achieves this. The following tutorials in the series will go into more detail on how to implement applications with Svelte using the various possibilities Svelte provides.
The Svelte Backstory
But first, a little back story on Svelte. Though it only entered the mainstream in the early 2020s, Svelte has been around for much longer.
The first commit to GitHub was in late 2016. Its creator is Rich Harris, an open-source wizard whose most prominent other invention is Rollup, a modern bundler. Rich Harris worked at the news magazine The Guardian as a graphics editor at the time. His daily routine was to create interactive visualizations for the website, and he wanted to have a tool that easily let him write these without compromising on bundle size or speed. At the same time, he wanted something approachable so other less tech-savvy colleagues would be able to create visualizations fast.
Out of these needs, Svelte was born. Starting from the news room, Svelte quickly gathered a small following in the open-source community. But it wasn’t until April 2019 where Svelte really got known to the world. This date marked the release of version 3, which was a complete rewrite with a focus on developer experience and approachability. Since then, Svelte’s popularity has risen a lot, more maintainers have joined the team, and Rich Harris has even joined Vercel to work on Svelte full-time.
Building a Simple Book List
Let’s dive into Svelte! We’ll build a small book list that allows us to add and remove books from our reading list. The final result will look something like the image below.
Final AppWe’ll start by scaffolding our project from a project template. We’ll use the official Svelte template. Alternatives would be to use a Vite-powered template or to use SvelteKit, a framework on top of Svelte for building full-fledged apps with built-in routing—but we’ll keep it as barebones as possible for this tutorial.
After downloading the template, switch to its folder and run npm install, which downloads all packages we need to get going. Then we’ll switch to App.svelte, where we’ll replace the contents with an HTML-only version to lay out the visuals we want:
Add Book
text />
My Books
We can write the above code directly