Tweet
Tweet

Slide 1

Slide 1 text

Duckdb-wasmでつくる ローカルダッシュボード クラメソおおさか IT 勉強会 Midosuji Tech #3

Slide 2

Slide 2 text

自己紹介 名前:nk 職種:製造DX関係(業務自動化・データ可視化 ) 経歴:製造業→SES一年目 使用言語:主にPython(とVBA) 個人でReact・AWS等

Slide 3

Slide 3 text

内容 ・自分用ダッシュボードを作った。 ・Duckdb-wasmとは ・気づき ・今後検証したいこと

Slide 4

Slide 4 text

こんなダッシュボードが欲し い... 😑 重くないやつ (PowerBIやStreamlitより軽い) デザインを色々 カスタマイズできる。 ローカルで動く (データソースも内包) 社内制約... Macで使えて無料

Slide 5

Slide 5 text

NBAで活躍中の河村勇樹選手のスコアを使用

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

Duckdb…? 🤔

Slide 8

Slide 8 text

Duckdb…? 😲 組み込みデータベース (ローカル) データ分析など 大量の集計向き 必要な列のみ欲しい時 高速 読み込み形式: CSV,JSON,Parguet…

Slide 9

Slide 9 text

Wasm(Webassembly)…? 🤔

Slide 10

Slide 10 text

Wasm…? 😧 バックエンド処理を フロントエンドに埋め込む OSやデバイスに依存しない 様々な言語から コンパイルされる サンドボックス内で 安全に処理

Slide 11

Slide 11 text

Duckdb+Wasm…? 🤔

Slide 12

Slide 12 text

Duckdb+Wasm…? 🧐 バックエンド処理 +データベースとの処理を フロントエンドに埋め込む 実質使用言語は Javascript or Typescript +SQL 　データ分析用の 　　　大量集計など可能 このままだとデータは消 える

Slide 13

Slide 13 text

Duckdb+Wasm+OPFS…! 👍 バックエンド処理 +データベースとの処理を フロントエンドに埋め込む 実質使用言語は Javascript or Typescript +SQL データ分析用の 　　　大量集計など可能 +OPFS ブラウザにデータを永続化 (LocalStrageのようなもの)

Slide 14

Slide 14 text

React内で アプリが完結 🙌

Slide 15

Slide 15 text

アプリ構成図 OPFS内 CSV view 👀 ✍

Slide 16

Slide 16 text

コードの一部紹介 (時間がなかったため...)

Slide 17

Slide 17 text

気づき ・サーバーサイドがない (クライアントサイドしかない ?) ・バックエンドとの繋ぎこみを考えなくて良いの で作るのが楽 ・SQLはそこまで必要ない ・データ更新時のみS3からデータをとってくるな どAWSとの連携可能？ ・

Slide 18

Slide 18 text

今後検証したいこと 1:セキュリティってほんとに安全？ 2:もっと重いデータでもほんとに速い？ 3:ストリーミングデータは扱えるの？ 4:Postgresqlとの通信ができるの？ 5:parquetでどのくらいの規模のデータを扱える の？ 6:パフォーマンスチューニングって意味ある の？(キャッシュ等) 7:AWS等で作ったパイプラインとの連携 8:実際のデータに基づいたダッシュボードの改 良 ・