[B! Hotwire] miguchiのブックマーク

JSフレームワークを勉強したくないのでHotwireを使ってサーバーサイドだけでモダンなUIを作ってみた

miguchi 2024/01/12

リンク

Hotwire勉強会ログ (1) Turbo - Qiita

はじめに Rails7から標準となったHotwireについて勉強会をしました。前半はTurboで後半がStimulusです。場所はSENQ六本木のスカイテラスで、晴れていたのですが少し寒かったかもしれません。 Railsで有名な万葉さんもHotwireをやっていくそうです。私の場合は最近のRailsのJavaScriptの機能は使っていなくて、Turbolinksはオフにすることが多かったです。Rails7ではHotwireが標準になってrails-ujsもフェードアウトしていきそうなので、ここは観念して勉強しようと思いました。そしてForkwellさんのDHHへのインタービュー動画を見たことも影響しました。というわけで、まずはHotwireのTurboをやっていきます。 Turboの概要 Turbo Drive ページ全体を更新 Turbolinksと同じようなもの Turbo

miguchi 2023/07/19

リンク

【Rails7】図解でTurbo Frames入門 - Qiita

はじめに後掲のテキストは、SPA風のCRUDアプリ作りを通して、無料でTurboを学ぶことができているめちゃくちゃありがたいテキストです。ただし、フロントエンドの知識がないと少々難しく、何が起きている？って状態でした。デベロッパツールで通信の様子を確認すると理解が進んだため、図も併用しながらその様子を解説していきます。対象読者 Turboについて興味がある方 Railsチュートリアル完走後、フロントエンド開発に興味がある方動作環境 Ruby - 3.1.0 Rails - 7.0.2.3 Google Chrome - 113.0.5672.63 上記テキストのチュートリアル1が終わったタイミングから解説します。︵お急ぎでcloneしたい方はこちら︶ ``` $ git clone <https://github.com/shita1112/cat-hotwire-demo>

miguchi 2023/07/19

リンク

[有料級]　Rails7(Turbo), Docker, Bootstrap5を使ったtodoリストの作り方第2章-1(モーダル画面作成編) - Qiita

[有料級]　Rails7(Turbo), Docker, Bootstrap5を使ったtodoリストの作り方第2章-1(モーダル画面作成編)Rails DockerTurbobootstrap5RubyonRails7.0 前回のあらすじここまでみていただきありがとうございます！前回まででTodoリストの作成が終わりました！ [有料級]　Rails7(Turbo), Docker, Bootstrap5を使ったtodoリストの作り方第1章-5(Todoリスト削除編) 今回からはTurboを使ってさらにTodoリストを見やすくしたいと思います。事前準備 Dockerを一度止めている方はこちらのコマンドでDockerを起動し、コンテナに入りましょう。

miguchi 2023/07/19

リンク

Turbo Streams: How They Work and Differ From Turbo Frames

Turbo Streams: How They Work and Differ From Turbo Frames No, you don’t need WebSockets to use Turbo Streams. You can simply use them to deliver multiple page updates with a single HTML response. This article teaches the basics of Turbo Streams to build a SPA without writing a single line of JavaScript. No Rails needed, either! In the last article, we learned how a static website can behave like a

miguchi 2023/05/16

リンク

猫でもわかるHotwire入門 Turbo編

この本ではHotwireの基本的な使い方について解説します。 Rails7からフロントエンドのデフォルトにHotwireが採用されたのですが、まだあんまり日本語の情報が無かったので本にまとめました。Turboをメインに扱っていますが、Stimulusも扱っています。 Hotwireの最初の1冊として読んでいただけますと幸いです🙇‍♂️

miguchi 2023/05/05

リンク

Turbo ソースコードの実体を確かめる｜万葉

こんにちは、万葉でエンジニアをしている吉原です。この記事では、Hotwire の中核である Turbo がブラウザで動作するために、ソースコードがどのように届けられているか、どこに配置されているかを探求していきたいと思います。 Rails7ではデフォルトで Turbo を使用することができます。あまりに簡単に利用できるので、私はどのようにコードが実行されているかがわからず、魔法のように感じていました。こういった便利な機能は、フロントエンドの知識や関心が薄いエンジニアにとってはブラックボックスになってしまいがちだと思います。しかし、ブラックボックスとして利用しているだけでは、いざという時に問題解決ができなかったり、他のフレームワークとの組み合わせなど Rails を離れての利用ができなかったりと、歯がゆい部分があるのではないでしょうか。そこで、これから Turbo のソースコードが

miguchi 2023/03/28

リンク

Turbo Handbook

Introduction Turbo bundles several techniques for creating fast, modern, progressively enhanced web applications without using much JavaScript. It offers a simpler alternative to the prevailing client-side frameworks which put all the logic in the front-end and confine the server side of your app to being little more than a JSON API. With Turbo, you let the server deliver HTML directly, which mean

miguchi 2023/02/26

リンク

【Hotwire】HTMLだけで分かる Turbo 🚜 - Qiita

はじめに Rails7のリリースで、Hotwireに注目が集まっています。どうしてもRailsとペアで語られがちなHotwireですが﹁HTMLさえあれば動く﹂のが重要なポイントです。︵つまり LaravelやExpressなどあらゆるWebフレームワークと共存できます！︶そこで今回は、HTMLのみでHotwireの世界観を体験できるような内容で以下にまとめたいと思います。触れること Hotwireの構成モジュールの一つである﹁Turbo﹂その中でも﹁Turbo-Frame﹂ごく基礎的なことのみこんな感じのがHTMLの記述だけで作成できます触れないこと Stimulus Strada その他あらゆる発展的内容 HTMLファイルの準備以下の2ページを用意します。 - index.html - foo.html まずは、HTMLファイルを準備します。 index.html ポイント

miguchi 2023/02/22

リンク

Railsの現在地 / Rails以外からTurbo(Hotwire)を使う｜kiha

Railsの現在地DHHらは、ビジネスモデルが確定していないレベルの初期のスタートアップにおいて、複雑なSPAでのページレンダリングを採用したWebシステムを構築することはオーバーエンジニアリングでは？というところに、強い課題意識を持っているように見える。フロントエンド、サーバサイド問わず複雑なアーキテクチャにしすぎると生産性悪くない？というわけだ。あのTwitter社ですら儲かるか儲からないかわからないレベルの黎明期にはその思想に賛同してかRailsを採用していた。近年DHHらは、RailsベースのGmailっぽいプロダクトをリリースしていて、新進気鋭のフレームワークであるHotwire(Turbo)を積んだRails7でGmailの﹁あの操作性﹂を実現できるレベルに進化させた。ReactやVue.jsなどのライブラリを使わずとも実現できることを示した。 Turboの概観Turbo

miguchi 2023/02/22

リンク

Hotwireのススメ ~React製SPAをフルSSRでStimulusとTurboに書き換えた話~

はじめに私はフリーランスのプログラマで、普段はwebサイト・webアプリを中心に開発を請け負っています。私のチームでは、CMSを利用した静的webサイトを制作する場合はNext.jsとvercelなどのPaasを推奨しており、webアプリの制作ではNode.jsまたはPHPでサーバー構築することが多いです。今回はその中の主にクライアントサイド︵フロントエンド︶とサーバーサイド︵バックエンド︶のSPAにまつわる争いを止める︵？︶内容です。例によって長いので、時間がない方はブラウザバックを。。。 Hotwireとはサーバーサイドの設定を不要とする、HTML主体のSPAライクな環境を構築するためのJavascriptセットです。 Railsプログラマには馴染み深いturbolinksを起源に持ち、そこに新しいライブラリを追加してリニューアルしたプロジェクトがHotwireとなりました。

miguchi 2022/03/31

リンク

はてなブックマーク

タグ

関連タグで絞り込む (7)

Hotwireに関するmiguchiのブックマーク (11)

お知らせ

今週のはてなブックマーク数ランキング（2024年7月第2週）

はてなブックマーク透明性レポート（2024年 2月-2024年4月）

今週のはてなブックマーク数ランキング（2024年7月第1週）

公式Twitter

キーボードショートカット一覧

はてなブックマーク

公式Twitter

はてなのサービス