Slide 1
Slide 1 text
supabase SvelteKit
Web
2023
2
0
23
.
11
.
18
@seike
4
60
1
Slide 2
Slide 2 text
自己
@seike
46
0
-
- @seike
46
0
- AWS Community Builder Serverless
- Fusic
- /
門
- /
-
- PHP
- JAWS Days AWS Devday
- Serverless Days Tokyo
-
-
大 工 子工
- PHP
-
2
Slide 3
Slide 3 text
Agenda
1
.Svelte
2
.SvelteKit
3
.
4
.supabase
5
.supabase x SvelteKit
6
.
3
Slide 4
Slide 4 text
01
Svelte
Slide 5
Slide 5 text
Svelte
JavaScript
Svelte Svelte
言
Write less code
No virtual DOM DOM
Truly reactive
自
Hooks
5
Slide 6
Slide 6 text
Write less code - Svelte
6
let a =
1
;
let b =
2
;
{a} + {b} = {a + b}
let State bind 行 方 築 行 [a] input p [a]Slide 7
Slide 7 text
Write less code + Truly reactive
7
let a =
1
;
let b =
2
;
{a} + {b} = {a + b}
Svelte ⾒Slide 8
Slide 8 text
TEMPLATE SYNTAX
8
{#if porridge.temperature >
1
00
}
{item.name} x {item.qty}
{/each}
{#await promise}
too hot!
{:else if 8 0 > porridge.temperature}too cold!
{:else}just right!
{/if} {#each items as item}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}
Slide 9
Slide 9 text
Props
Props
export
用
Props
用
生
9
Counter.svelte
App.svelte
Slide 10
Slide 10 text
Store
10
Slide 11
Slide 11 text
Store
writable
用
Store
用
subscribe
火
用
update set
用
Store
11
Slide 12
Slide 12 text
Component Hooks
onMount
DOM
beforeUpdate
state
afterUpdate
onDestroy
12
Slide 13
Slide 13 text
No virtual DOM
Virtual DOM Dom
行
Virtual DOM
用 生
Svelte DOM
用
行 行
13
Slide 14
Slide 14 text
krausest
React Vue
比
Svelte
14
https://krausest.github.io/js-framework-benchmark/current.html
Slide 15
Slide 15 text
02
SvelteKit
Slide 16
Slide 16 text
SvelteKit
Svelte Vite Rollup
用
っ
URL
っ (SSR)
生
(SSG)
高
SEO
っ
っ
16
Slide 17
Slide 17 text
■ϧʔςΟϯάʢRoutingʣ
URLͱͦΕʹରԠ͢Δίϯςϯπͷؔ࿈͚
■σʔλͷಡΈࠐΈʢLoading Dataʣ
ϖʔδίϯϙʔωϯτ͕ϩʔυ͞ΕΔࡍʹඞཁͳσʔλΛऔಘ
■ϑΥʔϜΞΫγϣϯʢForm Actionsʣ
ϑΥʔϜͷૹ৴࣌ʹαʔόʔଆͰߦ͏ॲཧ
■ϖʔδΦϓγϣϯʢPage Optionsʣ
ݸʑͷϖʔδʹؔ࿈͢Δઃఆಈ࡞Λࢦఆ͢Δ
■εςʔτཧʢState Managementʣ
ΞϓϦέʔγϣϯͷঢ়ଶΛҰݩతʹཧ
17
Slide 18
Slide 18 text
Routing
18
src/routes/+page.svelte -> /
Hello and welcome to my site!
About my site
src/routes/about/+page.svelte -> /about
About this site
TODO...
Home src/routes/blog/[slug]/+page.svelte -> blog/hoge /** @type {import('./$types').PageData} */ export let data; {data.title}{@html data.content}
SvelteKit
用
src/routes
URL
+error.svelte
+layout.svelte
API +server.js
URL
Slide 19
Slide 19 text
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
/** @type {import('./$types').PageData} */
export let data;
{data.post.title}
{@html data.post.content}
+page.svelte load
+page.js
load page
data
用
Layout data
+page.server.js cookies
headers
Slide 20
Slide 20 text
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
Slide 21
Slide 21 text
Page options
21
+page.js/+page.server.js/+server.js
export const prerender = true;
+page.js
export const ssr = true;
っ
生
HTML
生 生
っ
生
SSR
生 示
Slide 22
Slide 22 text
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
Slide 23
Slide 23 text
03
Slide 24
Slide 24 text
- API
-
- API
用
-
- DB
用
sqlite
-
-
-
-
っ
欠
->
身
築 or
24
Slide 25
Slide 25 text
非
一 一夕 身
Slide 26
Slide 26 text
Point
BaaS
Slide 27
Slide 27 text
04
Supabase
Slide 28
Slide 28 text
supabase
っPostgreSQL
supabase PostgreSQL
っ
っ
Google GitHub Facebook
っ
自
API
SQL RESTful API
自
PostgREST
用
っ
行
っ
一 自 行
っ
GitHub
用
-> EC
2
28
Slide 29
Slide 29 text
Client
生
supabase Client URL KEY
anonkey KEY
anonkey CRUD
29
PUBLIC_SUPABASE_URL
PUBLIC_SUPABASE_KEY
Slide 30
Slide 30 text
Anonkey Key
anon
Table
CRUD
一方 人
人
30
Slide 31
Slide 31 text
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
Slide 32
Slide 32 text
SQL
行 行
SQL Editor
用
32
Slide 33
Slide 33 text
SQL Editor
SQL
行 行
SQL Editor
用
33
Slide 34
Slide 34 text
34
API from
行
select insert update delete
用
行
match like in
稿
行
order limit
用
ORM
用
Slide 35
Slide 35 text
Google GitHub Kakao Spotify
日
35
Slide 36
Slide 36 text
Storage
API Amazon S
3
Storage
用
用
36
Slide 37
Slide 37 text
Edge Functions
用
Deno TypeScript WASM
37
Slide 38
Slide 38 text
金
Free 2
用
人目
$25
用 用
38
Slide 39
Slide 39 text
05
supabase
X
SvelteKit
Slide 40
Slide 40 text
SvelteKit supabase ⾒
SQL ⾒ Model
Model
用
SQL SQL
行 手
SvelteKit supabase
自
API
生
40
Slide 41
Slide 41 text
UI
supabase SvelteKit
⾒ UI UI
subscribe ⾒
Web
41
Slide 42
Slide 42 text
SvelteKit
用
Vercel
supabase
用
supabase SvelteKit
42
Slide 43
Slide 43 text
⾒
Supabase SvelteKit
用
用
Supabase
用
RowLevel RDBMS
一
43
Slide 44
Slide 44 text
文
っFree
Free
人 用
PoC
用 用
2 ⾒
用
⾒ PRO
用
用
PRO
っ
一方 手
自
Amazon RDS
用
44
Slide 45
Slide 45 text
方
https://github.com/supabase-community/svelte-kanban
.env.example .env Rename
自
supabase URL anon_key
SvelteKit supabase ⾒
方
45
Slide 46
Slide 46 text
Adapter
svelte.config.js
用
@sveltejs/adapter-auto
自
Adapter
46
Slide 47
Slide 47 text
47
Slide 48
Slide 48 text
48
Slide 49
Slide 49 text
Sveltekit x Supabase x Skelton
49
SvelteKit supabase ⾒ Svelte UI Skelton
用
⾒
自
Slide 50
Slide 50 text
方
SQL
人 力
SQL
人
GUI API
身
supabase
50
Slide 51
Slide 51 text
07
Slide 52
Slide 52 text
52
SvelteKit
Point
1
supabase
Point
2
SvelteKit X supabase
Point
3
SvelteKit X supabase
Point
4
Slide 53
Slide 53 text
Thank You
We are Hiring !
https://recruit.fusic.co.jp/