Svelte.js - The Complete Guide

Svelte.js - The Complete Guide

by Maximilian Schwarzmüller
Released July 2019
Publisher(s): Packt Publishing
ISBN: 9781838988937

Watch it now on the O’Reilly learning platform with a 10-day free trial.

O’Reilly members get unlimited access to books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial

Video description

If you want to build reactive user interfaces that load quickly and run fast, Svelte.js is a tool you shouldn't overlook! Svelte.js (or just "Svelte") is a modern JavaScript compiler that allows you to write and compile efficient and easy-to-understand JavaScript code that runs in the browser. In this course, you’ll learn how to write a frontend application using JavaScript, following the rules laid out by Svelte. The Svelte compiler will then produce a small and highly optimized JavaScript bundle which can be easily deployed. This course covers all about Svelte, helping you understand how it works, what its core features are, and how to run your final app on a real server! Svelte.js is a great alternative to JavaScript frameworks and libraries such as React.js, Angular, or Vue for building highly reactive, modern user interfaces for the web. Moreover, it enables you to build your web projects with less code and helps build faster apps!

What You Will Learn

  • Understand Svelte and why you must you use it
  • Grasp the core features and base syntax of Svelte
  • Render conditional and list content
  • Write reactive and fast web applications
  • Get to grips with using components - pass data around and create reusable building blocks
  • Efficiently manage data in your application with Svelte stores
  • Reach out to a backend server and send and fetch data
  • Pre-render your app on a server and improve SEO

Audience

This course is for anyone interested in writing high-performance frontend applications with Svelte. You don’t need advanced JavaScript knowledge to get started, but a solid understanding of its basics is expected. If you already know modern JavaScript frameworks and are looking for a lightweight, production-ready alternative, you’ll find this course useful.

About The Author

Maximilian Schwarzmüller: Maximilian Schwarzmüller: A professional web developer and instructor, he has never stopped learning new programming skills and languages since the age of 13. In his early days, he started creating websites simply for fun. This passion has remained and shaped his decision to work as a freelance web developer and consultant. Although he started web development on the backend (PHP with Laravel and NodeJS), he has progressed to becoming a front-end developer using modern frameworks such as React, Angular, and VueJS 2 in many projects.

The most rewarding experience for him is to see how people find new and better jobs, build exciting web applications, acquire amazing projects, or simply enjoy their hobby with the help of his content.

Table of contents

  1. Chapter 1 : Getting Started
    1. Introduction
    2. Why Svelte?
    3. What is Svelte?
    4. Setting Up a First App The Course Project
    5. Writing Some Svelte Code
    6. Course Outline
    7. How To Get The Most Out Of The Course
  2. Chapter 2 : Base Syntax Core Features
    1. Module Introduction
    2. Using Curly Braces Understanding the Core Syntax
    3. Reactive Variables
    4. More Reactivity
    5. Binding to Element Properties
    6. Two-Way Binding Shortcut
    7. Using Multiple Components
    8. Components Communication via Props
    9. Diving Deeper into Bindings
    10. Using Self-Extending Properties
    11. Outputting HTML Content
    12. Setting Dynamic CSS Classes
    13. Wrap Up
  3. Chapter 3 : Working with Conditionals Loops
    1. Module Introduction
    2. Using "if" Statements in HTML
    3. if, else else-if
    4. Outputting Lists with "each"
    5. "each", "else" Extracting the Index
    6. Lists Keys
    7. A Closer Look at List Keys
    8. Wrap Up
  4. Chapter 4 : A Closer Look at Reactivity
    1. Module Introduction
    2. Updating Arrays Objects Immutably
    3. Understanding Event Modifiers
    4. Using Inline Functions
    5. Wrap Up
  5. Chapter 5 : Course Project - First Steps
    1. Module Introduction
    2. Project Setup A First Component
    3. Different Ways of Mounting Components
    4. Adding Data
    5. Adding a New Component (MeetupItem)
    6. Working with Different Component Types
    7. Passing Data Into Components
    8. Adding a "MeetupGrid" Component
    9. Adding New Meetups via a Form
    10. Creating a "TextInput" Component
    11. Adding a Custom "Button" Component
    12. Wrap Up
  6. Chapter 6 : Diving Deeper into Components
    1. Module Introduction
    2. Understanding the Different Component Types
    3. Component Communication Overview
    4. Event Forwarding
    5. Emitting Custom Events
    6. How to Extract Event Data
    7. Using Spread Props Default Props
    8. Working with Slots
    9. Named Default Slots
    10. Example: Opening Closing a Modal
    11. Using Slot Props
    12. The Component Lifecycle - Theory
    13. Creation Update Lifecycle Hooks in Action
    14. Using "tick()"
    15. Wrap Up
  7. Chapter 7 : Course Project - Components Deep Dive
    1. Module Introduction
    2. Adding Default Props
    3. Communication via Custom Events
    4. Utilizing Slots
    5. Creating an "EditMeetup" Component
    6. Communicating Between Components
    7. Time for More Slots!
    8. Adding a Re-Usable "Modal" Component
    9. Finishing the "Modal" Component
    10. Wrap Up
  8. Chapter 8 : Working with Bindings Forms
    1. Module Introduction
    2. Two-Way Binding Refresher
    3. Understanding Custom Component Bindings
    4. Relying on Automatic Number Conversion
    5. Binding Checkboxes Radio Buttons
    6. Binding Dropdowns
      1. Binding to Element References
      2. Binding to Component References
      3. Validating Forms Inputs
      4. Wrap Up
    7. Chapter 9 : Course Project - Bindings Forms
      1. Module Introduction
      2. Exploring Different Validation Solutions
      3. Adding Validation Error Output to the "TextInput" Component
      4. Adding Some Validation Logic
      5. Finishing "TextInput" Validation
      6. Validating the Overall Form
      7. Improvements Wrap Up
    8. Chapter 10 : Managing State Data with Stores
      1. Module Introduction
      2. What's the Problem?
      3. Creating a Writable Store Subscribing
      4. Updating Store Data
      5. Stores and Stateful Presentational Components
      6. Managing Store Subscriptions
      7. Using Autosubscriptions
      8. A Second Store!
      9. Subscribing for a Short Period
      10. Understanding Readable Stores
      11. Unlimited Power with Custom Stores
      12. Wrap Up
    9. Chapter 11 : Course Project - Stores
      1. Module Introduction
      2. Setting Up a Store
      3. Using a Custom Store
      4. Tapping into the Store from Different Components
      5. Adding a "MeetupDetail" Component
      6. Preparing the "Edit Meetup" Form
      7. Continuing Work on the "Edit" Feature
      8. Adding a "Delete" Functionality
      9. Adding a "Filter" Component
      10. Some Final Steps
      11. Wrap Up
    10. Chapter 12 : Motion, Transitions Animations
      1. Module Introduction
      2. Animating Values with a Tweened Store
      3. Using a Spring Store Instead
      4. Preparing a Transition Example
      5. Element Transitions
      6. More on Transitions
      7. Using Different "in" and "out" Transitions
      8. Animating Passive (Affected) Items
      9. Wrap Up
    11. Chapter 13 : Course Project - Transitions
      1. Module Introduction
      2. Animating the Modal
      3. Animating the Meetup Items
      4. Animating the "Favorite" Badge Wrap Up
    12. Chapter 14 : Network Interaction via Http
      1. Module Introduction
      2. Adding a REST API
      3. Sending Data via a POST Request
      4. Showing a Loading Indicator Sending Correct Data
      5. Fetching Transforming Data
      6. Things to Consider
      7. Using the "await" Block
      8. Http + A Store
      9. Wrap Up
    13. Chapter 15 : Course Project - Http
      1. Module Introduction
      2. Storing Meetups on a Server
      3. Fetching Transforming Data
      4. Adding a Loading Spinner
      5. Updating via PATCH
      6. Sending "Favorite" Updates Deleting Data
      7. Fixing the Order of Items
      8. Adding Error Handling
      9. Wrap Up
    14. Chapter 16 : Special Elements
      1. Module Introduction
      2. Dynamic Components
      3. Recursive Components
      4. Accessing Windows, Body Head
      5. Cross-Component Scripts
    15. Chapter 17 : Routing Server-side Rendering with Sapper
      1. Module Introduction
      2. What and Why?
      3. Understanding the Folder Structure
      4. Inspecting the Web Page
      5. Filenames Routes
      6. Error Layout Pages
      7. Preloading in Components
      8. Pre-fetching Data
      9. Migrating the Meetup Project Files into the Sapper Project
      10. Fetching Data on the Client Side
      11. Prefetching Data on the Server
      12. Syncing Fetched Data the Store
      13. Editing Deleting Meetups
      14. Rendering the MeetupDetail Page
      15. Adding Global CSS
      16. Wrap Up
    16. Chapter 18 : Deployment
      1. Module Introduction
      2. Different App Types Deployment Options
      3. Building the App
      4. Rendering Content Correctly on the Server
      5. Deploying a SSR App
      6. Hosting a Static Site
      7. Wrap Up
    17. Chapter 19 : Course Roundup
      1. Svelte vs React vs Angular vs Vue
      2. Course Summary

Product information

  • Title: Svelte.js - The Complete Guide
  • Author(s): Maximilian Schwarzmüller
  • Release date: July 2019
  • Publisher(s): Packt Publishing
  • ISBN: 9781838988937