Scott Teaches Wes Svelte and Sapper

Syntax - Tasty Web Development Treats

• Episode: Scott Teaches Wes Svelte and Sapper
• Website: Syntax - Tasty Web Development Treats
• Feed URL: https://feed.syntax.fm/rss
• Duration: 00:50:58
• Published: 2020-05-20 15:00

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

     
  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