Scott Teaches Wes Svelte and Sapper

Syntax - Tasty Web Development Treats - Podcast készítő Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Kategóriák:

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

Visit the podcast's native language site

Links

××× SIIIIICK ××× PIIIICKS ×××

Shameless Plugs

Tweet us your tasty treats!