Scott Spence

Developer Relations Engineer @Storyblok
Svelte LDN meetup organiser
Workshop host
- Jamstack Conf
- GraphQL Galaxy
- JSNation
- Jamstack Explorers
Cat dad 😺
Human dad

@spences10

I’m from the UK

@spences10

I’m from the UK

@spences10

Fries = Chips

Chips = Crisps

@spences10

April 2021

@spences10

I've never Svelte like this before!

@spences10

— Scott Spence

Svelte.

SvelteKit.

What is Svelte?

@spences10

It is an actual word

@spences10

It is an actual word

@spences10

It’s a framework?

@spences10

v1 Release late 2016

@spences10

v3 April 2019

@spences10

Rethinking Reactivity

@spences10

You Gotta Love Frontend

What is a framework?

@spences10

Declarative code?

@spences10

Declarative code

@spences10

Imperative code

vs

Imperative

@spences10

function component() {
  let count = 0;

  const button = document.createElement('button');
  button.textContent = `Clicks: ${count}`;

  button.addEventListener('click', () => {
    count += 1;
    button.textContent = `Clicks: ${count}`;
});
  return button;
}

Declarative

@spences10

<script>
  let count = 0;
</script>

<button on:click={() => count += 1}>
  Clicks: {count}
</button>

@spences10

import React, { useState } from 'react';

export default function Example() {
  const [count, setCount] = useState(0);

  return <button onClick={() => setCount(count + 1)}>
    Clicks {count}
  </button>;
}

@spences10

import React, { useState } from 'react';

export default function Example() {
  const [count, setCount] = useState(0);

  return <button onClick={() => setCount(count + 1)}>Clicks {count}</button>;
}

@spences10

<script>
  let count = 0;
</script>

<button on:click={() => count += 1}>Clicks: {count}</button>

@spences10

How is Svelte different?

@spences10

It’s a compiler

@spences10

What does that mean?

@spences10

Just ship what is needed

@spences10

Just ship what is needed

Compiler-centric design benefits:

JavaScript is byte for byte the most expensive thing on the web. Shipping less === faster app stat up

No need to re-generate a virtual DOM on every state change. Instead, Svelte makes surgical, granular updates as it knows what needs to change

Your apps will generally be smaller, as there's no need for a framework runtime

@spences10

Write less code

@spences10

Write less code

Modern web development best practices out of the box:

Built in element transitions and animations, no need for third party packages

Manage cross-component state without the need for third party state management libraries

If you’re not using a specific feature like animations, transitions or bindings then these are not in the compiled output

@spences10

Single file component

@spences10

Single file component

<script>
  let count = 0;
</script>

<button on:click={() => count += 1}>
  Clicks: {count}
</button>

@spences10

Single file component

<script>
  let count = 0;
</script>

<button on:click={() => count += 1}>
  Clicks: {count}
</button>

<style>
  button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 20px;
    font-size: 16px;
    cursor: pointer;
    border-radius: 12px;
  }
</style>

@spences10

Single file component

<script>
</script>

<button on:click={() => count += 1}>
  Clicks: {count}
</button>

<style>
</style>

@spences10

Single file component

<script>
  let count = 0;
</script>

<button
  class="btn btn-primary"
  on:click={() => (count += 1)}
>
  Clicks: {count}
</button>

@spences10

Reactivity in Svelte

@spences10

<script>
  let count = 0;
</script>

<button on:click={() => count += 1}>
  Clicks: {count}
</button>

@spences10

<script>
  let count = 0;
  $: doubled = count * 2;
</script>

<button on:click={() => count += 1}>
  Clicked {count} {count === 1 ? 'time' : 'times'}
</button>

<p>{count} doubled is {doubled}</p>

@spences10

$: WTF??!!1

@spences10

Gotchas?

@spences10

<script>
  let numbers = [1, 2, 3, 4];

  function addNumber() {
    numbers.push(numbers.length + 1);
  }

  $: sum = numbers.reduce((t, n) => t + n, 0);
</script>

<p>{numbers.join(' + ')} = {sum}</p>

<button on:click={addNumber}>
  Add a number
</button>

@spences10

<script>
  let numbers = [1, 2, 3, 4];

  function addNumber() {
    numbers = [...numbers, numbers.length + 1];
  }

  $: sum = numbers.reduce((t, n) => t + n, 0);
</script>

<p>{numbers.join(' + ')} = {sum}</p>

<button on:click={addNumber}>
  Add a number
</button>

@spences10

Stores

@spences10

Stores

<script>
  import { writable } from 'svelte/store';

  const count = writable(0);
  console.log($count); // logs 0

  count.set(1);
  console.log($count); // logs 1

  $count = 2;
  console.log($count); // logs 2
</script>

HTML

@spences10

HTML Superset

@spences10

https://github.com/sveltejs/svelte/issues/4566#issuecomment-599990551

https://github.com/sveltejs/svelte/issues/5810#issuecomment-751954209

The platform provides!

@spences10

What is SvelteKit?

@spences10

Svelte is the UI layer

@spences10

SvelteKit is the meta-framework

SvelteKit

@spences10

Full stack
HTTP endpoints
File based routing
SSR
Code splitting

@spences10

Data Loading in SvelteKit

@spences10

File based routing in SvelteKit

@spences10

sveltekit-skeleton-example/
├─ src/
│  ├─ routes/
│  │  └─ about/
│  │  │  └─ index.svelte
│  │  └─ blog/
│  │  │  └─ index.svelte
│  │  └─ contact/
│  │  │  └─ index.svelte
│  │  └─ index.svelte
│  └─ app.html
└─ package.json

sveltekit-skeleton-example/
├─ src/
│  ├─ routes/
│  │  └─ about/
│  │  │  └─ +page.svelte
│  │  └─ blog/
│  │  │  └─ +page.svelte
│  │  └─ contact/
│  │  │  └─ +page.svelte
│  │  └─ +page.svelte
│  └─ app.html
└─ package.json

@spences10

sveltekit-skeleton-example/
├─ src/
│  ├─ routes/
│  │  └─ about.svelte
│  │  └─ blog.svelte
│  │  └─ contact.svelte
│  │  └─ index.svelte
│  └─ app.html
└─ package.json

Why Svelte?

@spences10

Awesome DX

@spences10

(Developer Experience)

Businesses don't really care about “Developer Experience”

@spences10

The business does care about outcomes.

@spences10

Outcomes are the business experience.

Svelte is more succinct (clear, precise) than other frameworks

@spences10

Improved parsing of the code by other developers

@spences10

Lead times reduced by 40%

@spences10

Bug fixes are reduced

@spences10

But the business doesn't care about any of that

@spences10

Solving bugs faster = reduced lead time == saving budget

@spences10

Businesses get that

@spences10

It’s smaller

@spences10

It’s smaller

@spences10

Speed
- Smaller bundle
Devices
- Works on lower quality devices
Performance
- Faster time to interactive

How users interact with your site

and it will impact rankings

@spences10

Clickthrough Rates

@spences10

Time spent on page

@spences10

Return rates

Bounce Rates & Conversions

where it really matters

💷 💳 💸 🤑

@spences10

How fast is fast enough?

@spences10

2 seconds ⏱

@spences10

Performance Matters

@spences10

GraphQL

@spences10

Simple to understand
You get what you ask for
Client (browser) or server side

@spences10

query {
  products {
    # from Storyblok
    name
    description {
      richtext
    }
    # from 3rd party API
    inventory {
      inStock
    }
    # rest of query
  }
}

@spences10

Client side

(the browser)

@spences10

URQL

@spences10

<script>
  import { createClient, setContextClient } from '@urql/svelte'
  import '../global.css'

  const client = createClient({
    url: `https://rickandmortyapi.com/graphql`,
  })
  setContextClient(client)
</script>

<main class="container">
  <slot />
</main>

<style>
  /* layout styles go here */
</style>

src/routes/+layout.svelte

@spences10

<script>
  import { getContextClient, gql, queryStore } from '@urql/svelte'

  const charactersQueryStore = queryStore({
    client: getContextClient(),
    query: gql`
      query AllCharacters {
        characters {
          results {
            name
            id
            image
          }
        }
      }
    `,
  })
</script>

<div class="wrapper">
  {#if $charactersQueryStore.fetching}
    <p>Loading...</p>
  {:else if $charactersQueryStore.error}
    <p>Oopsie! {$charactersQueryStore.error.message}</p>
  {:else}
    {#each $charactersQueryStore.data.characters.results as character}
      <section>
        <a data-sveltekit-prefetch href={`/character/${character?.id}`}>
          <img src={character?.image} alt={character?.name} />
          <h2>{character?.name}</h2>
        </a>
      </section>
    {/each}
  {/if}
</div>

<style>
 /* page styles go here */
</style>

src/routes/+page.svelte

@spences10

src/routes/+page.svelte

<script>
  import { getContextClient, gql, queryStore } from '@urql/svelte'

  const charactersQueryStore = queryStore({
    client: getContextClient(),
    query: gql`
      query AllCharacters {
        characters {
          results {
            name
            id
            image
          }
        }
      }
    `,
  })
</script>

@spences10

<pre>{JSON.stringify($charactersQueryStore, null, 2)}</pre>

SvelteKit debug 👀

@spences10

{
  "characters": {
    "results": [
      {
        "name": "Rick Sanchez",
        "id": "1",
        "image": "https://rickandmortyapi.com/api/character/avatar/1.jpeg",
        "__typename": "Character"
      },
      {
        "name": "Morty Smith",
        "id": "2",
        "image": "https://rickandmortyapi.com/api/character/avatar/2.jpeg",
        "__typename": "Character"
      },
      {
        "name": "Summer Smith",
        "id": "3",
        "image": "https://rickandmortyapi.com/api/character/avatar/3.jpeg",
        "__typename": "Character"
      },
    ],
    "__typename": "Characters"
  }
}

src/routes/+page.svelte

@spences10

<script>
  import { getContextClient, gql, queryStore } from '@urql/svelte'

  const charactersQueryStore = queryStore({
    client: getContextClient(),
    query: gql`
      query AllCharacters {
        characters {
          results {
            name
            id
            image
          }
        }
      }
    `,
  })
</script>

<div class="wrapper">
  {#if $charactersQueryStore.fetching}
    <p>Loading...</p>
  {:else if $charactersQueryStore.error}
    <p>Oopsie! {$charactersQueryStore.error.message}</p>
  {:else}
    {#each $charactersQueryStore.data.characters.results as character}
      <section>
        <a data-sveltekit-prefetch href={`/character/${character?.id}`}>
          <img src={character?.image} alt={character?.name} />
          <h2>{character?.name}</h2>
        </a>
      </section>
    {/each}
  {/if}
</div>

<style>
 /* page styles go here */
</style>

src/routes/+page.svelte

@spences10

src/routes/+page.svelte

<div class="wrapper">
  {#if $charactersQueryStore.fetching}
    <p>Loading...</p>
  {:else if $charactersQueryStore.error}
    <p>Oopsie! {$charactersQueryStore.error.message}</p>
  {:else}
    {#each $charactersQueryStore.data.characters.results as character}
      <section>
        <a data-sveltekit-prefetch href={`/character/${character?.id}`}>
          <img src={character?.image} alt={character?.name} />
          <h2>{character?.name}</h2>
        </a>
      </section>
    {/each}
  {/if}
</div>

Closing Comments

@spences10

Great client side tools to use
Awesome developer experience (DX)
Decrease in lead time for development
Small bundle sizes
Increased performance

Svelte Content Creators

@spences10

Geoff Rich
LevelUpTuts (Scott Tolinski)
Tan Li Hau (Li Hau - hello, hello)
Joy Of Code (Matia)
Huntabyte (Hunter Johnston)

Thanks 🙏

@spences10

Building with SvelteKit

Connect.Tech 9th November 2022

and GraphQL

!workshop

I’m from the UK

I’m from the UK

Fries = Chips

Chips = Crisps

April 2021

I've never Svelte like this before!

— Scott Spence

Svelte.

SvelteKit.

What is Svelte?

It is an actual word

It is an actual word

It’s a framework?

v1 Release late 2016

v3 April 2019

Rethinking Reactivity

You Gotta Love Frontend

What is a framework?

Declarative code?

Declarative code

Imperative code

vs

Imperative

Declarative

How is Svelte different?

It’s a compiler

What does that mean?

Just ship what is needed

Just ship what is needed

Compiler-centric design benefits:

Write less code

Write less code

Modern web development best practices out of the box:

Single file component

Single file component

Single file component

Single file component

Single file component

Reactivity in Svelte

$: WTF??!!1

Gotchas?

Stores

Stores

HTML

HTML Superset

The platform provides!

SvelteKit.

What is SvelteKit?

Svelte is the UI layer

SvelteKit is the meta-framework

SvelteKit

Full stack

HTTP endpoints

File based routing

SSR

Code splitting

Data Loading in SvelteKit

File based routing in SvelteKit

Example time 🧑‍💻

Why Svelte?

Awesome DX

Businesses don't really care about “Developer Experience”

The business does care about outcomes.

Outcomes are the business experience.

Svelte is more succinct (clear, precise) than other frameworks

Improved parsing of the code by other developers

Lead times reduced by 40%

Bug fixes are reduced

But the business doesn't care about any of that

Solving bugs faster = reduced lead time == saving budget

Businesses get that

It’s smaller

It’s smaller

Speed

Devices

Performance