Twitter | Search | |
TypeScript Leo || Xiaoru Li
Always wanted to check out (aka. "the next big thing in web dev") but never got time for it? ⏰ πŸ”₯ I've got a 10-tweet crash course for you! πŸ‘‡ (Spoiler alert: Svelte is so intuitive and easy to use that you may feel like you already know it! πŸ₯³)
Reply Retweet Like More
TypeScript Leo || Xiaoru Li Oct 18
Replying to @hexrcs
1/10 How Svelte works: - Compiler: Doesn't ship a Svelte "library" to users, but build-time optimized plain JS - Components: App is made up of composable UI elements - Reactive: Event/User interaction triggers chain of state changes, autoupdating components throughout entire app
Reply Retweet Like
TypeScript Leo || Xiaoru Li Oct 18
Replying to @hexrcs
2/10 UI is a component tree. A component defines how your app should interpret some abstract "state" values, so that it can turn them into DOM elements in your browser, and ultimately pixels on your screen.
Reply Retweet Like
TypeScript Leo || Xiaoru Li Oct 18
Replying to @hexrcs
3/10 Each .svelte file contains a single component, consisting of 3 parts: - <script> is component logic in JS - <style> is CSS styling, scoped and applied to only the current component - Svelte template, based on HTML but can use custom components and inline logic (like JSX)
Reply Retweet Like
TypeScript Leo || Xiaoru Li Oct 18
Replying to @hexrcs
4/10 The Svelte template allows us to use our own custom components in addition to HTML elements. The `.svelte` file extension is optional if there's no ambiguity, but the first letter of a custom component MUST be in uppercase. We can use JS expressions inside curly braces { }.
Reply Retweet Like
TypeScript Leo || Xiaoru Li Oct 18
Replying to @hexrcs
5/10 A common way to "control" how a child component behaves is to pass data into it as props (properties). To accept a prop, expose a variable with `export`. It's important to use `let` because `const` is not reassignable. Setting a prop is just like doing normal HTML.
Reply Retweet Like
TypeScript Leo || Xiaoru Li Oct 18
Replying to @hexrcs
6/10 User actions trigger events. `on:` lets us listen to events and fire functions to update states. State changes will auto-update the UI. Data generally flows from a parent to a child, but we can use `bind:` to simplify the state-update logic by allowing two-way data flow.
Reply Retweet Like
TypeScript Leo || Xiaoru Li Oct 18
Replying to @hexrcs
7/10 "Reactive statements" are those marked by `$:` Svelte analyzes which variables they depend on. When any of those dependencies changes, the corresponding reactive statements will be rerun. Very useful for declaring derived states, or triggering "side effects".
Reply Retweet Like
TypeScript Leo || Xiaoru Li Oct 18
Replying to @hexrcs
8/10 A reactive "store" makes it easy to share states across many components. It can exist in a separate JS file. To create a store, just wrap `writable` around a value. In a component, we prefix store names with a `$` in order to directly use or update them. Compiler magic!
Reply Retweet Like
TypeScript Leo || Xiaoru Li Oct 18
Replying to @hexrcs
9/10 We can conditionally render elements with Svelte's template via {} and optionally {:else}. To render everything in a list, we have {}. Remember to always close a block with {/if} or {/each}! (Should've used <ol> in the example, but I wanted to show index access.)
Reply Retweet Like
TypeScript Leo || Xiaoru Li Oct 18
Replying to @hexrcs
10/10 It's super easy to do asynchronous stuff like API requests with Svelte. We can simply {} a Promise to resolve, displaying a "loading" placeholder before the result is ready. Note that we await the Promise in the template section, so no `await` keyword in <script>.
Reply Retweet Like
TypeScript Leo || Xiaoru Li Oct 18
Replying to @hexrcs
BONUS/10 Svelte comes with neat animated transitions built-in. Try giving your components a `transition:fly` property! There're also other types like fade, slide etc. You can use also `in:` `out:` to separately define intro/outros. Attached to the transition prop are the params.
Reply Retweet Like
TypeScript Leo || Xiaoru Li Oct 18
Replying to @sveltejs @chrisachard
πŸ‘† That's it - everything you need to get started with . 😁 Have fun! πŸ₯³ (Thread crash course format inspired by 😁)
Reply Retweet Like
TypeScript Leo || Xiaoru Li Oct 18
Replying to @sveltejs @chrisachard
(There's a typo in the 6th tweet)
Reply Retweet Like
TypeScript Leo || Xiaoru Li Oct 23
Replying to @sveltejs @chrisachard
The video version of this crash course is here!
Reply Retweet Like
TypeScript Leo || Xiaoru Li Nov 1
Replying to @sveltejs @chrisachard
Check out my new GraphQL thread!
Reply Retweet Like