Table of Contents
Introduction
Svelte Overview
Why Svelte
Rich explains that Svelte is comparable to component frameworks like VueJS or React, but also has the specificity of being a compiler that takes declarative code and turns it into imperative JavaScript. Svelte makes building an application easier because it offers a solution to most issues faced with other framework and that require adding extra libraries.
Svelte Basics
Rich uses the Svelte tutorial to demonstrate how to write static code, HTML and CSS, and how to use Svelte to create a global scope in CSS.
Data Reactivity
Rich explains how the Svelte system of reactivity keeps the DOM in sync with the application state, and demonstrates how computed properties work by using declarations, statements, and updating arrays and object properties.
Props
Rich explains that it is possible to assign properties, and demonstrates how to assign props to an element and from one component down to its children.
if else Blocks
Rich demonstrates ways of using logic, like conditionals if else statements and loops in Svetle templates.
each & Keyed each Blocks
Rich demonstrates how to loop through lists of data in components, and how to set up Keyed blocks to control updates to specific elements in the list.
Asynchronous await Blocks
Rich demonstrates asynchronous data and being able to render the results of a promise into a component using await blocks.
Events
Rich demonstrates firing events from components and being able to modularize your code through using createEventDispatcher to dispatch events from the components. The full list of event modifiers is also surveyed in this section.
Binding & Lifecycle
Input & Template Binding
Rich demonstrates how to bind the string and numeric data entered in inputs, how to use select lists, create radio buttons, and how to bind multiple inputs related to the same attribute.
Media & Dimension Binding
Rich demonstrates how to use the media elements binding in Svelte with both the audio and video elements, and how to use bindings to build a player.
this & Component Binding
Rich demonstrates how to use the "this" binding to be able to access a Canvas element, and uses a component binding API which creates custom bindings for components.
onMount & onDestroy Lifecycle
Rich live codes component lifecycle events that starts when it is created with onMount, and ends when it is destroyed with onDestroy. A lifecycle is a description of the different stages a component goes through.
beforeUpdate, afterUpdate & tick
Rich demonstrates the beforeUpdate function which schedules work to happen immediately before the DOM has been updated, afterUpdate for after the DOM is updated, and tick which is used for running code once the DOM is in sync with your data – used for situations such as handling text selection events in textareas.
Stores & Animation
Stores & Derived State
Rich demonstrates Svelte Stores which is an object with a subscribe method that allows interested parties to be notified whenever the store value changes. Rich also demonstrates the ability to create a store whose value is based on the value of one or more other stores with derived.
Custom Stores & Store Bindings
Rich demonstrates creating a custom store, which is an object that impliments a subscribe method. Rich also demonstrates creating a custom store binding by using the writable method from svelte/store.
Adding Motion with Easing & Spring
Rich demonstrates adding motion and easing with Svelte's built in easing and spring API. This allows you to set coordinates and values in JavaScript directly.
Transitions
Rich demonstrates adding transitions which allows you to animate elements into and out of the DOM.
Custom Transitions & Events
Rich demonstrates creating custom transitions in JavaScript as well as creating custom event bindings for the transitions.
Local & Deferred Transitions
Rich demonstrates creating local transitions which scopes the transitions to a specific element, and defferred transitions for coordinating transitions between multiple elements.
Animations & Actions
Rich demonstrates adding animations for animating element position within the page.
Classes & Components
Classes Directive
Rich demonstrates the class directive for adding and removing classes from an element.
Composing Components with Slots
Rich continues using slots and explains that when more control is needed over a placement, named slots are used.
Context API
Rich demonstrates how to use the Context API, which provides a mechanism for components to communicate with each other without passing around data and functions as props or dispatching many events. In this example, is using the MapboxGL map.
Special Elements
Rich demonstrates special Svelte components such as self, component, window, body, head, and options. These special components allow you to attach behavior to the browser window, head of the document outside of normal isolated components.
Modules Context for Sharing Code
Rich explains that in previous example the code executes once the component estentiates, and demonstrates how to create modules for running code for each modules rather than scoping code to the component.
Debugging
Rich demonstrates debugging in Svelte, and uses the @debug tag for inspecting data, and answers questions from the audience about the container context and page transitions.
Creating a Svelte App from Scratch
Rich demonstrates creating a Svelte application from scratch using Rollup.
Building an Application
Building an Application Frame
Rich introduces the Cameo API, gives an overview of the starter repository, and starts the process of building a Svelte application.
Creating the Welcome Screen
Rich builds the welcome screen of the game, and explains that in Svelte, unlike other frameworks it is easy to reuse HTML.
Creating Categories Navigation
Rich continues live coding the game application by adding buttons, and live codes the navigation category and adds it to the welcome screen.
Fetching API Data
Rich continues live coding the application, demonstrates fetching asynchronous data from an API using Svelte, and uses onMount to upload data.
Building the Game
Creating the Game Screen
Rich continues building the application started in the previous section, and live codes the game screen.
Game Layout & Buttons
Rich live codes the first component of the game, adds CSS to layout the game, and makes interactive buttons using the button element.
Wiring Up Interactivity
Rich wires up the buttons built in the previous section, shows data from the Cameo API and clicking buttons firing events to add interactivity.
Game Activity Display
Rich adds completion states from clicking a button, adds asynchronous functions, and builds logic to display game results.
Game Completion State
Rich wires up the final completion state of the game to give feedback to the player by rendering a green check if the answer is correct or a red cross if the answer isn't.
Displaying Game Data
Rich polishes up the game data with CSS to improve the user experience of the game, updates typos from the previous section, and adds the display of the last game result.
Polishing UI & Adding Transitions
Rich improves the button styles, adds transitions to the results display to animate if the user answered correctly to a question.
Adding Meta
Rich uses lighthouse to catch any mistake that were made while live coding the game application, and adds meta to the application after learning through the lighthouse report that meta was missing from the application.
Making an Installable PWA
Rich continues to refactor and improve the game, checks through the Progressive Web Application(PWA) icon what needs to be updated to make the application more progressive, and adds a service worker and a manifest file once discovering that both were missing.
Sapper
Sapper
Rich gives an overview of Sapper, explains that Sapper is an application framework for server-side and dynamic rendering of Svelte applications, and describes the advantages of a file system routing used in Sapper.
Server Rendering in Sapper
Rich explains how the [slug].json fetch data and renders it into the right static file and a static website.
