ReactとSvelteのその先、Ripple-TS / Beyond React and Svelte: Ripple-TS

Transcript

1. ReactとSvelteのその先、 Ripple-TS ssssota #tskaigi
2. ⾃⼰紹介 ssssota (TOMIKAWA Sotaro) 株式会社ZOZO テックリード 個人OSS開発者 仕事React、趣味Svelte,Preact
3. Ripple-TS (Ripple) とは Reactや、Svelte 5の開発に深く携わってきた Dominic Gannaway氏が開発している、新しいフロントエンドフレームワーク “the elegant TypeScript UI framework” https://www.ripple-ts.com
4. 現状の整理 Framework 書き方 更新モデル React JSX 🧱 Virtual DOM Vue.js SFC / template / JSX 🧱 Virtual DOM Vue Vapor SFC / JSX ⚡ Fine-grained Svelte SFC風 ⚡ Fine-grained Solid.js JSX ⚡ Fine-grained
5. Ripple（と TSRX）がある世界 Framework 書き方 更新モデル React JSX / TSRX 🧱 Virtual DOM Vue.js SFC / template / JSX 🧱 Virtual DOM Vue Vapor SFC / JSX / TSRX ⚡ Fine-grained Svelte SFC風 ⚡ Fine-grained Solid.js JSX / TSRX ⚡ Fine-grained Ripple TSRX ⚡ Fine-grained
6. TSRXとは 元々Rippleのために作られた言語 (.ripple) それをReactやVue、Solid.jsなどでも使えるようにした言語および仕様。 https://tsrx.dev （Ripple特有の言語として紹介するつもりが１ヶ月ほど前にTSRXが発表された）
7. TSRXの⽂法 (1) component App() { <div> "Hello, world!" </div> }
8. TSRXの⽂法 (1 / React) const App__static1 = <div>{'Hello, world!'}</div>; function App() { return App__static1; } component App() { <div> "Hello, world!" </div> } compile
9. TSRXの⽂法 (2) type Props = { name: string }; component App({ name }: Props) { <div> "Hello, " {name} "!" </div> }
10. type Props = { name: string }; component App({ name }: Props) { <div> "Hello, " {name} "!" </div> } TSRXの⽂法 (2 / React) type Props = { name: string }; function App({ name }: Props) { return ( <div> {'Hello, '} {name} {'!'} </div> ); } compile
11. TSRXの⽂法 (3) type Props = { name?: string }; component App({ name }: Props) { <div> "Hello, " if (name) { {name} } else { "world" } "!" </div> }
12. TSRXの⽂法 (3 / React) type Props = { name?: string }; component App({ name }: Props) { <div> "Hello, " if (name) { {name} } else { "world" } "!" </div> } type Props = { name?: string }; function App({ name }: Props) { return ( <div> {'Hello, '} {name ? name : 'world'} {'!'} </div> ); } compile
13. TSRXの⽂法 (scoped-style, for-of, try-catch) component TodoList({ items }) { <ul> for (const item of items) { <li>{item}</li> } </ul> <style> .ul { list-style: none; } </style> } component SafeProfile({ userId }) { try { <UserProfile id={userId} /> } catch (error) { <div class="error"> <p> "Something went wrong." </p> </div> } }
14. Vite, Rspack, Bun(, Turbopack)のプラグインとして利用できる。 TSRXは言語仕様を提供しているので、 どのような形コンパイルされるかはプラグインの実装に依存する。 TSRXでReactコンポーネントを書いておくことで、Solid.jsの出力も可能 （React hooksなどのAPIはそのまま使えないものの） TSRXのコンパイル
15. Fine-grained reactivityと記法 Fine-grained reactivityの実現には記述方法に制約が生まれがち。 (変数直接アクセス、代入では使用箇所の追跡、変更の検知ができないため) // 変数直接アクセス・代入 let state = 0; console.log(state); state = 1; // 利用箇所追跡、変更通知可能 const state = createState(0); console.log(state.value); state.value = 1; function createState(init) { let _state = init; return { get value() { return _state; // +追跡処理 }, set value(val) { _state = val; // +変更通知 } }; }
16. Fine-grained reactivityとTSRX TSRXではLazy destructuring (&{} / &[])と呼ばれる文法を導入して、 JavaScriptのメンタルモデルを極力維持しつつ記法の制限を乗り越える。 // 変数直接アクセス・代入 let state = 0; console.log(state); state = 1; // 利用箇所追跡、変更通知可能 const &{ value } = createState(0); console.log(value); value = 1; let state = 0; console.log(state); state = 1; const __lazy0 = createState(0); console.log(__lazy0.value); __lazy0.value = 1; compile
17. TSRXとは（再） TSRXはTypeScriptの拡張構文。 Vue.jsやSvelteのようにUIのための独自構文と見ることができるが、 より汎用的で、JavaScript/TypeScriptに近い場所にある。 記述のコロケーション（styleタグ、変数宣言等）によりLLMの出力も安定する。 言語は特定のフレームワークにロックせず、それぞれのペインを取り除く。 • React Hooksはコンポーネント内ならどこでも使える（if内、JSX内） • Solid.jsはShow/Forコンポーネントを使わなくてもいい
18. Rippleの特徴 RippleはTSRXファーストなフレームワークの１つ。 • TSRXを前提とした優れた開発者体験 ◦ AI含む • 優れたパフォーマンス ◦ 一般的なSignalsとは異なるアプローチ （時間都合で省略 詳細はAsk the Speakerへ） • Viteベースのメタフレームワーク提供 ◦ SSRなども含む ◦ 絶賛進行中
19. Svelte 5の開発から • 独自構文・コンパイル方式でもユーザーは利用する • Signals開発における知見 Reactの開発から • Hooksの構造的な難しさ • 大規模なReactからの移行難度 ◦ TSRXをフレームワーク移行の中間パスとして利用可能に （Solid.js作者Ryan Carniato氏との対談で言及されている https://www.youtube.com/watch?v=xulUG54CW4c) Dominic Gannaway⽒の視点
20. RippleはTSRXを使った新しいフレームワーク。 TSRXはTypeScriptベースなフレームワーク非依存の基盤言語。 いずれもStableではないものの、利用するのに十分な要素は揃っている。 気になった人は触ってみては？ おわりに