Rails7 + ViewComponent + Hotwireでのコンポーネント指向なフロントエンド開発を試してみた
はじめに 本記事では環境構築について取り扱いません。 詳細につきましてはリポジトリを参照してください。 Railsのフロントエンド開発でつらいところ Railsでフロントエンド開発する場合に、よく使う部品はPartialなどで共通化しますよね？ 小規模であればPartialだけで十分なのですが、コードベースが成長したり、複雑なユースケースを満たすようになると以下のような課題が生まれてきます。 1. データフローを把握しづらい PartialはControllerで定義したインスタンス変数を参照できるため、以下のようにデータフローが複雑になりがちです。 Partialに値を受け渡すときにlocalsでの受け渡しを必須にすれば解消できますが、曖昧な方針でPartialを実装しているとカオスになります。 2. JavaScriptとViewの依存関係が曖昧で保守しづらい View単位でJavaS
「作りたいものをいかに早く完成させるかが正義」 まつもとゆきひろ氏が語る、ソフトウェア開発におけるベロシティの重要性
「作りたいものをいかに早く完成させるかが正義」 まつもとゆきひろ氏が語る、ソフトウェア開発におけるベロシティの重要性 #18 動的型付け言語と大規模開発 今回のテーマは「動的型付け言語と大規模開発 まつもとゆきひろ氏：こんにちは。まつもとゆきひろです。Matzチャンネル、18回目になりますね。今日は前回の続きで、「動的型付け言語と大規模開発」について話そうと思います。 本当は前回放送リリースした次の日ぐらいに放送できるようにと思っていたんですけど、意外と忙しくてですね（笑）。 今度、フィンランドのヘルシンキで、「Euruko」というカンファレンスが開かれるんですけれども、まだ物理で海外旅行する気にならないので、キーノートを録画しましょうという話になって、そのキーノートの準備をして、スライドを書いて、英語の講演を録画するみたいな作業をしていたら、あっという間に時間が経ってしまって、「Voic
個人的Rails開発環境構築2024
新規でRailsプロジェクトを始める時の個人的な環境構築についてまとめる。前提とする条件等は下記。 規模: ~中規模 開発者数: 個人 利用シーン: PoC作成・スタートアップ立ち上げ・並の業務アプリ開発等 基本戦略 利用シーン的に「思い立ったらすぐアプリの開発ができる」という感じの運用がしたい。極力セットアップで悩みたくないから必要なミドルウェアなどは全部Dockerでインストールできるようにして立ち上げれば終わり、の環境を作る。その環境の中で色々とコマンドを叩いたり、rails newやrails gなどでRailsアプリを作成していく。 この辺のRailsの初期セットアップの手間を出来るだけ省きたいのでtemplateとなるリポジトリを作成し、そこからcloneしてくるだけでOKにする。 フロントエンドはReactなどを使わずをRails標準のerbとHotwireを軸に開発する。開
Five big open source gifts from us
December 20, 2023 Five big open source gifts from us It’s been an incredibly productive year at 37signals. Perhaps our most productive one yet, in terms of total number of product improvements, new product developments, and open source extractions. But it’s only by looking back at the work from a distance that you can really appreciate it. So allow me to do that here. To appreciate the banner year
Rails: フルスタックRailsの未来（1）Turbo Morph Drive（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: The future of full-stack Rails: Turbo Morph Drive—Martian Chronicles, Evil Martians’ team blog 原文公開日: 2023/10/16 原著者: Vladimir Dementyev（首席バックエンドエンジニア）、Travis Turner（技術編集者） サイト: Evil Martians -- ニューヨークやロシアを中心に拠点を構えるRuby on Rails開発会社です。良質のブログ記事を多数公開し、多くのgemのスポンサーでもあります。 日本語ブログ: 合同会社イービルマーシャンズ - Qiita 日本語タイトルは内容に即したものにしました。 はじめに Web開発コミュニティの「フルスタック回帰」トレンドはますます勢いを増しています
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の各要素の紹介を記事として
The future of full-stack Rails: Turbo Morph Drive—Martian Chronicles, Evil Martians’ team blog
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
はじめに
Turboは 高速でモダンで、そして進歩的に改良されたWebアプリケーションを、JavaScriptをあまり使わずに作るためのいくつかの技術をまとめたものです。 Turboは流行のクライアントサイドフレームワークの代替手段を提供します。 流行のクライアントサイドフレームワークとは、全てのロジックをフロントエンドに置いて、あなたのアプリのサーバーサイドをJSON APIに毛が生えたようなものに制限してしまうものです。 Turbo を使えば、サーバーにHTMLを直接配布させることができます。それはつまり、すべてのロジック、例えばパーミッションをチェックしたり、ドメインモデルとやりとりしたり、その他アプリケーションのプログラミングに関わるあらゆることを、多かれ少なかれ、お好みのプログラミング言語に限定して書くことができるということです。 もう、JSONに分たれた両側（クライアントサイドとサーバー
Hotwire.io · Hotwire.io
The JavaScript Ecosystem for Server-rendered Web-Applications Hotwire is an alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire. Faster. Smarter. Breathe life into your server-rendered applications by progressively enhancing them into full SPA-like applications. Hotwire's JavaScript sprinkles add just the right touch
Rails 7 + Hotwireで実用的なSPAを作ってみた - Studyplus Engineering Blog
こんにちは、サーバーグループの市川です。モバイルクライアントグループに所属していましたが、バックエンドの開発を担当することが多くなったので、サーバーグループ異動にしました。 最近、Studyplusブックというサービスをリリースしました。Studyplusアプリ内で、200冊以上の参考書が読み放題で使えるサービスです。 このサービスの開発にあたって、社内向けの管理画面を新規に構築したのですが、Rails 7から標準でインストールされるHotwireを利用することにしました。 今回はHotwireを実際に利用する上で、どういったUIを作ればいいか試作しましたので、その話を書きます。 作った画面 書いたソースコード 使った技術 解説 Turboを理解する Turbo Frameでフレーム分割する 追加フォーム (Turbo Frame) 追加処理 (Turbo Stream) 編集フォームと更
Hotwire的な設計を追求して「Web紙芝居」に行き着いた話 by Yasuko Ohba (nay3) - Kaigi on Rails 2023
私は昨年3月以降、Rails7でHotwireを活用して複数のアプリケーションを開発してきました。Hotwireは、SPAのような動きをRailsだけで実現できる良い道具だと思っています。開発体制やコードをコンパクトに保てる利点があります。 ただ、SPAではなくHotwireでやろうと決めるためには、Hotwireでどこまでできるのか？ Hotwireでできないことはあるのか？ が気になってくる点でしょう。この点について、今では私は以下のように感じています。 やりたいことは大体なんでも Hotwire で実現できる 最終的に実現できる機能の差よりも、どういう考え方で作るかにSPAとHotwireの大きな違いがある SPAとHotwireでは、アプリを構成するための物の考え方が大きく異なります。Hotwireを縦横無尽に使い倒すためには、Hotwire的な考え方で作る必要があるのです。この、
Railsの現在地 / Rails以外からTurbo(Hotwire)を使う｜kiha
Railsの現在地DHHらは、ビジネスモデルが確定していないレベルの初期のスタートアップにおいて、複雑なSPAでのページレンダリングを採用したWebシステムを構築することはオーバーエンジニアリングでは？ というところに、強い課題意識を持っているように見える。フロントエンド、サーバサイド問わず複雑なアーキテクチャにしすぎると生産性悪くない？というわけだ。あのTwitter社ですら儲かるか儲からないかわからないレベルの黎明期にはその思想に賛同してかRailsを採用していた。 近年DHHらは、RailsベースのGmailっぽいプロダクトをリリースしていて、新進気鋭のフレームワークであるHotwire(Turbo)を積んだRails 7でGmailの「あの操作性」を実現できるレベルに進化させた。ReactやVue.jsなどのライブラリを使わずとも実現できることを示した。 Turboの概観Turbo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - kuroweb/viewcomponent-hotwire-tailwindcss: Hotwire + ViewComponent + TailwindCSS の組み合わせにより、/componentsでコンポーネント指向な実装を目指す
GitHub - josefarias/hotwire_combobox: An accessible autocomplete for Ruby on Rails.
</> htmx ~ Hotwire / Turbo ➡️ htmx Migration Guide
Hotwireとは？｜猫でもわかるHotwire入門 Turbo編
Hotwire的な設計を追求して「Web紙芝居」に行き着いた話
GitHub - yamataka22/kaigionrails2023-admin-modal: Kaigi on Rails 2023 Day2「Hotwireを使って管理画面を簡単にプチSPA化する」のサンプルコード
GitHub - hotwired/turbo-site: turbo.hotwired.dev web site
GitHub - lazaronixon/strada-rails: Use Strada in your Ruby on Rails app