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

<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

<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

<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

<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

<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