Everand Logo

Welcome to Everand!

  • Discover millions of ebooks, audiobooks, and so much more with a free trial

    Only $11.99/month after trial. Cancel anytime.

    Svelte: A Beginner's Guide
    Svelte: A Beginner's Guide
    Svelte: A Beginner's Guide
    Ebook107 pages1 hour

    Svelte: A Beginner's Guide

    By Simon Holthausen

    ()

    Read preview

    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.

    LanguageEnglish
    PublisherSitePoint
    Release dateFeb 10, 2022
    ISBN9781098129569
    Svelte: A Beginner's Guide
    Author

    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

    Programming For You

    View More
    View More

    Related podcast episodes

    Related articles

    • Article

      In Brief

      Jun 1, 2021

      Mu is a code editor for many forms of Python. We can write standard Python 3 code, create web apps and write code for microcontrollers such as the new Raspberry Pi Pico. Mu is designed for new users and does away with complicated IDEs in favour of a

      1 min read

    • Article

      What Is The Future Of Game Streaming Now That Stadia Is Dead?

      Oct 31, 2022

      Once hyped as being ‘the future of gaming’, the Google Stadia game streaming service was officially, just three years after launch and before even making it to Australian shores. When game streaming first launched we did have some apprehension about

      2 min read

    • Article

      Fast And Easy Image Processing

      Apr 4, 2023

      Credit: https://github.com/oguzhaninan/korkut Shashank Sharma is a trial lawyer in New Delhi and an avid Arch user. He’s been writing about open source software for 20 years and lawyering for 10. You wouldn’t think of the command line as the go-to re

      4 min read

    • Article

      Calculate Linux 22

      Jan 11, 2022

      Calculate Linux 22
      2 min read

    • Article

      Access Your Mac Anywhere

      Nov 8, 2022

      Access Your Mac Anywhere
      2 min read

    • Article

      Common Errors

      Aug 27, 2019

      If you receive a ‘Script not found’ error, this probably means that you don’t have the mod scripts installed in your Minecraft directory. Check that you’ve replaced .minecraft with the one from McPiFoMo; this should include mcpipy, which will be full

      1 min read

    • Article

      Saving and Executing Your Code

      Jul 31, 2019

      Saving and Executing Your Code
      2 min read

    • Article

      GO Inside Parsing – How Go Handles The Code

      Jul 30, 2019

      This tutorial has two aspects: a theoretical one and a practical one. In the theoretical part, you will learn about parsing, grammar and regular expressions; this is how languages are built and therefore understood in terms of construction and usage.

      8 min read

    • Article

      Executing Code from the Command Line

      Jul 31, 2019

      Executing Code from the Command Line
      2 min read

    • Article

      An Introduction To Rabbitmq

      Jun 29, 2021

      RabbitMQ is a Message Broker, which means that it can safely hold messages generated by applications and make them available to other applications. The main advantages are reliability, support for clustering and high-availability queues, tracing capa

      1 min read

    • Article

      The Art Of AI

      Feb 7, 2023

      “Everywhere you look, people are discussing the AI chatbot ChatGPT. It’s been applied to write email campaigns, code and articles. It’s been banned in some schools as students use it to write essays. Singer Nick Cave called ChatGPT’s output in the st

      1 min read

    • Article

      Newsdesk

      May 30, 2023

      Newsdesk
      2 min read

    • Article

      Meet The Team

      May 3, 2022

      I’ll be keeping my Jammy Jellyfish installed. It’s not yet stung me. But will it become my new daily driver? I’ll reserve judgement till the next Pop!_OS LTS comes out, I suppose. Plus there will surely be a plethora of other great Jellyfish-spawn di

      1 min read

    Related categories

    Reviews for Svelte

    0 ratings

    0 ratings0 reviews

    What did you think?

    Tap to rate

    Review must be at least 10 words

      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 App

      We’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

       

    • A book

      • We can write the above code directly

      Enjoying the preview?
      Page 1 of 1