mirror of
https://github.com/Stone-Red-Code/website.git
synced 2026-09-06 23:43:45 +02:00
141 lines
2.9 KiB
Markdown
141 lines
2.9 KiB
Markdown
---
|
|
authors:
|
|
- "caffeinewriter#0001"
|
|
created_at: "2019/12/04"
|
|
title: What is Svelte?
|
|
---
|
|
|
|
## What is Svelte?
|
|
Svelte is a front-end technology similar in use to React, Vue, Angular, and the like. However, instead of loading a framework on the client-side, Svelte wires everything up during the build step, meaning it doesn't have to interpret any additional information at runtime. However, it's still in its relative infancy.
|
|
|
|
## When should you use Svelte?
|
|
|
|
- If you want to try out a framework that builds into an app, rather one that uses a framework at runtime.
|
|
- If you feel like React, Vue, Angular, etc. might be too "heavy".
|
|
- If you like trying new things.
|
|
|
|
## When should you not use Svelte?
|
|
|
|
- If you need an extremely battle-tested, extremely community supported framework.
|
|
- If you don't need interactivity/data binding.
|
|
|
|
## Examples
|
|
### Styling a component
|
|
|
|
```html
|
|
<style>
|
|
p {
|
|
color: purple;
|
|
font-family: "Comic Sans MS", cursive;
|
|
font-size: 2em;
|
|
}
|
|
</style>
|
|
|
|
<p>Styled!</p>
|
|
```
|
|
|
|
https://svelte.dev/examples#styling
|
|
|
|
### Bound Text Input
|
|
|
|
```js
|
|
<script>
|
|
let name = '';
|
|
</script>
|
|
|
|
<input bind:value={name} placeholder="enter your name">
|
|
<p>Hello {name || 'stranger'}!</p>
|
|
```
|
|
|
|
https://svelte.dev/examples#text-inputs
|
|
|
|
### Reactive statement on a button
|
|
|
|
```js
|
|
<script>
|
|
let count = 0;
|
|
|
|
$: if (count >= 10) {
|
|
alert(`count is dangerously high!`);
|
|
count = 9;
|
|
}
|
|
|
|
function handleClick() {
|
|
count += 1;
|
|
}
|
|
</script>
|
|
|
|
<button on:click={handleClick}>
|
|
Clicked {count} {count === 1 ? 'time' : 'times'}
|
|
</button>
|
|
```
|
|
|
|
https://svelte.dev/examples#reactive-statements
|
|
|
|
### CSS class bindings
|
|
|
|
```html
|
|
<script>
|
|
let current = "foo";
|
|
</script>
|
|
|
|
<style>
|
|
button {
|
|
display: block;
|
|
}
|
|
|
|
.active {
|
|
background-color: #ff3e00;
|
|
color: white;
|
|
}
|
|
</style>
|
|
|
|
<button class:active="{current === 'foo'}" on:click="{() => current = 'foo'}">
|
|
foo
|
|
</button>
|
|
|
|
<button class:active="{current === 'bar'}" on:click="{() => current = 'bar'}">
|
|
bar
|
|
</button>
|
|
|
|
<button class:active="{current === 'baz'}" on:click="{() => current = 'baz'}">
|
|
baz
|
|
</button>
|
|
```
|
|
|
|
https://svelte.dev/examples#classes
|
|
|
|
### Built-in animation transitions
|
|
|
|
```html
|
|
<script>
|
|
import { fade, fly } from "svelte/transition";
|
|
let visible = true;
|
|
</script>
|
|
|
|
<label>
|
|
<input type="checkbox" bind:checked="{visible}" />
|
|
visible
|
|
</label>
|
|
|
|
{#if visible}
|
|
<p in:fly="{{ y: 200, duration: 2000 }}" out:fade>
|
|
Flies in, fades out
|
|
</p>
|
|
{/if}
|
|
```
|
|
|
|
https://svelte.dev/examples#in-and-out
|
|
|
|
## Other resources
|
|
|
|
- https://svelte.dev/
|
|
- https://svelte.dev/tutorial/basics
|
|
- https://egghead.io/playlists/getting-started-with-svelte-3-05a8541a
|
|
- https://github.com/sveltejs/svelte
|
|
- https://github.com/sveltejs/svelte/wiki/FAQ
|
|
- https://snipcart.com/blog/svelte-js-framework-tutorial
|
|
- https://blog.logrocket.com/how-to-build-a-simple-svelte-js-app/
|
|
- https://alligator.io/svelte/getting-started-with-svelte/
|
|
- https://codeburst.io/svelte-comparison-with-other-frameworks-e895c45567de
|