Scott Teaches Wes Svelte and Sapper

Syntax - Tasty Web Development Treats - En podkast av Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Podcast artwork

Kategorier:

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
       

    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
       

    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!

Visit the podcast's native language site