Scott Teaches Wes Svelte and Sapper

Syntax

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 Svelte Sapper r/webdev Vue.js ScottTolinski.com WesBos.com Next.js ScottTolinski.com Github Repo Gatsby.js Shawn Swyx ××× 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.

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

Audio Player

-
--:--
--:--