Svelte 3 Up and Running: A fast-paced introductory guide to building high-performance web applications with SvelteJS

168 Pages·2020·6.763 MB·English

by  Alessandro Segala

.d
e
vre
se
r sth
g
ir llA
.d
e
tim
iL
,g
n
ih
silb
u
P
tkca
P
.0
2
0
2
©
th
g
iryp
o
C
Segala, Alessandro. Svelte 3 up and Running : A Fast-Paced Introductory Guide to Building High-performance Web Applications with SvelteJS, Packt Publishing,
Limited, 2020. ProQuest Ebook Central, http://ebookcentral.proquest.com/lib/nyulibrary-ebooks/detail.action?docID=6326388.
Created from nyulibrary-ebooks on 2022-10-20 00:09:48.
Svelte 3
Up and Running
A fast-paced introductory guide to building
high-performance web applications with SvelteJS
Alessandro Segala
.d
e
vre
se
r sth
g
ir llA
.d
e
tim
iL
,g
n
ih
silb
u
P
tkca
P
.0
20 BIRMINGHAM—MUMBAI
2
©
th
g
iryp
o
C
Segala, Alessandro. Svelte 3 up and Running : A Fast-Paced Introductory Guide to Building High-performance Web Applications with SvelteJS, Packt Publishing,
Limited, 2020. ProQuest Ebook Central, http://ebookcentral.proquest.com/lib/nyulibrary-ebooks/detail.action?docID=6326388.
Created from nyulibrary-ebooks on 2022-10-20 00:09:48.
Svelte 3 Up and Running
Copyright © 2020 Packt Publishing
All rights reserved. No part of this book may be reproduced, stored in a retrieval system, or transmitted
in any form or by any means, without the prior written permission of the publisher, except in the case of
brief quotations embedded in critical articles or reviews.
Every effort has been made in the preparation of this book to ensure the accuracy of the information
presented. However, the information contained in this book is sold without warranty, either express or
implied. Neither the author, nor Packt Publishing or its dealers and distributors, will be held liable for
any damages caused or alleged to have been caused directly or indirectly by this book.
Packt Publishing has endeavored to provide trademark information about all of the companies and
products mentioned in this book by the appropriate use of capitals. However, Packt Publishing cannot
guarantee the accuracy of this information.
Commissioning Editor: Pavan Ramchandani
Acquisition Editor: Rohit Rajkumar
Senior Editor: Richard Brookes-Bland
Content Development Editor: Keagan Carneiro
Technical Editor: Deepesh Patel
Copy Editor: Safis Editing
Project Coordinator: Kinjal Bari
Proofreader: Safis Editing
Indexer: Tejal Daruwale Soni
Production Designer: Jyoti Chauhan
First published: August 2020
.d Production reference: 2241120
e
vre
se
r sth Published by Packt Publishing Ltd.
g
ir llA Livery Place
.de 35 Livery Street
tim
iL ,g Birmingham
n
ih
silb B3 2PB, UK.
u
P
tkca ISBN 978-1-83921-362-5
P
.0
2
0
2 © www.packt.com
th
g
iryp
o
C
Segala, Alessandro. Svelte 3 up and Running : A Fast-Paced Introductory Guide to Building High-performance Web Applications with SvelteJS, Packt Publishing,
Limited, 2020. ProQuest Ebook Central, http://ebookcentral.proquest.com/lib/nyulibrary-ebooks/detail.action?docID=6326388.
Created from nyulibrary-ebooks on 2022-10-20 00:09:48.
To those who made this book possible:
Maria Grazia, Francesco, and Clare, for their continued support.
All the people who contribute to open source projects and build incredible
things like Svelte.
– Alessandro Segala
.d
e
vre
se
r sth
g
ir llA
.d
e
tim
iL
,g
n
ih
silb
u
P
tkca
P
.0
2
0
2
©
th
g
iryp
o
C
Segala, Alessandro. Svelte 3 up and Running : A Fast-Paced Introductory Guide to Building High-performance Web Applications with SvelteJS, Packt Publishing,
Limited, 2020. ProQuest Ebook Central, http://ebookcentral.proquest.com/lib/nyulibrary-ebooks/detail.action?docID=6326388.
Created from nyulibrary-ebooks on 2022-10-20 00:09:48.
Packt.com
Subscribe to our online digital library for full access to over 7,000 books and videos, as
well as industry leading tools to help you plan your personal development and advance
your career. For more information, please visit our website.
Why subscribe?
• Spend less time learning and more time coding with practical eBooks and Videos
from over 4,000 industry professionals
• Improve your learning with Skill Plans built especially for you
• Get a free eBook or video every month
• Fully searchable for easy access to vital information
• Copy and paste, print, and bookmark content
Did you know that Packt offers eBook versions of every book published, with PDF and
ePub files available? You can upgrade to the eBook version at packt.com and as a print
book customer, you are entitled to a discount on the eBook copy. Get in touch with us at
[email protected] for more details.
At www.packt.com, you can also read a collection of free technical articles, sign up
for a range of free newsletters, and receive exclusive discounts and offers on Packt books
and eBooks.
.d
e
vre
se
r sth
g
ir llA
.d
e
tim
iL
,g
n
ih
silb
u
P
tkca
P
.0
2
0
2
©
th
g
iryp
o
C
Segala, Alessandro. Svelte 3 up and Running : A Fast-Paced Introductory Guide to Building High-performance Web Applications with SvelteJS, Packt Publishing,
Limited, 2020. ProQuest Ebook Central, http://ebookcentral.proquest.com/lib/nyulibrary-ebooks/detail.action?docID=6326388.
Created from nyulibrary-ebooks on 2022-10-20 00:09:48.
Contributors
About the author
Alessandro Segala is a Product Manager at Microsoft working on developer tools. He
has over a decade of experience building full-stack web applications, having worked
as a professional developer as well as contributing to multiple open source projects.
Alessandro is the maintainer of svelte-spa-router, one of the most popular client-side
routers for Svelte 3.
.d
e
vre
se
r sth
g
ir llA
.d
e
tim
iL
,g
n
ih
silb
u
P
tkca
P
.0
2
0
2
©
th
g
iryp
o
C
Segala, Alessandro. Svelte 3 up and Running : A Fast-Paced Introductory Guide to Building High-performance Web Applications with SvelteJS, Packt Publishing,
Limited, 2020. ProQuest Ebook Central, http://ebookcentral.proquest.com/lib/nyulibrary-ebooks/detail.action?docID=6326388.
Created from nyulibrary-ebooks on 2022-10-20 00:09:48.
About the reviewer
Russell Jones is an enthusiastic software engineer, who spends most of his time
programming in Javascript. He is a Founder of Functional, Inc and has been building
web applications since the 1990s. Russ lives in Portland, Maine, with his two children,
Ailee and Coda, who are his greatest engineering achievements. Pre-COVID, Russ spent
most of his time in coffeeshops smiling at the locals and making keyboard noises in the
corner. These days, Russ simply spends too much time playing video games.
Packt is searching for authors like you
If you're interested in becoming an author for Packt, please visit authors.
packtpub.com and apply today. We have worked with thousands of developers and
tech professionals, just like you, to help them share their insight with the global tech
community. You can make a general application, apply for a specific hot topic that we
are recruiting an author for, or submit your own idea.
.d
e
vre
se
r sth
g
ir llA
.d
e
tim
iL
,g
n
ih
silb
u
P
tkca
P
.0
2
0
2
©
th
g
iryp
o
C
Segala, Alessandro. Svelte 3 up and Running : A Fast-Paced Introductory Guide to Building High-performance Web Applications with SvelteJS, Packt Publishing,
Limited, 2020. ProQuest Ebook Central, http://ebookcentral.proquest.com/lib/nyulibrary-ebooks/detail.action?docID=6326388.
Created from nyulibrary-ebooks on 2022-10-20 00:09:48.
Table of Contents
Preface
1
Meet Svelte
Modern web app development   12 Building a journaling app   24
How the web became static…again   12 App features   24
Building apps with the JAMstack   14 The back-end service   25
Why Svelte?   21 Summary   26
Svelte versus the other frameworks   21
The Svelte project   22
2
Scaffolding Your Svelte Project
Setting up your environment   28 "Hello, Svelte!"   39
Installing Node.js   28 Creating the App component   39
Setting up Visual Studio Code   31 The application's entrypoint   40
.d Launching the back-end service   33 Compiling for production   43
e
vre
se Scaffolding our project   34 Debugging Svelte applications   44
r sth
gir llA Using a bundler   36 Using the Visual Studio Code debugger   44
.de Scaffolding your project with Browser extension   46
tim
iL Webpack   36 Summary   47
,g
n
ihsilb Installing dependencies from NPM   36
uP Configuring NPM scripts   37
tkca Configuring Webpack   37
P
.0
2
0
2
©
th
g
iryp
o
C
Segala, Alessandro. Svelte 3 up and Running : A Fast-Paced Introductory Guide to Building High-performance Web Applications with SvelteJS, Packt Publishing,
Limited, 2020. ProQuest Ebook Central, http://ebookcentral.proquest.com/lib/nyulibrary-ebooks/detail.action?docID=6326388.
Created from nyulibrary-ebooks on 2022-10-20 00:09:48.
ii Table of Contents
3
Building Reactive Svelte Components
Adding requirements   50 Renderer.svelte component   55
Dependencies   50 Obj.svelte component   60
Utilities   51 Calendar.svelte component   65
The main.js file   51
Bindings and events   66
The dotenv file   53
AddForm.svelte component   66
The stores.js file   54
ViewAdd.svelte component   70
The index file   54
Summary   74
Svelte templates and reactivity   55
4
Putting Your App Together
Managing cross-component Other useful Svelte features   86
state   76
Slots   86
Svelte stores   76 Actions   87
Navbar.svelte component   80 Lifecycle methods   89
Completing the app   82 Meta-elements   91
Transitions   84 Summary   92
Svelte transitions   84
Adding transitions to our app   85
5
.d Single-Page Applications with Svelte
e
vre
se
r sth Routing on the browser   94 Updating the List component   103
g
ir llA Inspecting our makeshift router   95 URL parameters – updating the
.de Two approaches to client-side routing   97 ViewObject component   103
timiL Updating the Navbar.svelte
,gn Routing with hash-based component   104
ih
silb routing   99 Navigating around the app   105
u
P
tkca Defining the routes object   99 Automated testing for Svelte
P .02 Updating the App component   100 apps   106
02 The ViewNotFound.svelte component   101
© th Updating the ViewAdd component   102 Setting up the test environment   107
g
iryp
o
C
Segala, Alessandro. Svelte 3 up and Running : A Fast-Paced Introductory Guide to Building High-performance Web Applications with SvelteJS, Packt Publishing,
Limited, 2020. ProQuest Ebook Central, http://ebookcentral.proquest.com/lib/nyulibrary-ebooks/detail.action?docID=6326388.
Created from nyulibrary-ebooks on 2022-10-20 00:09:48.
Table of Contents iii
Creating tests   108 Adding ESLint   110
Running tests   109 Configuring ESLint for your style   111
Running the linter   112
Linting and enforcing style
ESLint in Visual Studio Code   113
conventions   110
Summary   115
6
Going to Production
Options to deploy your Svelte Mapping a custom domain   126
apps   118 The back-end service   129
Alternative services   118
Continuous Integration/
Deploying to object storage   120 Continuous Delivery   132
Creating an Azure account   120 Putting our app's code on GitHub   132
Authenticating with the Azure CLI   121 Creating a GitHub action to deploy the
app   136
Creating the storage account    122
Managing and destroying your
Uploading files to your Azure storage
resources   141
account   124
Browsing the app from Azure Storage   125 Summary   142
Adding the CDN   125
7
Looking Forward
The Svelte ecosystem and Community support and connections   145
community   144
Sapper   146
.d Official websites and documentation   144
evre Svelte community website   144 More JAMstack resources   146
ser sth Summary   149
gir llA Other Books You May Enjoy
.d
e
tim Leave a review - let other
iL
,g readers know what you think   153
n
ih
silbu Index
P
tkca
P
.0
2
0
2
©
th
g
iryp
o
C
Segala, Alessandro. Svelte 3 up and Running : A Fast-Paced Introductory Guide to Building High-performance Web Applications with SvelteJS, Packt Publishing,
Limited, 2020. ProQuest Ebook Central, http://ebookcentral.proquest.com/lib/nyulibrary-ebooks/detail.action?docID=6326388.
Created from nyulibrary-ebooks on 2022-10-20 00:09:48.