Book Image

Svelte 3 Up and Running

By : Alessandro Segala
Book Image

Svelte 3 Up and Running

By: Alessandro Segala

Overview of this book

Svelte is a modern JavaScript framework used to build static web apps that are fast and lean, as well as being fun for developers to use. This book is a concise and practical introduction for those who are new to the Svelte framework which will have you up to speed with building apps quickly, and teach you how to use Svelte 3 to build apps that offer a great app user experience (UX). The book starts with an introduction to Svelte 3, before showing you how to set up your first complete application with the framework. Filled with code samples, each chapter will show you how to write components using the Svelte template syntax and the application programming interfaces (APIs) of the Svelte framework. As you advance, you’ll go from scaffolding your project and tool setup all the way through to production with DevOps principles such as automated testing, continuous integration, and continuous delivery (CI/CD). Finally, you’ll deploy your application in the cloud with object storage services and a content delivery network (CDN) for best-in-class performance for your users. By the end of this book, you’ll have learned how to build and deploy apps using Svelte 3 to solve real-world problems and deliver impressive results.
Table of Contents (9 chapters)

Chapter 5: Single-Page Applications with Svelte

With Chapter 4, Putting Your App Together, behind us, we now have a fully-working application that lets us add journal entries, list all of the entries in a given day, and read them.

We've been building the application following the principles of the JAMstack, but we also built it as a Single-Page Application (SPA). This is an app that, once built by Webpack, contains all the views in a bundle with a single HTML file.

Because of that, we are left with one major change left to do to our app: adding (proper) client-side routing. We'll look at what that is and how we can implement it in this chapter.

In addition to that, we will also look at implementing some additional tooling to improve the quality of our code: setting up automated testing with Nightwatch.js (although we won't be writing tests at this time) and enabling linting.

In this chapter, we'll learn about the following:

  • The two kinds of client...