Hotwire: ブックマーク
Hotwire
Hotwire is an alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire.
・モダンなWebアプリケーション構築の代替アプローチ
・JSONの代わりにHTMLをネットワーク経由で送信する
・JavaScriptをあまり使用しない
Turbo
・TurboはHotwireの心臓部
・ページ変更とフォーム送信を高速化する
・JavaScriptの記述は不要
Stimulus
・コントローラ（アクション、ターゲット…）が基本単位
・HTMLとJavaScriptが混在しない
・HTML(DOM)側に状態を持つ
TurboとStimulusとカスタムコンポーネント
・Turboで8割のケースをカバーできる
・必要に応じてStimulus(JavaScript)を用いる
・複雑なものはカスタムコンポーネントを作る
🧠 Key takeaway from @adamwathan Full Stack Radio interview with @dhh on Hotwire: start simple at the top of the stack and layer on *as you need it*
— matt swanson 🤔 🦢 (@_swanson) December 28, 2020
Each page in your app will have different needs and may not warrant going all the way down the stack every time. pic.twitter.com/5mLhyXIyll
必要に応じてレイヤーの上から使用を検討する
Turbo Drive
Links and forms submitted with `fetch` and full <body> swaps
Turbo Frames
Page sections w/ lazy loading, scoped navigation for partial page swaps
Turbo Streams
Reactive updates w/ standard CRUD actions for DOM changes
Stimulus
Standard conventions for specific client-side sprinkles and interactivity
Custom Componets
Standard libraries for super-complex components (Trix, calendars, etc)
UI patterns
Talking to Adam also gave me an idea of making the hidden frame reveal easier. And the inspiration that we should put out a Hotwire style guide, deconstructing common UI patterns, and how we'd recommend doing them with drive/frames/streams/stimulus.
— DHH (@dhh) December 28, 2020
Podcast
MISC
Turbo
Stimulus
Table
stimulus-site
🖍️ I love how the Hotwire docs highlights chunks of the code snippets.
— matt swanson 🤔 🦢 (@_swanson) January 8, 2021
I went digging around to see how it was done: it's a Stimulus controller augmenting the standard Jekyll code blocks. How <meta>!https://t.co/MkuYkLl3n2 @javan @sstephenson pic.twitter.com/44hdQF0f0O
2021/03/12 追記
この記事が気に入ったらサポートをしてみませんか？