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
5分でわかるPreactのVDOMで作るWebエディタ
Search
did0es
June 25, 2024
Technology
0
190
5分でわかるPreactのVDOMで作るWebエディタ
めぐろLT #16 (
https://meguro-lt.connpass.com/event/316885
)にて発表した LT の資料です。
紹介したライブラリのデモは
こちら
です。
did0es
June 25, 2024
Tweet
Share
More Decks by did0es
See All by did0es
歴代のWeb Speed Hackathonの出題から考えるデグレしないパフォーマンス改善
shuta13
6
640
なぜクラウドサービスで Web コンソールを提供するのか
shuta13
4
2.4k
TailwindCSSでUIライブラリを作る際のハマりどころ
shuta13
0
680
codemodとうまく付き合うには
shuta13
0
2.5k
プライベートクラウドのコンソール画面をNext.jsのApp Routerでフルリプレイスした話
shuta13
4
940
CyberAgent Developer Conference(CADC) 2023 LP開発の舞台裏
shuta13
0
250
Turborepo Code Generationによる、サイバーエージェントグループのフロントエンド開発の効率化
shuta13
4
2.6k
CADC 2023 LPにおけるライブ配信の裏側 | Momento Meetup #3
shuta13
0
160
Technologies for developing editors / Webエディタ開発を支える技術
shuta13
1
820
Other Decks in Technology
See All in Technology
allow_retry と Arel.sql / allow_retry and Arel.sql
euglena1215
1
160
カミナシ社の『ID管理基盤』製品内製 - その意思決定背景と2年間の進化 #AWSUnicornDay / Kaminashi ID - The Big Whys
kaminashi
3
820
Codeful Serverless / 一人運用でもやり抜く力
_kensh
6
310
JTCにおける内製×スクラム開発への挑戦〜内製化率95%達成の舞台裏/JTC's challenge of in-house development with Scrum
aeonpeople
0
100
Skrub: machine-learning with dataframes
gaelvaroquaux
0
120
【実演版】カンファレンス登壇者・スタッフにこそ知ってほしいマイクの使い方 / 大吉祥寺.pm 2025
arthur1
1
340
「魔法少女まどか☆マギカ Magia Exedra」の必殺技演出を徹底解剖! -キャラクターの魅力を最大限にファンに届けるためのこだわり-
gree_tech
PRO
0
590
RSCの時代にReactとフレームワークの境界を探る
uhyo
10
3.1k
[RSJ25] Feasible RAG: Hierarchical Multimodal Retrieval with Feasibility-Aware Embodied Memory for Mobile Manipulation
keio_smilab
PRO
0
120
LLM翻訳ツールの開発と海外のお客様対応等への社内導入事例
gree_tech
PRO
0
580
なぜSaaSがMCPサーバーをサービス提供するのか?
sansantech
PRO
8
2.5k
今!ソフトウェアエンジニアがハードウェアに手を出すには
mackee
10
4.4k
Featured
See All Featured
Testing 201, or: Great Expectations
jmmastey
45
7.6k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Into the Great Unknown - MozCon
thekraken
40
2k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Become a Pro
speakerdeck
PRO
29
5.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
Thoughts on Productivity
jonyablonski
70
4.8k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Typedesign – Prime Four
hannesfritz
42
2.8k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.8k
Transcript
5分でわかる PreactのVDOMで作る Webエディタ did0es 2024/06/25 @ めぐろLT #16
did0es(Hirai Shuta) SWE @ CyberAgent, Inc. Main organizer @ Meguro.es
最近の供養したいこと: EURO2024 をリアタイ観戦して サッカー意識を高めていたところ 寝不足で怪我をしてしまい まさかの自分が負傷退場する羽目に 自己紹介
タイトル再掲 5分でわかる PreactのVDOMで作る Webエディタ
🤖 < エディタライブラリを使えば 5分もかからないのに...
車輪の再発明した結果 車輪ではないものを創り出してしまった お話です😇
背景 lexical(https://lexical.dev) を使いたかった ・Draft.js(https://draftjs.org)の後継 ・当時(2,3年前)はα版でdocsがスカスカだった α版を本番運用はできないので自作した ・メディアサイトの入稿画面を作る仕事の一貫 ・Reconciler を搭載したエディタライブラリを作れば それはもう
lexical では!?という安直な考え
エディタの要件 リッチ ・非エンジニアが使えるように ・DnDやGUIによるブロック操作は必須 特定のViewライブラリ非依存 ・React以外に、VueやWeb Componentsで組まれている箇所などでも 使えるように
どうやって何を作ったのか
実装フロー 1. lexical の実装を読む 2. React の技術の転用だと気づき、React の実装を読む 3. lexical,
React の規模では再現できないと思い、よりミニマルな Preact の実装を読む 4. Preact から Reconciler を取り出す 5. Reconciler を好きなエディタライブラリに移植する 6. lexical かな それって lexical だね 差分検出大好き(完成🐲)
lexical の仕組みを簡単に 画像: https://dio.la/article/lexical-state-updates
🤖 < lexical の実装を 真似すればよかったのに...
人間は怠惰なので つい楽をしようとしてしまう
せや! 昔 React の中身を読んだことあったから その知識でどうにかしたろ!
lexical と似ている React を読んでみる https://github.com/facebook/react の Reconciler を中心に読みつつ、量が膨大 なので 以下の参考資料と併せて読んでいく
・https://ja.legacy.reactjs.org/docs/implementation-notes.html ・旧型の差分検出(Stack)の話 ・https://jsconf.jp/2022/talk/internal-implementation-of-react ・新型の差分検出(Fiber)の話 ・https://github.com/shuta13/react-deep-dive(注: 手前味噌) ・Stack, Fiber 両方を再現する話
lexical より複雑では
Preact を読んでみる React の軽量版で、なんとコードは1000行程度(3年前の情報) https://github.com/preactjs/preact を読みつつ、適宜以下も参考に ・https://blog.ojisan.io/preact-reading ・差分検出処理についてかなり詳細に書かれている記事 ・preactの仕組みを理解する軽量版教育用preactを作ってる話 -
Speaker Deck ・上の記事と同じ方がフルスクラッチで再現した話
Preact から Reconciler を取り出す preact/src/diff 配下の実装から、VDOM を比較・更新している処理だけを 取り出して動かす ・Preact は可読性よりも
Perf を意識したコードになっているので 人間に優しいように、適宜処理の流れや変数名を書き換え ・そもそも元の実装は Pure JS なので TypeScript で書き換え
余談: react-reconciler をインストールすれば解決? react-reconciler というパッケージが React から独立して存在する ・これをインストールすれば差分検出できそう... ・しかし peerDeps
に React が入っているのでスタンドアロンでは動かない ちなみに Preact は、reconciler などを個別にパッケージ化しない方針 ・react-three-fiber on Preact? (discussion) · Issue #2538
エディタライブラリへ移植 View ライブラリ非依存のエディタライブラリの選定 ・選ばれたのは Editor.js でした Editor.js ハック ・また内部実装を持ってくるわけにはいかないので プラグインとして、Reconciler
を入れる ・プラグインを選択すると VDOM からブロックが生成される ・ブロックごとに state を持つ ・もはや lexical とは別物に...
デモ(時間あれば)
作ってみてどうだった?
よかった点 思いついたことを具現化できた ・アウトプット◯ ・発想△ lexical, React, Preactの実装に詳しくなった ・特に Preact を完全に理解した
・VDOM から如何にして DOM を組み立てるのか ・何の差分をどうやって検出するのか
苦労した点 Preact の hooks 周辺 ・内部状態を扱う箇所が副作用多めで難解 ・useState を中心に、自分が再現できるものだけ再現 型 ・元の実装は
Pure JS だったので TS 化したが、工数が膨れ上がった だけだった ・一部で型の恩恵を得られたが ts-expect-error まみれ ・Preact の処理をほぼそのまま動かせたのでテスト書くだけで十分だった
反省点 あまりにもオーバーエンジニアリング ・ラーメンを作るためにまず小麦を育てている状態 バグが生まれ続けた ・見事なマッチポンプが出来上がった ・この反省から別のライブラリを拡張した テストも元の実装から持ってくるべき ・今流行りのGoやRustによる置き換えはこれをやっている
https://github.com/cam-inc/pde.js (inactive) お賽銭代わりに良ければスターをポチッとお願いします😭
供養完了(?)
ご清聴 ありがとうございました!