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
2.1k
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
動画配信サービスのフロントエンド実装に学ぶ設計原則
yud0uhu
1
200
非デザイナーのフロントエンドエンジニアがOOUIを考える
yud0uhu
9
4.7k
2023年の ゼロランタイムCSS in JS⚡️ を考える
yud0uhu
5
4.4k
入社半年を迎える新米エンジニアがカンファレンス・勉強会から得た学び
yud0uhu
0
850
Next.js×Prisma×GraphQL×Supabase +WASMでブログを自作した話
yud0uhu
0
940
Rustでつくって学ぶProtocol Buffers
yud0uhu
1
33
ブログを自作した話
yud0uhu
1
13
Wasmで動くRust製マークダウンパーサーを自作した話
yud0uhu
1
21
Rustで自作しながら学ぶ仮想DOM
yud0uhu
1
19
Other Decks in Technology
See All in Technology
フェンリルの SwiftUI の研修を覗いてみる / Fenrir SwiftUI Training
studio_rookery
0
130
エンジニアのドメイン知識獲得コストを低減するアプリケーションデザイン
ryo_nagata_
3
130
CData Virtuality を活かせるキーシナリオと製品デモ
cdataj
0
430
20241015 Toranomon Tech Hub#1 Service Catalog使ってみた
hiashisan
0
210
運営11年目タイトルを守る最強の盾の有効性と活用法
mixi_engineers
PRO
2
120
Demystifying Vite Internals
nozomuikuta
2
210
Transforming Event Attendees into Lifelong Donors: Insights from Claire Axelrad
auctria
PRO
1
110
いまいまMySQL2024 @ OSC Nagaoka
sakaik
3
270
俺とVSCode Python Debugger Extension
sat
PRO
1
140
Cosmos DB で持続可能な RAG を実現しよう!~ AOAI Dev Day ふりかえりを添えて / Sustainable RAG with Cosmos DB with recap AOAI Dev Day
miyake
0
170
データ分析基盤のためにS3を深堀りする~アーキテクチャ設計の考え方のヒントに~
nrinetcom
PRO
1
740
Azure AI servicesと歯のおはなし/AzureTravelers_Fukuoka2024_baba
nina01
1
110
Featured
See All Featured
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
231
17k
A Tale of Four Properties
chriscoyier
156
22k
Designing the Hi-DPI Web
ddemaree
280
34k
How to train your dragon (web standard)
notwaldorf
87
5.6k
Code Review Best Practice
trishagee
63
17k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
5
130
Building Better People: How to give real-time feedback that sticks.
wjessup
362
19k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
327
21k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
59k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
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 ご静聴ありがとうござ いました !