SvelteKit and the Content Layer

Modern Frontends Live - 17 November 2022

SCOTT SPENCE

Developer Relations Engineer

scott.spence@storyblok.com

Scott Spence

  • Developer Relations Engineer @Storyblok
  • Svelte LDN meetup organise
  • Working with Svelte workshops
  • Cat dad 😺

History Lesson

@spences10

The Past

@spences10

@spences10

@spences10

@spences10

CMS

How it started

Traditional CMS

@spences10

  • Website based

  • Theme based

  • Server rendered

  • Tightly coupled

  • You pay for everything

  • Often slow

@spences10

The Present

@spences10

Terminology

@spences10

Buzzwords

@spences10

Hype

@spences10

Tangent

@spences10

Serverless

@spences10

  • You're not making calls to a specific server

  • You're making calls to an API

  • The API abstracts away the server

  • Guaranteeing uptime, reliability and scaleability  

Headless

@spences10

  • You're not making calls to a specific server

  • You're making calls to an API

  • The API abstracts away the server

  • Guaranteeing uptime, reliability and scaleability  

Headless = Serverless?

@spences10

Serverless functions enable front-end developers to add powerful "back-end" logic to our apps just by writing JavaScript — no devops, no servers, just results.

@spences10

— Jason Lengstorf

https://www.learnwithjason.dev/blog/serverless-functions/overview/

The thing to focus on with headless is that it abstracts away the view, leaving development teams to focus on using their preferred tech stack

@spences10

— Scott Spence

Modern Frontends Live

The Present

@spences10

Today:
Omnichannel experience

@spences10

Headless CMS

@spences10

  • Frontend agnostic

  • Decoupled

  • Developer flexibility

  • CI/CD workflows with Git 

@spences10

@spences10

Visual Editor

@spences10

Visually create, edit and publish content in real-time with Storyblok’s Visual Editor.

Let content creators, marketers and editor, see their changes in real time

Experience your content in different viewports without leaving the app

Publicly available preview link available for external stakeholders

Collaboration made simple: leave comments, discuss and share feedback.

The Future

@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
  }
}

Svelte.

SvelteKit.

What is Svelte?

@spences10

Declarative code

@spences10

Declarative code

@spences10

Imperative code

vs

@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;
}

@spences10

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

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

HTML

@spences10

HTML Superset

@spences10

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

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

Why Svelte?

@spences10

Awesome DX

@spences10

(Developer Experience)

Businesses don't really care about “Developer Experience”

@spences10

The business does care about outcomes

 

Outcomes are the business experience

@spences10

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

@spences10

Performance Matters

@spences10

@spences10

Client side

(the browser)

@spences10

@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

Thanks 🙏

@spences10