Dive into the world of Svelte and Sapper as Scott introduces Wes to their innovative features! Learn how Svelte compiles down to efficient code, easing the development process. Discover the unique reactivity model that simplifies state management and component styling. The duo also explores Sapper's strengths in server-side rendering and routing. Plus, stay tuned for clever tech picks and insights on outdoor solar lighting and lawn care that add a fun twist to the tech talk!
51:04
forum Ask episode
web_stories AI Snips
view_agenda Chapters
auto_awesome Transcript
info_circle Episode notes
insights INSIGHT
Svelte's Core Value Proposition
Svelte compiles away framework code, resulting in smaller bundle sizes.
This allows for built-in tools without bloat, increasing performance.
insights INSIGHT
Svelte Compilation
Svelte compiles to vanilla JavaScript, unlike React which ships the framework.
This results in significantly smaller bundles, improving website performance.
volunteer_activism ADVICE
Svelte File Structure
Use .svelte files for components, containing script, style, and HTML.
Access variables directly in templates like Vue.js, simplifying development.
Get the Snipd Podcast app to discover more snips from this episode
In this episode of Syntax, Scott teaches Wes about Svelte and Sapper — general premise, best practices, and more!
Sanity - Sponsor
Sanity.io is a real-time headless CMS with a fully customizable Content Studio built in React. Get a Sanity powered site up and running in minutes at sanity.io/create. Get an awesome supercharged free developer plan on sanity.io/syntax.
Stackbit - Sponsor
Stackbit offers developers tools that enable things like inline content editing, live previewing of content changes, and collaboration features on your Jamstack site, without code changes. That's why Stackbit is the best way to Jamstack. stackbit.com
Show Notes
03:14 - General premise
Sapper compiles away, removing framework code from build
Component & Props based
Easy reactivity
Built-in tools like animation
Template-based
07:57 - Svelte 101
.svelte files
Files can include , , and straight-up CSS
Variables are used in templates via {var} - even works
Import component and use just like React and Vue
10:49 - Stylin’
All styles are scoped by default
global() to wrap around global declarations
Language type sass to use sass
12:22 - Reactivity
Baked in
let count = 0
count = count + 1 will reactively update in template
variables are essentially state
$: double = count + 2 - to create a reactive variable that updates when another variable updates
$: console.log(count) = will run whenever count is update a-la useEffect
$: if (count >10) = same… reactive if
updates let name in script
15:55 - Props
Same was React, but need to be exported before they can be used
Seems counterintuitive, but you get over it quickly
EZ defaults export let answer = 'a mystery';
import Nested from './Nested.svelte'; export let answer = 'a mystery';
The answer is {answer}
20:08 - Template logic
If statements {#if user._id} {/if}
Loops {#each cats as kittens}
Promise tags
{#await promise}
...waiting
{:then number}
The number is {number}
{:catch error}
{error.message}
{/await}
23:12 - Events
On directive
Functions can also be inline
Modifiers
Click me
26:11 - Baked-in goodies
Animation
Dimensions
{text}
Lifecycle methods
Advanced State Via Stores
A store is simply an object with a subscribe method that allows interested parties to be notified whenever the store value changes.
import { writable } from ‘svelte/store’;
export const count = writable(0);
count.update(0)
Slots
React helmet like stuff, ie
36:39 - Sapper
Similar to Next.js
Folder routes
Static export with all of the good stuff like service workers and preloading
Syntax - Tasty Web Development Treats