DEV Community

Syntax - Tasty Web Development Treats

Scott Teaches Wes Svelte and Sapper

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

Build modern JAMStack websites in minutes. Stackbit lets you combine any theme, site generator and CMS without complicated integrations. Join the beta today by visiting stackbit.com/syntaxfm.

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 ××× Shameless Plugs Tweet us your tasty treats!

Episode source