【図解】Hotwire : Turbo 7つのアクション - Qiita
はじめに チュートリアルでHotwireの基本を学んだ後に、Railsアプリでサンプルページを作りながら、Turboで用意されてる7つのアクションについて動作確認した結果を図にしました。 各アクションのサンプルコードも本ページに記載しておりますので、Turboの学習にお役立ていただけたらと思います。 ざっくり見たい方向け 公式ドキュメント Turbo Reference アクション Append / Prepend Replace Update Remove Before / After append appendは指定したTurboFrameの中の最後に要素を追加します。 図解 サンプルコード（Rails：抜粋） ユーザ一覧の最後にユーザを追加。 def index @users = User.first(3) end def append @users = User.last(3) r
Stimulusでドラッグ&ドロップ時に画像のアップロードを行う - rochefort's blog
はてなフォトっぽいやつを実装してみます。 やり方 view formのinput file は非表示にしておきます（d-noneスタイル）。 Stimulusのcontrollerは file-drop-controller というものを用意し、ドラッグ&ドロップの操作はここで行うようにします。 click時の操作は元々用意していた preview-controller にて実施します。 # haml .uploading-image.pt-3 = form_with url: user_images_path(@user), local: true, data: { controller: "preview file-drop" } do |f| .input-group.d-none = f.file_field :images, class: "form-control overri
Hotwireかんたん入門｜万葉
こんにちは。万葉でエンジニアをしている金山です。 前回の記事「万葉は Hotwire を推していきます！」では、Rails7 の標準となった Hotwire（HTML OVER THE WIRE）を万葉も推進していきたい、ということをCEO & CTOが書きました。続く本記事では、 Hotwire についてはまだ詳しく知らないという方に向けて、概要をわかりやすく説明してみたいと思います。 Hotwireとは？近年、モダンなWebアプリケーションは、React や Vue.js などを用いたSPA(Single Page Application) として開発されることが多くなっています。このアプローチでは、アプリケーションをクライアントサイドとサーバサイドの２つに分け、サーバサイドはクライアントから利用できる API を用意し、レスポンスとして JSON を返します。クライアントサイドは、J
Hotwireの良かった点、辛かった点、向いているケース、向いていないケース - 猫Rails
（自分はRailsを書くことが多く、フロントエンドの経験は乏しいです。見方にだいぶ偏りがあると思いますので、そのあたり差し引いてお読みいただければと思います〜🙇♂️） こんにちは〜。Hotwireを仕事で使う機会があったので、実際に使ってみて感じた、良かった点、辛かった点、向いているケース、向いていないケースを共有します〜。 Hotwireとは？ Turbo Driveとは？ Turbo Framesとは？ Turbo Streamsとは？ Stimulusとは？ Hotwireのデモ 良かった点 サーバーサイドに集中できる Railsの資産をフルに活かせる 後付けで段階的にSPA風の挙動を追加できる 学習コストが低い 開発コストが低い WebSocketは必須ではない 辛かった点・辛くなりそうな点 DOM更新時にレスポンスを待たないといけない SPAのユーザー体験とはだいぶ違う He
React vs Hotwire ~ 私とHotwireとその後
半年くらい前にこんな記事を書きました。 様々なプロダクトにメインとして使用しているNext.js製のフロントエンドをStimulusとTurboに書き換えて運用してみました。 今回は実際に運用してみた所管などをまとめたいと思います。 はじめに とはいえ、Hotwireたちは飽くまでフロントエンドのみ。バックエンド側のロジックを持つことのできないこれらのライブラリとの単純な比較対象としては、サーバーレスでも運用できるNext.jsとは若干ズレが出てきます。 今回私はNode.js製のバックエンドサーバーの上にNext.jsが乗っかていたもののフロントエンドの部分を、従来型のpugのマークアップとHotwireに置換し運用しました。 ですので、今回はNext.jsではなくReactとの比較を行っていきます。 ここは一つご留意ください。 ちなみにVercelなどのPaasなどでHotwireを使
クライアント側のJavaScriptを最小限にするHotwire
iCARE Developer Meetupは、月次で開催している株式会社iCAREが主催するエンジニア向けのLT勉強会です。18回目の今回は、Ruby on Railsをテーマに行いました。株式会社iCAREの技術顧問である前島真一氏がHotwireについて話しました。全2回。前半はHotwireのアーキテクチャとTurbolinksについて。 HotwireはWebアプリケーションを作るための新しいアプローチ 前島真一氏：Hotwireについて話します。前島です。ハンドルネームはwillnetや、netwillnetです。iCAREさんをはじめとして、いろいろな会社で技術顧問をしています。空いた時間を使って、「savanna.io」というお仕事情報SNSを開発しています。savanna.ioは、これから話すHotwireを利用して作っています。 Hotwireがどんなものかを簡単に説明
HotwireからDHHが考えるこれからのRailsとJSの付き合い方を知る
「iCARE Dev Meetup #18」�で発表した資料です https://icare.connpass.com/event/201662/
iCARE Dev MeetupでHotwireについて話した - おもしろwebサービス開発日記
僕がお手伝いしているiCAREさん主催のミートアップ、iCARE Dev Meetupで、最近発表されたBasecamp社製jsフレームワークであるHotwireについて話しました。 【iCARE Dev Meetup #18】技術顧問が語る、Ruby on Rails実践開発 - connpass 動画も公開されているので気になる方は探してみてください*1。 所感 弊社サービスであるsavanna.ioはHotwireを使って作っています。Hotwireはつい最近発表されましたが、その前身となるフレームワークであるturbolinksとStimulusの組み合わせで数年間開発していました。 なので「サーバサイドはHTMLを返し、jsは最小限」というスタイルが少人数で開発するチームにとてもマッチすることは身を持って体験しています。Vue.jsやReactを採用していたら機能を開発するスピー
Hotwireとは何なのか？
はじめに HotwireはBasecampが発表した、モダンなWebアプリケーションを作るための新しいアプローチです。名前もHTML OVER THE WIREから来ているように、HotwireではHTMLをサーバーから送ります。「それ普通のWebアプリケーションでは？」と思う方もいるかもしれませんが、SPA + APIサーバでJSONが使われるのに対し、SPAと同様の体験をHTMLを中心に置いて作るアプローチであることを示す表現です。 僕個人は、最初は「ふ〜ん」という感じだったんですが turbo-railsを読みつつHotwireのデモアプリをPhoenixに移植してみたり WebSocketではないTurbo Streamsのsourceを作ってみて遊んだり と、ある程度触ってみて良さが理解できてきたので、Hotwireを使うと何が嬉しいのか、Hotwireの各要素の紹介を記事として
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
猫でもわかるHotwire入門 Turbo編