Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Building markdown editor using Rust’s parser
HiroyukiYagihashi
November 27, 2021
Technology
0
1.7k
Building markdown editor using Rust’s parser
HiroyukiYagihashi
November 27, 2021
Tweet
Share
More Decks by HiroyukiYagihashi
See All by HiroyukiYagihashi
What is Soft Memory Limit?
yagipy
1
180
OSSに貢献した話と社内での取り組みについて
yagipy
1
130
簡易的な推薦機能を実装する
yagipy
0
58
GitHub oneliner command
yagipy
0
48
Other Decks in Technology
See All in Technology
KyvernoとRed Hat ACMを用いたマルチクラスターの一元的なポリシー制御
ry
0
250
NGINXENG JP#2 - 1-NGINX-エンジニアリング勉強会-きょうの見どころ
hiropo20
0
120
MLOps Workshopでの学びと弥生の研究開発基盤 / takeaways from MLOps workshop and YAYOI's research and development infrastructure
yayoi_dd
0
260
DNS権威サーバのクラウドサービス向けに行われた攻撃および対策 / DNS Pseudo-Random Subdomain Attack and mitigations
kazeburo
5
1.4k
API連携に伴う規制と対応 / Regulations and responses to API linkage
moneyforward
0
170
立ち止まっても、寄り道しても / even if I stop, even if I take a detour
katoaz
0
1.2k
💰年度末予算消化祭💰 Large Memory Instance で 画像分類してみた
__allllllllez__
0
120
日経電子版だけじゃない! 日経の新規Webメディアの開発 - NIKKEI Tech Talk #3
sztm
0
350
モバイルモーションキャプチャーデバイス「mocopi」を軽く試してみた / IoTLT vol.95 (新年会IoTLTラジオ)
you
0
100
PHPのimmutable arrayとは
hnw
1
180
IoT から見る AWS re:invent 2022 ― AWSのIoTの歴史を添えて/Point of view the AWS re:invent 2022 with IoT - with a history of IoT in AWS
ma2shita
0
290
AWS re:Invent 2022で発表された新機能を試してみた ~Cloud OperationとSecurity~ / New Cloud Operation and Security Features Announced at AWS reInvent 2022
yuj1osm
1
230
Featured
See All Featured
Designing Experiences People Love
moore
130
22k
Building a Scalable Design System with Sketch
lauravandoore
451
31k
VelocityConf: Rendering Performance Case Studies
addyosmani
317
22k
GraphQLの誤解/rethinking-graphql
sonatard
39
7.8k
A Tale of Four Properties
chriscoyier
149
21k
YesSQL, Process and Tooling at Scale
rocio
159
12k
Why Our Code Smells
bkeepers
PRO
326
55k
How STYLIGHT went responsive
nonsquared
89
4.2k
A better future with KSS
kneath
230
16k
It's Worth the Effort
3n
177
26k
Large-scale JavaScript Application Architecture
addyosmani
499
110k
How To Stay Up To Date on Web Technology
chriscoyier
779
250k
Transcript
Building markdown editor using Rust’s parser @yagipy JS Conf JP
2021
自己紹介 @yagipy(Hiroyuki Yagihashi) - 所属: からくり株式会社/エンジニア - TypeScript/Next.jsでフロントエンドや、 Go/Node.jsで APIサーバー、AWSでインフラ構築、Figmaでデザイン作成、
Java/KotlinでAndroid等 - エンジニア募集中です - Twitter: @yagipy_ - GitHub: @yagipy - Blog: https://blog.yagipy.me
本セッションのゴール - wasmのユースケースの一部を理解できるようになる - Rustのコードからwasm pkgを生成できるようになる - wasm pkgをReactで使用できるようになる -
マークダウンエディタが構築できるようになる
本セッションで話すこと - 作ったもの - アーキテクチャ - アーキテクチャのモチベーション - フロントエンド複雑化の流れ -
問題点 - 解決策 - 実装の紹介 - Rustのライブラリをwasm pkg化する - wasm pkgをdependenciesに追加する - wasm pkgをロードするReact Hookを定義する - 定義したReact Hookを呼び出す - まとめ
作ったもの
https://editor.yagipy.me - 3種類のプレビュー形式に対応 - デフォルト - マインドマップ - スライド -
3種類のレイアウトに対応 - 2カラム(textarea,preview) - textareaのみ - Previewのみ - 本セッションでは、デフォルト/スライドで使用しているRustコード(マー クダウンパーサー)をReactで使用するまでのアーキテクチャを紹介します
アーキテクチャ
RustコードがReactアプリで使用できるまで Reactアプリ wasm pkg Rustコード wasm-pack import マークダウンパー サー tsの型定義
Jsのラッパー wasm
アーキテクチャのモチベーション
前提: フロントエンド大規模化の流れ - ロジックがフロントエンドに寄ってきている - 主なメリット: 無駄な通信の削減、サーバーリソースの削減 - よりユーザーの近くで計算した方が良い -
エッジコンピューティングやフォグコンピューティングの流れ - サーバーに戻そう、という動きもあるにはあるが ...(React Server Components等)
問題点 - サーバーに書いていた処理をフロントエンド用に書き直す必要がある - 今までサーバーサイドはデータストアの役割に加えて、共通ロジックの置き場所として働い ていたがそうではなくなってきている
解決策 - 色々ある - blitz, Kotlin Multiplatform, wasm, etc.. -
様々な言語の資産を活用したい場合はwasmが選択肢に入る - 今回は、実験としてRustのコードをwasmにしてWeb上で使用するという実 装を行った
実装の紹介
1. Rustのコードをwasm pkg化する 2. wasm pkgをdependenciesに追加する 3. wasm pkgをロードするReact Hookを定義する
4. 定義したReact Hookを呼び出す RustコードをReactアプリで使用するまでの手順
Rustのコードをwasm pkg化する - wasm-packを使用 - wasm_bindgen + package.json等を出力(npm publishする場合にスムーズに対応でき る)
- wasm_bindgen: #[wasm_bindgen]アトリビュートを付けた関数の wasmとJavaScript のラッパーとTypeScriptの型定義を生成する - https://developer.mozilla.org/ja/docs/WebAssembly/Rust_to_wasm#buildi ng_the_package use pulldown_cmark::{html, Options, Parser}; use wasm_bindgen::prelude::*; #[wasm_bindgen] pub fn pulldown_cmark(source_text: &str) -> String { // ~~~ 省略 ~~~ html_output }
wasm pkgをdependenciesに追加する - package.jsonのdependenciesに追加 - 直接/pkgのパスを指定する形でも可能 { "dependencies": { "markdown-parser":
"file:./markdown-parser/pkg" } }
wasm pkgをロードするReact Hookを定義する - wasmを含んだJavaScriptは動的に読み込む必要があるので、その読み込み を待ってrerenderする import { pulldown_cmark }
from 'markdown-parser' export interface IPullDownCmark { pulldown_cmark: typeof pulldown_cmark } export const usePullDownCmark = () => { const [state, setState] = useState<IPullDownCmark | null>(null) useEffect(() => { (async () => { const wasmContainer = await import('markdown-parser') setState(wasmContainer) })() }, []) return state }
定義したReact Hookを呼び出す - 作成したHookを呼ぶ - wasm_bindgenした関数が呼べる interface IProps { text:
string } export const DefaultPreview = ({ text }: IProps): ReactElement => { const instance = usePullDownCmark() return ( <div dangerouslySetInnerHTML={{ __html: instance?.pulldown_cmark(text) ?? '', }} /> ) }
まとめ
まとめ - wasm-packを使用することで、簡単にRustで書いたコードをWeb上で使用 できた - その他のwasmがサポートされている言語のコードも、wasmを介することで Web上で使用できるようになるため、既存の言語資産をWeb上で使用できる
Thank you for listening!