Introduction to Svelte and SvelteKit
Recommendations
- Basic knowledge of
- JavaScript/TypeScript
- NodeJS
- NodeJS LTS | Node Version Manager
- VS Code
- VS Code Extention
- Chrome and Developer Tools
Svelte vs. SvelteKit
Use Svelte if...
- You don't need/want SSR (Server Side Rendering)
- You want to render a component into an existing page
- You want to output things like a vanilla component, a WebComponent or a React component adapter
Use SvelteKit if...
- You're ok with Beta software and living on the bleeding edge
- You want SSR like Next.js/Nuxt.js
- You want to have a backend API as part of your project
- You want your app to work in a Serverless environment (e.g. Vercel/Netlify)
- You want super fast hot reloading in development (via Vite)
Scenarios
Still not sure what to use? Maybe these scenarios will help you decide:
- "I'm building a brand new web app (with backend/API)": Use SvelteKit
- "I want to build an SPA (Single Page App) and I have a pre-existing backend and don't need SSR": Use Svelte
- "I want to use Svelte in an existing web app": Use Svelte
- "I'm cautious of new things but want SSR/routing": Use SvelteKit
Hands-On
Svelte
- Why Svelte?
- What is Svelte?
- Architecture
- Principles
- Setup
- Basics
- Reactivity
- Props
- Logic
- Events
- Bindings
- Lifecycle
- Stores
- Motion, Transition and Animation
- Class and Styles
- Slots
- Context API
- Special Elements
- Module Context
- Debugging
- Recipies
SvelteKit
- Why SvelteKit?
- JAMStack
- SvelteKit Architecture
- Setup and CLI
- Routing
- Pages
- Page Options
- Anchor Options
- Endpoints
- Fetching Data
- Layout
- Modules
- Hooks
- Prerendering
- Adapters and Build-Process
- Recipies
Svelte & SvelteKit Examples
- SvelteKit Blog using AWS Adapter
- Svelte Single Page Application
- Svelte/Kit Components
- Svelte Storybook
- Svelte Custom-Elements
- SvelteKit Server Side Rendering
- SvelteKit Static Website
GraphQL Server and AWS Intrastructure
Atomic Design
- Design System Principles by Brad Frost
