Svelte Tutorial

Svelte Tutorials Roadmap

What is Svelte?
- Understanding Svelte as a compiler, not a framework.
- Key features and advantages (no virtual DOM, compiles to highly optimized JavaScript, smaller bundle sizes, fast performance, less boilerplate).
- Comparing Svelte to other frameworks (React, Vue, Angular).
- When to use Svelte.
Setting up Your Environment:
- Installing Node.js and npm/yarn.
- Creating a new Svelte project using the Svelte template (npx degit sveltejs/template my-svelte-app).
- Running the development server (npm install, npm run dev).
- Understanding the project structure (src folder, App.svelte, main.js).
Your First Svelte Component:
- Understanding the .svelte file structure (<script>, <style>, HTML template).
- Displaying simple text and variables.
- Understanding reactivity in Svelte.

Creating and Using Components:
- Breaking down UI into reusable components.
- Importing and rendering components.
Props: Passing Data Down:
- Declaring props in the <script> block (export let propName;).
- Passing data from parent to child components.
- Default prop values.
Events: Communicating Up:
- Handling native DOM events (on:click, on:input).
- Creating custom events (createEventDispatcher).
- Listening for custom events in parent components.
Two-Way Data Binding:
- Using the bind:value directive for form inputs.
- Binding to component props.

Reactive Declarations ($:):
- Understanding how Svelte reacts to state changes.
- Derived values and statements using $:.
- Conditional logic with $:.
Conditional Rendering ({#if ...}, {:else if ...}, {:else}, {/if}).
List Rendering ({#each ... as item}, {#each ... as item, index}):
- Iterating over arrays to display lists of elements.
- Using key expressions for performance.
Handling Asynchronous Operations ({#await ...}, {:then ...}, {:catch ...}, {/await}).

Component-Scoped Styles:
- Writing CSS directly within the <style> block of a .svelte file.
- Understanding how Svelte scopes styles to components.
Global Styles.
CSS Variables.
Using CSS Preprocessors (Sass, Less - requires setup).

on:event (event handling).
bind:property (two-way binding).
class:name (toggling CSS classes).
{#await ...} (handling promises).
{#each ...} (list rendering).
{#if ...} (conditional rendering).
<slot>: Content Projection (rendering content passed from parent).
- Default slots.
- Named slots.
- Slot props (passing data back up).
<svelte:self> (recursive components).
<svelte:component> (dynamic components).
<svelte:element> (dynamic HTML elements).
<svelte:window> and <svelte:body> (handling window and body events).
<svelte:head> (managing elements in the document head).

Understanding Svelte's Built-in Stores:
- writable(): Stores with read and write capabilities.
- readable(): Stores that can only be read externally.
- derived(): Stores whose values are calculated from other stores.
Subscribing to Stores:
- Manual subscription (.subscribe()).
- Auto-subscription using the $ prefix.
Creating Custom Stores.
Using Stores for Global State Management.

Understanding Svelte's Animation System.
Transitions:
- Using built-in transitions (fade, slide, blur, fly, draw, scale).
- Customizing transitions with parameters.
- Creating custom transitions.
Animations (animate:name):
- Animating element position changes (flip animation).

What is SvelteKit?
- Understanding SvelteKit as the official Svelte application framework.
- Features: File-system based routing, server-side rendering (SSR), static site generation (SSG), API routes, code splitting.
Setting up a SvelteKit Project:
- npm create svelte@latest my-sveltekit-app.
- Project structure.
Routing in SvelteKit:
- File-system based routing (src/routes).
- Layouts and nested routes.
- Dynamic routes.
Server-Side Rendering (SSR) and Static Site Generation (SSG).
Data Loading (+page.js and +server.js).
API Routes (+server.js).
Deploying SvelteKit Applications.

Context API (getContext, setContext).
Lifecycle Functions (onMount, beforeUpdate, afterUpdate, onDestroy).
Actions (use:actionName):
- Custom directives for DOM manipulation.
Compiler Options and Configuration.
Testing Svelte Components.
Integrating with Third-Party Libraries.
Accessibility (a11y) in Svelte.

Building Small to Medium-Sized Projects:
- A simple counter application.
- A to-do list application.
- A weather application (fetching data from an API).
- A simple blog or portfolio website using SvelteKit.
Refactoring existing JavaScript applications into Svelte.