Svelte 3 Up and Running E-Book

Alessandro Segala

• Herausgeber: Packt Publishing
• Kategorie: Fachliteratur
• Sprache: Englisch

Seitenzahl: 178

Veröffentlichungsjahr: 2020

Beschreibung

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.

Leseprobe

Svelte 3 Up and Running

A practical guide to building production-ready static web apps with Svelte 3

Alessandro Segala

BIRMINGHAM—MUMBAI

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

Production reference: 1270820

Published by Packt Publishing Ltd.

Livery Place

35 Livery Street

Birmingham

B3 2PB, UK.

ISBN 978-1-83921-362-5

www.packt.com

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

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 professionalsImprove your learning with Skill Plans built especially for youGet a free eBook or video every monthFully searchable for easy access to vital informationCopy 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.

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.

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.

Table of Contents

Preface

Chapter 1: Meet Svelte

Modern web app development

How the web became static…again

Building apps with the JAMstack

Why Svelte?

Svelte versus the other frameworks

The Svelte project

Building a journaling app

App features

The back-end service

Summary

Chapter 2: Scaffolding Your Svelte Project

Setting up your environment

Installing Node.js

Setting up Visual Studio Code

Launching the back-end service

Scaffolding our project

Using a bundler

Scaffolding your project with Webpack

Installing dependencies from NPM

Configuring NPM scripts

Configuring Webpack

"Hello, Svelte!"

Creating the App component

The application's entrypoint

Compiling for production

Debugging Svelte applications

Using the Visual Studio Code debugger

Browser extension

Summary

Chapter 3: Building Reactive Svelte Components

Adding requirements

Dependencies

Utilities

The main.js file

The dotenv file

The stores.js file

The index file

Svelte templates and reactivity

Renderer.svelte component

Obj.svelte component

Calendar.svelte component

Bindings and events

AddForm.svelte component

ViewAdd.svelte component

Summary

Chapter 4: Putting Your App Together

Managing cross-component state

Svelte stores

Navbar.svelte component

Completing the app

Transitions

Svelte transitions

Adding transitions to our app

Other useful Svelte features

Slots

Actions

Lifecycle methods

Meta-elements

Summary

Chapter 5: Single-Page Applications with Svelte

Routing on the browser

Inspecting our makeshift router

Two approaches to client-side routing

Routing with hash-based routing

Defining the routes object

Updating the App component

The ViewNotFound.svelte component

Updating the ViewAdd component

Updating the List component

URL parameters – updating the ViewObject component

Updating the Navbar.svelte component

Navigating around the app

Automated testing for Svelte apps

Setting up the test environment

Creating tests

Running tests

Linting and enforcing style conventions

Adding ESLint

Configuring ESLint for your style

Running the linter

ESLint in Visual Studio Code

Summary

Chapter 6: Going to Production

Options to deploy your Svelte apps

Alternative services

Deploying to object storage

Creating an Azure account

Authenticating with the Azure CLI

Creating the storage account

Uploading files to your Azure storage account

Browsing the app from Azure Storage

Adding the CDN

Mapping a custom domain

The back-end service

Continuous Integration/Continuous Delivery

Putting our app's code on GitHub

Creating a GitHub action to deploy the app

Managing and destroying your resources

Summary

Chapter 7: Looking Forward

The Svelte ecosystem and community

Official websites and documentation

Svelte community website

Community support and connections

Sapper

More JAMstack resources

Summary

Other Books You May Enjoy

Chapter 1: Meet Svelte

When developers think of JavaScript frameworks, the options abound. Even within the narrow scope of front-end development that we're covering in this book, most developers will be familiar with (or have at least heard of) tools such as Angular, React, and Vue.

However, you picked up this book because you've heard of Svelte, and you've heard of it's growing in popularity. You've probably also heard that Svelte is different, and that there's something magical about it. I'm using the word magical on purpose: in fact, the original tagline for the Svelte project was "the magical disappearing UI framework."

This book is about the Svelte 3 front-end JavaScript framework, the last version as of the time of writing, which was released in April 2019.

You can use Svelte to build single, reusable components for projects of any kind, including larger applications written with Angular, React, Vue, or any other frameworks. Or, you can build entire web applications with it – just like we'll be doing in this book.

Among all the various frameworks, in most comparisons, Svelte 3 stands out for its ability to produce smaller code bundles that run faster in the browser, compared to Angular or React. This is a big part of what makes Svelte magical. But, perhaps even more importantly, developers largely enjoy working with Svelte 3; building components and applications with it feels to many very similar to using "vanilla JavaScript."

Throughout this book, I'll help you build your first, fully functional project with Svelte 3: a journaling app. We'll go from bootstrapping the development environment all the way to production with an automated continuous integration and delivery pipeline.

While building this sample app, we'll cover the majority of the features of Svelte 3. By the end, you should have a strong foundation to go and create your own apps with Svelte.

In this chapter, we'll cover the following topics:

Modern web app developmentWhy you should use SvelteDetails on the app we'll be building

Modern web app development

Before we dig deep into Svelte, or any other JavaScript framework for front-end development, it helps to take a quick trip down memory lane and look at how we arrived at modern web app development, and the role that frameworks play.

How the web became static…again

When I built my first website, in 1999, it was just like what you would expect: rich in flashy GIFs, scrolling texts, and eye-hurtlingly bright colors. It was also served by static hosts that were essentially the Italian equivalent of GeoCities.

I had built that website using the most advanced tools available for webmasters at the time: WYSIWYG editors (which stands for What You See Is What You Get): for me, that meant Microsoft FrontPage.

FrontPage worked just like Wix.com and other similar services of present day, where you build your website visually and the code is generated for you. It differed in that it was a native desktop app and, in the middle of the first browser war, it outputted code that ignored web standards and was optimized for Internet Explorer. Of course, all those websites were fully static. (In case you're wondering, I eventually "graduated" to Macromedia Dreamweaver, which was more standards-compliant; Macromedia was later acquired by Adobe, and Adobe Dreamweaver is still maintained today.)

Ten years later, in 2009, I was still building websites, but then I was making them dynamic, with server-side generation in PHP. Those were the days of "rich internet apps," where users could interact with a website, and "web 2.0," centered around collaboration and user-generated content.

Generating web pages on a server was not a novel concept per se: Java EE was released in 1999, Microsoft created ASP in 1996, and the original PHP came out in 1994! However, it was only in the second half of the '00s that those technologies became more accessible to small teams and individual developers, first of all thanks to new, simpler frameworks: for example, Django and Rails were both released in 2005. Additionally, in those years, we started seeing increasingly cheaper options for hosting web applications that require server-side rendering, especially with PHP.

Around the same time, interactivity started to appear in frontends too.

Developers had been building apps that run within browsers for a long time, leveraging plugins such as Java Applets, ActiveX objects, or Macromedia Flash (later, Adobe). Those were plagued with issues ranging from poor performance to serious security flaws, and they always ran almost completely isolated from the rest of the web page and the DOM. JavaScript was mostly considered a tool for designers to add small bits of interactivity to web pages and other gimmicks – just like its creators had originally meant it for.

Then, Google released Gmail in 2004 and the next year, they built Google Maps, and those were among the first large-scale applications to run primarily within the browser itself (any browser) without plugins. They popularized a new way of building web apps, where data is loaded dynamically in response to user action: this technology was then called Asynchronous JavaScript and XML (AJAX). The foundation for AJAX was the XMLHttpRequest API, which existed in Internet Explorer as an ActiveX object and was later implemented by other browsers in a compatible way too.

Another relevant change for JavaScript developers at the time was the creation of libraries such as Prototype in 2005 and jQuery the next year. At a time when browsers were still running JavaScript based on the ECMAScript 3 standard, these libraries provided great help by offering convenient features to web developers, such as easier ways to access and manipulate the DOM. They also helped by abstracting away the complexity of targeting all web browsers, including the then-dominant Internet Explorer 6 and its poor support for web standards.

With the help of AJAX and libraries such as jQuery, it became clear to developers that apps could run within a browser itself, and the amount and sophistication of web apps started growing.

Fast forward to 2020, and browser-based web apps are the new norm, to the point where we can often replace native, desktop apps with web ones running inside the client: from spreadsheets, to photo editing tools, to complex 3D video games.

The last decade brought along a set of innovations that helped make front-end development simpler, more accessible, and more powerful.