Svelte makes working with apps really simple. It brings the clarity of Vue but adds even more simplicity in the way components are created and used.

For one of the demos I just wanted to showcase what the simplicity translates into for a simple website that shows “quote of the day” but also needs to provide a “SPA experience” - completely off the script.

All I did was to start the app -

1
2
3
4

npx degit sveltejs/template qotd
cd quotd
npm i
code .

That will take care of creating the project, installing <100 packages, and opening the project in VSCode.

Next, I just copy and paste the below lines in src/App.svelte.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

<script>
  export let quotd = "Patience is the key to good life..";
  export let author = "Unknown";

  const getRandomQuote = () => {
    fetch("https://favqs.com/api/qotd")
      .then((res) => res.json())
      .then((data) => ([quotd, author] = [data.quote.body, data.quote.author]));
  };
</script>

<main>
  <button on:click="{getRandomQuote}">Get me a quote!</button>
  <h1>{quotd}</h1>
  <p>- {author} -</p>
</main>

And, lo and behold -

This is the simplest API app that I could think of “on the fly”. It was good enough to demonstrate how simple, light-weight and quick Svelte can be.