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
```
   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 ×××
- 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

Om Podcasten

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!