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

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

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

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