Hotwire よもやま話 Anecdotes on Hotwire 経験したこと、感じたこと、Hotwireのこと 概要 このサイトについて Hotwireとは何か？ Hotwireはどいういう時に向いているか？ あなたはHotwireを採用するべきか？ Hotwireは管理画面限定？ コード例 トグル アコーディオン ドロップダウン リアルタイム検索 サイドバーメニュー カルーセル 引き出し トースト モーダル 「いいね」ボタン Apple Store模写（複雑なステート） Chart.js埋め込み 考える手順 HotwireはMVPのMPAから作る TurboとStimulus: どっちを使う？ Hotwire, React, jQueryのアプローチ コンセプト JavaScriptは使おう！ Stimulus中のHTML生成を避ける理由 サーバから見たTurbo FramesとT
サーバ側だけでフォーム画面をインタラクティブに！ 〜Hotwire を活用した「Ghost Formパターン」〜 こんにちは、@nay3 です。 私はここ数年、仕事とプライベートの両方で Rails と Hotwire を使ってアプリケーション開発をしていますが、その中で、繰り返し使っているパターンがあります。 そのパターンは、とても便利なのですが、数ヶ月も間が空くと忘れてしまい、つい旧態依然としたコードから出発してまた同じところにたどり着く、ということを繰り返してしまいます。 実は、最近もまた繰り返してしまいました。 そこで、今後はすぐに思い出して再利用できるように、このパターンに「Ghost Form パターン」(※)という名前をつけて、記事化してしまうことにしました！ ※Ghost Form という名前については、レビュー協力をいただいた @tanaka51 さんの案を採用させていた
Turbo 8 in 8 minutes Author Name Brad Gessler @bradgessler @bradgessler Image by Annie Ruygt Turbo 8 simplifies the development of live-updating Rails applications. It offers a dramatic leap forward from previous versions by minimizing the need for manually coding turbo frames and turbo stream responses. This advancement simplifies both the creation and maintenance of Rails applications making you
It’s been two decades since Rails changed the way we build web apps. As the demand for richer and richer UIs grew, teams came up with different frontends to deliver on those expectations. Client-side frameworks such as Angular, Ember, and React emerged as popular choices. One of Rails’ strengths has always been to empower individual programmers to not just contribute to, but to ship entire full st
The “getting-back-into-full-stack” trend in web development communities is gaining more traction. Frontend frameworks are trying to embrace server components, htmx is the new black, and LiveView and LiveWire are conquering Elixir and Laravel applications, respectively. And, of course, Ruby on Rails has its newer offspring, Hotwire. Let’s explore how far you can go with the full-stack approach in R
MPA なフレームワークの代表的な存在である Astro。 ただ、SPA なサイトに慣れてしまったためか、個人的には MPA のパタパタした挙動がどうも落ち着きません。これは、ページやサイト側の処理だけが原因ではなく、ブラウザの挙動がページの移動を強調するようになった影響も大きい気がします（セキュリティ対策？）。 そのため、Astro でサイトを作る場合には挙動を SPA っぽくしたくなり、その対策をいろいろと考えるのですが、React Server Components が登場してきた現状だと Next.js で SPA でいいや… と、Astro の出番が少なくなっていました。 ところが、ブロックテーマな WordPress のフロントエンドとして使うフレームワークを検討していたところ、Gatsby.js ではブロックテーマのスタイルと GatsbyImage の相性の悪さが問題となり
Rails7を使った管理画面を業務で、2件ほど進めているのですが、 Rails7から搭載されたHotwireによるSPAっぽい開発が良すぎたので紹介します。 特に今回はRansack、Kaminariをつかった検索一覧画面の実装を紹介します。 これを例えば、Rails API + Vue.jsとかでやろうものなら、なかなか大変ですね。（っていうかめんどくないのでやらない) 事前準備 今回使うプロジェクトはこちら 情報 ruby2.7 Rails7.0 css: tailwind css 使用するデータ シンプルに食べ物を管理するアプリを作りたいと思います # 食べ物をカテゴライズする種別データ create_table :kinds do |t| t.string :name t.timestamps end # 食べ物データ create_table :foods do |t| t.st
（自分はRailsを書くことが多く、フロントエンドの経験は乏しいです。見方にだいぶ偏りがあると思いますので、そのあたり差し引いてお読みいただければと思います〜🙇♂️） こんにちは〜。Hotwireを仕事で使う機会があったので、実際に使ってみて感じた、良かった点、辛かった点、向いているケース、向いていないケースを共有します〜。 Hotwireとは？ Turbo Driveとは？ Turbo Framesとは？ Turbo Streamsとは？ Stimulusとは？ Hotwireのデモ 良かった点 サーバーサイドに集中できる Railsの資産をフルに活かせる 後付けで段階的にSPA風の挙動を追加できる 学習コストが低い 開発コストが低い WebSocketは必須ではない 辛かった点・辛くなりそうな点 DOM更新時にレスポンスを待たないといけない SPAのユーザー体験とはだいぶ違う He
目的スキャフォールドのEditをインラインで編集できるようにする。 環境 Ruby 2.7.2 Rails 6.1.3.1 Turbo 7.0.0-beta.5 アプリ、スキャフォールドとシードを用意する。 rails new hw_inline_edit --skip-javascript cd hw_inline_edit tmux bin/bundle remove jbuilder bin/bundle add hotwire-rails bin/rails hotwire:install bin/bundle install bin/rails g scaffold message title content:text bin/rails db:migrate# db/seeds.rb 1.upto(3) do |i| Message.create!(title: "Title#
はじめに hotwire-railsの勉強にあたって、スクリーンキャストの内容を写経しながら理解した動作について、備忘録として投稿させていただきます。 投稿してる人の理解度 Hotwireを利用すればRailsアプリでSPAが実現できる。 もくじ スクリーンキャストを写経しながらHotwireを理解する（その１） - 0:00 ~ 0:55 Hotwire の 説明 - 0:56 ~ 2:21 Hotwire を 導入する準備 スクリーンキャストを写経しながらHotwireを理解する（その２） - 2:22 ~ 3:16 ページの一部 を turbo-frame にする - 3:17 ~ 3:35 turbo-frame内のリンク から 別ページへ遷移できるようにする スクリーンキャストを写経しながらHotwireを理解する（その３） - 3:36 ~ 4:38 turbo で ページ全体
はじめに Rails7のリリースで、Hotwireに注目が集まっています。どうしてもRailsとペアで語られがちなHotwireですが「HTMLさえあれば動く」のが重要なポイントです。（つまり LaravelやExpressなどあらゆるWebフレームワークと共存できます！） そこで今回は、HTMLのみでHotwireの世界観を体験できるような内容で以下にまとめたいと思います。 触れること Hotwireの構成モジュールの一つである「Turbo」その中でも「Turbo-Frame」 ごく基礎的なことのみ こんな感じのがHTMLの記述だけで作成できます 触れないこと Stimulus Strada その他あらゆる発展的内容 HTMLファイルの準備 以下の２ページを用意します。 - index.html - foo.html まずは、HTMLファイルを準備します。 index.html ポイント
こんにちは、サーバーグループの市川です。モバイルクライアントグループに所属していましたが、バックエンドの開発を担当することが多くなったので、サーバーグループ異動にしました。 最近、Studyplusブックというサービスをリリースしました。Studyplusアプリ内で、200冊以上の参考書が読み放題で使えるサービスです。 このサービスの開発にあたって、社内向けの管理画面を新規に構築したのですが、Rails 7から標準でインストールされるHotwireを利用することにしました。 今回はHotwireを実際に利用する上で、どういったUIを作ればいいか試作しましたので、その話を書きます。 作った画面 書いたソースコード 使った技術 解説 Turboを理解する Turbo Frameでフレーム分割する 追加フォーム (Turbo Frame) 追加処理 (Turbo Stream) 編集フォームと更
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く