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

Links

××× SIIIIICK ××× PIIIICKS ×××

Scott: Lewisia Battery Backup Solar Fountain Pump
Wes: Firefox Containers

Shameless Plugs

Scott: LevelUpTuts YouTube Channel
Wes: Wes’ New Website

Tweet us your tasty treats!

Scott’s Instagram
LevelUpTutorials Instagram
Wes’ Instagram
Wes’ Twitter
Wes’ Facebook
Scott’s Twitter
Make sure to include @SyntaxFM in your tweets

The cultural and scientific mystery of sleep