Table of Contents
IntroductionRich introduces the Svelte documentation, shares the course code repository and course curriculum.
Svelte BasicsRich 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 ReactivityRich 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.
PropsRich 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 BlocksRich demonstrates ways of using logic, like conditionals if else statements and loops in Svetle templates.
each & Keyed each BlocksRich 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 BlocksRich demonstrates asynchronous data and being able to render the results of a promise into a component using await blocks.
EventsRich 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 BindingRich 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 BindingRich 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 BindingRich 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 LifecycleRich 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 & tickRich 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 StateRich 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 BindingsRich 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.
TransitionsRich demonstrates adding transitions which allows you to animate elements into and out of the DOM.
Local & Deferred TransitionsRich demonstrates creating local transitions which scopes the transitions to a specific element, and defferred transitions for coordinating transitions between multiple elements.
Animations & ActionsRich demonstrates adding animations for animating element position within the page.
Classes & Components
Classes DirectiveRich demonstrates the class directive for adding and removing classes from an element.
Composing Components with SlotsRich continues using slots and explains that when more control is needed over a placement, named slots are used.
Context APIRich 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 ElementsRich 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 CodeRich 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.
DebuggingRich 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 ScratchRich demonstrates creating a Svelte application from scratch using Rollup.
Building an Application
Building an Application FrameRich introduces the Cameo API, gives an overview of the starter repository, and starts the process of building a Svelte application.
Creating the Welcome ScreenRich builds the welcome screen of the game, and explains that in Svelte, unlike other frameworks it is easy to reuse HTML.
Creating Categories NavigationRich continues live coding the game application by adding buttons, and live codes the navigation category and adds it to the welcome screen.
Fetching API DataRich 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 ScreenRich continues building the application started in the previous section, and live codes the game screen.
Game Layout & ButtonsRich live codes the first component of the game, adds CSS to layout the game, and makes interactive buttons using the button element.
Wiring Up InteractivityRich 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 DisplayRich adds completion states from clicking a button, adds asynchronous functions, and builds logic to display game results.
Game Completion StateRich 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 DataRich 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 TransitionsRich improves the button styles, adds transitions to the results display to animate if the user answered correctly to a question.
Adding MetaRich 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 PWARich 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.
SapperRich 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 SapperRich explains how the [slug].json fetch data and renders it into the right static file and a static website.