Upgrade to Pro — share decks privately, control downloads, hide ads and more …

supabaseとSvelteKitで作るバックエンドレスなサーバーレスWebサイト / Creating with supabase and SvelteKit Backend-less serverless websites

shiro seike
November 18, 2023

supabaseとSvelteKitで作るバックエンドレスなサーバーレスWebサイト / Creating with supabase and SvelteKit Backend-less serverless websites

フロントエンドカンファレンス沖縄2023
https://frontend-conf.okinawa.jp

shiro seike

November 18, 2023
Tweet

More Decks by shiro seike

Other Decks in Programming

Transcript

  1. supabase SvelteKit
    Web
    2023
    2
    0
    23
    .
    11
    .
    18
    @seike
    4
    60
    1

    View full-size slide

  2. 自己
    @seike
    46
    0
    -
    - @seike
    46
    0
    - AWS Community Builder Serverless
    - Fusic
    - /

    - /
    -
    - PHP
    - JAWS Days AWS Devday
    - Serverless Days Tokyo
    -
    -
    大 工 子工
    - PHP
    -
    2

    View full-size slide

  3. Agenda
    1
    .Svelte
    2
    .SvelteKit
    3
    .
    4
    .supabase
    5
    .supabase x SvelteKit
    6
    .
    3

    View full-size slide

  4. Svelte
    JavaScript
    Svelte Svelte

    Write less code
    No virtual DOM DOM
    Truly reactive

    Hooks
    5

    View full-size slide

  5. Write less code - Svelte
    6
    <br/>let a =<br/>1<br/>;<br/>let b =<br/>2<br/>;<br/>


    {a} + {b} = {a + b}
    let State
    bind




    [a] input
    p [a]

    View full-size slide

  6. Write less code + Truly reactive
    7
    <br/>let a =<br/>1<br/>;<br/>let b =<br/>2<br/>;<br/>


    {a} + {b} = {a + b} Svelte ⾒

    View full-size slide

  7. TEMPLATE SYNTAX
    8
    {#if porridge.temperature >
    1
    00
    }
    too hot!
    {:else if
    8 0
    > porridge.temperature}
    too cold!
    {:else}
    just right!
    {/if}
    {#each items as item}
    {item.name} x {item.qty}
    {/each}
    {#await promise}
    waiting for the promise to resolve...
    {:then value}
    The value is {value}
    {:catch error}
    Something went wrong: {error.message}
    {/await}
    {#key value}
    {value}
    {/key}
    {#if }...
    {:else if }
    {/if}
    {#each as name, index}
    ...
    {/each}
    {#await }...
    {:then name}...
    {:catch name}

    {/await}
    {#key }...
    {/key}

    View full-size slide

  8. Props
    Props
    export

    Props


    9
    Counter.svelte
    App.svelte

    View full-size slide

  9. Store
    writable

    Store

    subscribe


    update set

    Store
    11

    View full-size slide

  10. Component Hooks
    onMount
    DOM
    beforeUpdate
    state
    afterUpdate
    onDestroy
    12

    View full-size slide

  11. No virtual DOM
    Virtual DOM Dom

    Virtual DOM
    用 生
    Svelte DOM

    行 行
    13

    View full-size slide

  12. krausest
    React Vue

    Svelte
    14
    https://krausest.github.io/js-framework-benchmark/current.html

    View full-size slide

  13. SvelteKit
    Svelte Vite Rollup


     
    URL
    っ (SSR)

    (SSG)
     高
    SEO

     

     
    16

    View full-size slide

  14. ■ϧʔςΟϯάʢRoutingʣ
    URLͱͦΕʹରԠ͢Δίϯςϯπͷؔ࿈෇͚
    ■σʔλͷಡΈࠐΈʢLoading Dataʣ
    ϖʔδ΍ίϯϙʔωϯτ͕ϩʔυ͞ΕΔࡍʹඞཁͳσʔλΛऔಘ
    ■ϑΥʔϜΞΫγϣϯʢForm Actionsʣ
    ϑΥʔϜͷૹ৴࣌ʹαʔόʔଆͰߦ͏ॲཧ
    ■ϖʔδΦϓγϣϯʢPage Optionsʣ
    ݸʑͷϖʔδʹؔ࿈͢Δઃఆ΍ಈ࡞Λࢦఆ͢Δ
    ■εςʔτ؅ཧʢState Managementʣ
    ΞϓϦέʔγϣϯͷঢ়ଶΛҰݩతʹ؅ཧ
    17

    View full-size slide

  15. Routing
    18
    src/routes/+page.svelte -> /
    1
    >Hello and welcome to my site!1
    >
    About my site
    src/routes/about/+page.svelte -> /about
    1
    >About this site1
    >
    TODO...
    Home
    src/routes/blog/[slug]/+page.svelte -> blog/hoge
    <br/>/** @type {import('./$types').PageData} */<br/>export let data;<br/>
    1
    >{data.title}1
    >
    {@html data.content}
    SvelteKit

    src/routes
    URL
    +error.svelte
    +layout.svelte
    API +server.js
    URL

    View full-size slide

  16. Loading data
    19
    src/routes/blog/[slug]/+page.js
    /** @type {import('./$types').PageLoad} */
    export function load({ params }) {
     
    return {
      
    post: {
       
    title: `Title for ${params.slug} goes here`,
       
    content: `Content for ${params.slug} goes here`
      
    }
     
    };
    }
    src/routes/blog/[slug]/+page.svelte
    <br/> <br/>/** @type {import('./$types').PageData} */<br/> <br/>export let data;<br/>
    1
    >{data.post.title}1
    >
    {@html data.post.content}
    +page.svelte load
    +page.js
    load page
    data

    Layout data
    +page.server.js cookies
    headers

    View full-size slide

  17. Form actions
    20
    src/routes/login/+page.server.js
    /** @type {import('./$types').Actions} */
    export const actions = {
      
    default: async (event) => {
      
    // TODO log the user in
     
    }
    };
    src/routes/login/+page.svelte

     

      
    Email
      

     

     

      
    Password
      

     

     
    Log in

    +page.server.js actions


    POST
    築 築 ⾒
    / 築
    login -> ?/login
    register -> ?/register

    View full-size slide

  18. Page options
    21
    +page.js/+page.server.js/+server.js
    export const prerender = true;
    +page.js
    export const ssr = true;


    HTML
    生 生


    SSR
    生 示

    View full-size slide

  19. State management
    22
    +page.server.js
    let user;
    /** @type {import('./$types').Actions} */
    export const actions = {
     
    default: async ({ request }) => {
      
    const data = await request.formData();
      
    // NEVER DO THIS!
      
    user = {
       
    name: data.get(

    name'),
       
    embarrassingSecret: data.get(

    secret')
      
    };
     
    }
    }
    っ state
    user
    っload

    っcontext store

    View full-size slide

  20. - API
    -
    - API

    -
    - DB

    sqlite
    -
    -
    -
    -


     
     
    ->

    築 or
    24

    View full-size slide


  21. 一 一夕 身

    View full-size slide

  22. supabase
    っPostgreSQL
    supabase PostgreSQL


    Google GitHub Facebook


    API
    SQL RESTful API

    PostgREST




    一 自 行

    GitHub

    -> EC
    2
    28

    View full-size slide

  23. Client

    supabase Client URL KEY
    anonkey KEY
    anonkey CRUD
    29
    PUBLIC_SUPABASE_URL
    PUBLIC_SUPABASE_KEY

    View full-size slide

  24. Anonkey Key
    anon
    Table
    CRUD
    一方 人

    30

    View full-size slide

  25. Row Level Security
    PostgreSQL

    row
    SQL
    人 見
     
    Row Level Security
     
    DB
     
    31
    supabase Row Level Security Firebase

    @dshukertjr
    https://qiita.com/dshukertjr/items/
    0 5
    372
    4 367
    fda
    267 8
    f
    2 41

    View full-size slide

  26. SQL
    行 行
    SQL Editor

    32

    View full-size slide

  27. SQL Editor
    SQL
    行 行
    SQL Editor

    33

    View full-size slide

  28. 34
    API from

    select insert update delete


    match like in
    稿

    order limit

    ORM
    用  

    View full-size slide

  29. Google GitHub Kakao Spotify

    35

    View full-size slide

  30. Storage
    API Amazon S
    3
    Storage


    36

    View full-size slide

  31. Edge Functions

    Deno TypeScript WASM
    37

    View full-size slide


  32. Free 2

    人目
    $25
    用 用
    38

    View full-size slide

  33. 05
    supabase
    X
    SvelteKit

    View full-size slide

  34. SvelteKit supabase ⾒
    SQL ⾒ Model
    Model

    SQL SQL
    行 手
    SvelteKit supabase

    API

    40

    View full-size slide

  35. UI
     
    supabase SvelteKit
     
    ⾒ UI UI
     
    subscribe ⾒
     
    Web
    41

    View full-size slide

  36.  
    SvelteKit

    Vercel
     
    supabase

     
    supabase SvelteKit
     
    42

    View full-size slide


  37.  
    Supabase SvelteKit

     
      用
     
    Supabase

     
    RowLevel RDBMS

    43

    View full-size slide


  38. っFree
     
    Free
    人 用
    PoC
    用 用
     
    2 ⾒

    ⾒ PRO

      用
    PRO
     

     一方 手
     自
    Amazon RDS

    44

    View full-size slide


  39. https://github.com/supabase-community/svelte-kanban
    .env.example .env Rename

    supabase URL anon_key
    SvelteKit supabase ⾒

    45

    View full-size slide

  40. Adapter
    svelte.config.js

    @sveltejs/adapter-auto

    Adapter
    46

    View full-size slide

  41. Sveltekit x Supabase x Skelton
    49
    SvelteKit supabase ⾒ Svelte UI Skelton



    View full-size slide


  42. SQL
    人 力
    SQL

    GUI API

    supabase
    50

    View full-size slide

  43. 52
    SvelteKit
    Point
    1
    supabase
    Point
    2
    SvelteKit X supabase
    Point
    3
    SvelteKit X supabase
    Point
    4

    View full-size slide

  44. Thank You
    We are Hiring !
    https://recruit.fusic.co.jp/

    View full-size slide