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.3k
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.8k
入社半年を迎える新米エンジニアがカンファレンス・勉強会から得た学び
yud0uhu
0
610
Next.js×Prisma×GraphQL×Supabase +WASMでブログを自作した話
yud0uhu
0
660
Other Decks in Technology
See All in Technology
Android Target SDK 35 (Android 15) 対応の概要
akkie76
0
140
Rustで「プリズモイダル法」を利用して「土量計算」をガチでやる
nokonoko1203
1
250
AOAI をきっかけに 社内の Azure 管理を見直した話
recruitengineers
PRO
1
430
Cloud Service Mesh に触れ合う
phaya72
1
140
本当のAWS基礎
toru_kubota
1
610
Grafana x PagerDuty Better Together
jacopen
1
240
DMM.com アルファ室採用案内資料
hsugita
1
210
競技としてのKaggle、役に立つKaggle
yu4u
6
2.3k
Google Cloud Next '24 Recap(Cloud Run/k8s)
mokocm
0
310
How to do well in consulting–Balkan Ruby 2024
irinanazarova
0
120
Cypress or Playwright?
rainerhahnekamp
0
160
「スニダン」開発組織の構造に込めた意図 ~組織作りはパッションや政治ではない!~
rinchsan
4
610
Featured
See All Featured
For a Future-Friendly Web
brad_frost
172
9k
The Power of CSS Pseudo Elements
geoffreycrofte
61
5k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
358
22k
Building an army of robots
kneath
300
41k
The Invisible Side of Design
smashingmag
294
49k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
11
1k
Teambox: Starting and Learning
jrom
128
8.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
22
1.6k
We Have a Design System, Now What?
morganepeng
44
6.8k
The World Runs on Bad Software
bkeepers
PRO
61
6.7k
Automating Front-end Workflow
addyosmani
1357
200k
In The Pink: A Labor of Love
frogandcode
138
21k
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 ご静聴ありがとうござ いました !