$30 off During Our Annual Pro Sale. View Details »

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

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

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

shiro seike
PRO

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 Slide

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

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

    View Slide

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

    View Slide

  4. 01
    Svelte

    View Slide

  5. Svelte
    JavaScript
    Svelte Svelte

    Write less code
    No virtual DOM DOM
    Truly reactive

    Hooks
    5

    View Slide

  6. 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 Slide

  7. 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 Slide

  8. 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 Slide

  9. Props
    Props
    export

    Props


    9
    Counter.svelte
    App.svelte

    View Slide

  10. Store
    10

    View Slide

  11. Store
    writable

    Store

    subscribe


    update set

    Store
    11

    View Slide

  12. Component Hooks
    onMount
    DOM
    beforeUpdate
    state
    afterUpdate
    onDestroy
    12

    View Slide

  13. No virtual DOM
    Virtual DOM Dom

    Virtual DOM
    用 生
    Svelte DOM

    行 行
    13

    View Slide

  14. krausest
    React Vue

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

    View Slide

  15. 02
    SvelteKit

    View Slide

  16. SvelteKit
    Svelte Vite Rollup


     
    URL
    っ (SSR)

    (SSG)
     高
    SEO

     

     
    16

    View Slide

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

    View Slide

  18. 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 Slide

  19. 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 Slide

  20. 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 Slide

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


    HTML
    生 生


    SSR
    生 示

    View Slide

  22. 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 Slide

  23. 03

    View Slide

  24. - API
    -
    - API

    -
    - DB

    sqlite
    -
    -
    -
    -


     
     
    ->

    築 or
    24

    View Slide


  25. 一 一夕 身

    View Slide

  26. Point
    BaaS

    View Slide

  27. 04
    Supabase

    View Slide

  28. supabase
    っPostgreSQL
    supabase PostgreSQL


    Google GitHub Facebook


    API
    SQL RESTful API

    PostgREST




    一 自 行

    GitHub

    -> EC
    2
    28

    View Slide

  29. Client

    supabase Client URL KEY
    anonkey KEY
    anonkey CRUD
    29
    PUBLIC_SUPABASE_URL
    PUBLIC_SUPABASE_KEY

    View Slide

  30. Anonkey Key
    anon
    Table
    CRUD
    一方 人

    30

    View Slide

  31. 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 Slide

  32. SQL
    行 行
    SQL Editor

    32

    View Slide

  33. SQL Editor
    SQL
    行 行
    SQL Editor

    33

    View Slide

  34. 34
    API from

    select insert update delete


    match like in
    稿

    order limit

    ORM
    用  

    View Slide

  35. Google GitHub Kakao Spotify

    35

    View Slide

  36. Storage
    API Amazon S
    3
    Storage


    36

    View Slide

  37. Edge Functions

    Deno TypeScript WASM
    37

    View Slide


  38. Free 2

    人目
    $25
    用 用
    38

    View Slide

  39. 05
    supabase
    X
    SvelteKit

    View Slide

  40. SvelteKit supabase ⾒
    SQL ⾒ Model
    Model

    SQL SQL
    行 手
    SvelteKit supabase

    API

    40

    View Slide

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

    View Slide

  42.  
    SvelteKit

    Vercel
     
    supabase

     
    supabase SvelteKit
     
    42

    View Slide


  43.  
    Supabase SvelteKit

     
      用
     
    Supabase

     
    RowLevel RDBMS

    43

    View Slide


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

    ⾒ PRO

      用
    PRO
     

     一方 手
     自
    Amazon RDS

    44

    View Slide


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

    supabase URL anon_key
    SvelteKit supabase ⾒

    45

    View Slide

  46. Adapter
    svelte.config.js

    @sveltejs/adapter-auto

    Adapter
    46

    View Slide

  47. 47

    View Slide

  48. 48

    View Slide

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



    View Slide


  50. SQL
    人 力
    SQL

    GUI API

    supabase
    50

    View Slide

  51. 07

    View Slide

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

    View Slide

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

    View Slide