Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Vue3/Electronで自作したマークダウンエディタをVue3/Tauriにリプレイスした話
Search
yud0uhu
October 27, 2023
Technology
2
1.4k
Vue3/Electronで自作したマークダウンエディタをVue3/Tauriにリプレイスした話
Vue Fes Japan 2023 LT登壇資料です
https://vuefes.jp/2023/sessions/yud0uhu
yud0uhu
October 27, 2023
Tweet
Share
More Decks by yud0uhu
See All by yud0uhu
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
8
3.8k
2023年の ゼロランタイムCSS in JS⚡️ を考える
yud0uhu
4
3.9k
入社半年を迎える新米エンジニアがカンファレンス・勉強会から得た学び
yud0uhu
0
620
Next.js×Prisma×GraphQL×Supabase +WASMでブログを自作した話
yud0uhu
0
670
Other Decks in Technology
See All in Technology
Building Dashboards as a Hobby
egmc
0
420
NewSQL Landscape
oracle4engineer
PRO
0
180
類似ロジック実装をiOS/Android間で合わせる道標No.1
fumiyasac0921
0
120
【基本】データベース設計
oracle4engineer
PRO
2
250
.NET Profiler in 2024.
kkamegawa
2
2.3k
自らを知り外と繋がる、日経のエンジニア採用とDevRel活動/devreljp92
nishiuma
1
120
Microsoft Intune 勉強会 第 2 回目
tamaiyutaro
2
500
中年男性がメインフレームから クラウドへキャリアシフトしてみた
uechishingo
1
400
Max out Local LLM in Challenging Environments
sashimimochi
2
200
競技としてのKaggle、役に立つKaggle
yu4u
7
2.5k
BPStudyの200回を中心にIT業界を振り返る。そしてこれから
haru860
3
430
Grafana x PagerDuty Better Together
jacopen
1
320
Featured
See All Featured
Being A Developer After 40
akosma
67
580k
Rebuilding a faster, lazier Slack
samanthasiow
74
8.3k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
123
39k
The Cult of Friendly URLs
andyhume
74
5.7k
Making the Leap to Tech Lead
cromwellryan
125
8.5k
Optimising Largest Contentful Paint
csswizardry
13
2.4k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
8
3.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
398
65k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Six Lessons from altMBA
skipperchong
22
3k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
Transcript
1 Vue3/Electronで自作したマーク ダウンエディタをVue3/Tauriに リプレイスした話 Vue Fes Japan 2023
自己紹介 • 名前:0yu(おゆ) • 所属:合同会社DMM.com動画配信開発部 23新卒 • 出身:北海道 2 っっっz
yud0uhu
3 作ったもの
4
サポートする機能 • .txt .md形式での保存 • リアルタイムプレビュー • コードハイライト 5
6 作ったもの
7
追加で実装した機能 • 絵文字、マークダウンサジェスト • Mermaid.js記法の対応 8
概説 Electron 9
10
概説:Electron • Webフロントエンドの技術でデスクトップアプリが作れるGUIフ レームワーク • ChromiumとNode.jsがバイナリに組み込まれている ◦ 単一のJavaScriptコードベースを維持しつつ、クロスプラッ トフォームアプリが開発可能 •
開発元はGitHub社 ◦ VSCodeやSlackはElectronで作られている 11
12 概説 Tauri
概説:Tauri 13
概説:Tauri • RustとWebフロントエンドの技術でデスクトップアプリが作れる GUIフレームワーク • 一言で言うと「小さいElectron」 • Chromiumなどのブラウザを組み込んでおらず、OSのWebView機 能を呼び出すラッパー(WRY)を用いている ◦
軽量・高速に動いてくれることが特徴 ◦ ブラウザの脆弱性に関する対策を行う必要がない 14
15 WRY is 何?
WRY(Webview Rendering librarY) • 「OSに備わっているWebViewを使ってレンダリングする」機能 をラップしたクレート ◦ Windows 👉 WebView2
◦ Linux 👉 WebKitGTK ◦ macOS 👉 WKWebView 16
17 Core Ecosystem
Core Ecosystem 18
19 • tauri-build 👉実行可能なインストーラとバイナリを生成する • tauri-codegen 👉アイコンやシステムトレイなどのアセットを埋め込み、ハッ シュ化・圧縮する 👉コンパイル時にtauri.conf.jsonを解析し、Config構造体を生成 する
Core Ecosystem(1/3)
20 • tauri-macros 👉tauri-codegenクレートを用いて、コンテキスト、ハンド ラー、コマンドのマクロを作成する • tauri-runtime 👉TauriとWebViewライブラリ(WRY,TAO)の連携を行う層 • tauri-utils
👉tauri-codegenクレートを用いて、コンテキスト、ハンド ラー、コマンドのマクロを作成する Core Ecosystem(2/3)
21 TauriのWebView部分を支える外部モジュール • WRY 👉WebViewを扱うためのクレート • TAO 👉Windowを操作するためのクレート Core Ecosystem(3/3)
22 Tauriのプロセスモデル
23 Tauriのプロセスモデル
24 Tauriの プロセス間通信の仕組 み
25 プロセス間通信:具体例
プロセス間通信:具体例 26 // … #[tauri::command] fn generate_mermaid_img(code: String) -> String
{ let encoded_code = encode_to_base64(&code); let response = ApiResponse { img: format!("https://mermaid.ink/img/{}", encoded_code), }; format!("{}", response.img) }
プロセス間通信:具体例 27 // … fn main() { tauri::Builder::default() .invoke_handler(tauri::generate_handler![generate_mermaid_img]) .run(tauri::generate_context!())
.expect("error while running tauri application"); }
28 プロセス間通信:具体例
プロセス間通信:具体例 29 import { invoke } from "@tauri-apps/api"; // …
const generateMermaidImg = async (code: string) => { try { const response = await invoke("generate_mermaid_img", { code: code }); return response; } catch (error) { // …
30 Tauriの セキュリティ
31 Tauriのセキュリティ • tauri/allowlist 👉アプリケーション内でのJSの実行・API呼び出しを制御するた めの機構 👉使用する機能を個別に有効化、無効化できる
tauri/allowlist:具体例 "tauri": { "allowlist": { "all": false, ... "dialog": {
"open": true, "save": true }, "fs": { "all": true, "writeFile": true }, ... }, 32
tauri/allowlist:具体例 <script setup lang="ts"> import Header from "./components/Header.vue"; import MarkdownEditor
from "./components/MarkdownEditor.vue"; import { ref } from "vue"; import { open, save } from "@tauri-apps/api/dialog"; import { readTextFile, writeFile } from "@tauri-apps/api/fs"; import { appDir } from "@tauri-apps/api/path"; 33
tauri/allowlist:具体例 const openFile = async () => { try {
const selected = await open({ directory: false, multiple: false, defaultPath: await appDir(), filters: [{ name: "Markdown and Text Files", extensions: ["md", "txt"] }], }); 34
tauri/allowlist:具体例 if (selected !== null) { if (!Array.isArray(selected)) { const
filePath = selected; const contents = await readTextFile(filePath); onMarkdownUpdate(contents); } } } catch (error) { // … 35
tauri/allowlist:具体例 const saveFile = async () => { try {
const result = await save({ defaultPath: "untitled.txt", filters: [{ name: "Markdown and Text Files", extensions: ["md", "txt"] }], }); if (result) { const fileContents = markdownText.value; await writeFile({ path: result, contents: fileContents ? fileContents : "", }); 36
37 パフォーマンスを計測 してみる
38 パフォーマンスを計測してみる 比較 Tauri Electron インストーラサイズ 3.1MB 52.1MB メモリ利用量 180MB
462MB 起動速度 0.39秒 0.8秒 レンダリング WRY Chromium
39 実際のアプリケーションサイズ・実行時間の比較 パフォーマンスを計測してみる 比較 Tauri Electron 起動速度 0.49秒 0.58秒 アプリケーションサ
イズ 31.1MB 588MB
最終的な実装 40 https://github.com/yud0uhu/markdown-editor-tauri-web
41 ご静聴ありがとうござ いました !