Appearance
Preface
Why Svelte, Vite and what we mean by "large scale apps" in this book.
Svelte is a modern JavaScript framework for building user interfaces. It offers several advantages over other frameworks, such as:
Minimal boilerplate and size overhead
Faster loading times due to code-splitting and lazy-loading
Improved runtime performance through virtual DOM optimization
Vite is a modern build tool for JavaScript projects that aims to provide fast and efficient builds. It offers several benefits, including:
- Faster build times and development experience compared to traditional bundlers.
- Lower initial load times, as only the essential code is loaded
- Improved build size, as Vite only includes the necessary code
- Lightweight and optimized for modern web development.
When we refer to "large scale apps", we mean applications that have a large code base, a large number of users, and a wide range of functionality. These applications typically require efficient and scalable code that can handle high traffic and large amounts of data.
In this kind of projects there are several common concerns that arise, such as:
- Code maintenance and scalability
- Code quality and performance
- Code organization and structure
To address these concerns, here we will outline best practices for code organization and structure, such as using a centralized state manager and implementing strong-type checking with TypeScript. Additionally, we will focus on writing unit tests for our models and components, which will help improve code quality and catch bugs early in the development process.
Our ultimate goal is to build a foundation that can handle the demands of our app and be easy to expand and maintain as the code base grows.
Goal
The primary aim of this book is to guide you through the process of building a scalable Svelte application by following best practices for project structure, file organization, naming conventions, state management, type checking with TypeScript, and compositional approaches using hooks.
Throughout the chapters, we will grow our simple project into a robust, large-scale application that is easy to expand and maintain, showcasing how patterns, conventions, and strategies can lay a solid foundation and keep the code organized and uncluttered.
We will build a TypeScript API client that can seamlessly switch between serving static mock data and communicating with a live API, allowing for front-end development to commence even before the back-end API is fully functional. Additionally, we will delve into topics such as internationalization, localization, and advanced techniques, to round out our comprehensive guide to building a scalable Svelte application.
IMPORTANT: We will initially write code that allows us to achieve the desired functionality quickly, even if it requires more code, but then we constantly "rework" it (refactoring) to improve it and find solutions that allow us to reduce the amount of code used, or to organize it in a clear and easy way that is easy to expand and maintain. So arm yourself with a lot of patience!
Audience
The audience for this book is from beginners with some experience in MV* applications, to intermediate developers. The format is similar to a cookbook, but instead of individual recipes we'll go through creating a project and keep enhancing, refactoring, and make it better as we move forward to more advanced chapters to show different patterns, architectures, and technologies.
Note: Some of the patterns illustrated here are not specific to Svelte, but can applied in any application written in TypeScript or JavaScript. For example, most code from Chapters 3, 7, and others can also be used in Vue.js/React/Angular or other front-end apps. Similarly, code from Chapters 3 and 14 can also be used in NodeJS apps.
Text Conventions
I will highlight most terms or names in bold, rather than define different fonts/styles depending on whether a term is code, or a directory name or something else.
Thanks
I would like to thank first and foremost Rich Harris[1] for having created Svelte[2][3][4]. I want to thank my son for helping me proof read and validate the text and sample code in this book. I also would like to thank all the developers that over the time helped me correct things in the book and provided valuable feedback.
About me
I have worked as a software developer for more than 20 years. I switched career from being a full time musician when I was 30 years-old and then became a graphic designer, then transition to a web designer when internet became "a thing", and for many years after that worked as full-stack developer using Microsoft .NET, JavaScript, Node.js and many other technologies. You can read more about me on my personal website https://www.damianofusco.com and LinkedIn profile https://www.linkedin.com/in/damianofusco/. You will find me also on Twitter, @damianome, and GitHub github.com/damianof