妄想的DHH理解 - Qiita
Caution この記事はDHHファンの妄想によるシナリオが多分に含まれます。 というかほとんどです。 成り立ちが間違ってることも当然あるように思うので話半分で読んでください。 これは一体 最近のRailsフロントエンドやDHHの活動には一連の流れがあるわけですが、一部トレンドに沿ってない部分がある故にそれが汲めないというところがあるのではと思います。 それらの流れを記憶が定かなうちにつないで記録しておこうという記事です。 前提知識 Railsの生みの親、Rubyist Basecamp(社) DHHがCTOやってる会社 Basecamp(サービス) Basecamp(社)が開発してるプロジェクト管理ツール Trixを開発してたある日 Basecamp(サービス)に組み込まれてるリッチテキストエディタのtrixをcustomElements使って開発してたある日、DHHはあることに気づく。
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の各要素の紹介を記事として
HTML Over The Wire | Hotwire
Hotwire is an alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire. This makes for fast first-load pages, keeps template rendering on the server, and allows for a simpler, more productive development experience in any programming language, without sacrificing any of the speed or responsiveness associated with a traditi
Ruby言語によるWebアプリケーションフレームワークの最新版となる「Rails 7」が正式リリースされました。 Rails 7.0 FINAL: The fulfillment of a vision to present a truly full-stack approach to web development that tackles both the front- and back-end challenges with equal vigor. https://t.co/WxJ0nKYfE7 — Ruby on Rails (@rails) December 15, 2021 Rails 7の最大の変更点は、フロントエンド開発環境が刷新されてNode.jsを用いない構成がデフォルトとなったことでしょう。 Rails 6では、優れたフロントエンド開発環境を実現するためにトランスパ
2022年のRailsの開発現場事情について語ろう！ Qiita Night https://increments.connpass.com/event/241385/
ここ数年で、「デザインシステム」はウェブ開発やデザインのコミュニティでとても人気の話題になりました。そして「コンポーネント」として定義される一連のデザイン成果物を開発・メンテナンスするために、StyleguidistやStorybookといったツールが多くのプロジェクトで一般的に使われています。このプロセスはデザインシステムという概念の一部として、コンポーネント駆動開発（Component Driven Development）と定義することができるでしょう。 さて、コンポーネント駆動開発にまつわる資料のほとんどは、ReactやVue、Angularといった、フロントエンドのビューのためのメジャーなライブラリを利用することについてのものです。しかしもっとトラディショナルな技術スタックの場合はどうすればいいでしょう？ 例えば私たちスタンダードデザインユニットでは、静的なHTMLとCSSのアセ
LIFULLの中島です。 近頃、LIFULL HOME'Sのフロントエンド(ここではJavaScriptのみを焦点とします)もようやく進む道を見出し、そろそろ設計方針を一新しようと試みています。 今回はそれについて話したいと思います。 現在の私たちの課題感 私たちの管理する多くのレガシーコードはDOM操作ライブラリとしてjQueryを、UI設計の格子としてBackbone.Viewのような設計方式を導入しています。 (もちろんそうでないマイクロサービスも多くありますが) 具体的なコード例を示すことこんな感じになります let Slider = Backbone.View({ events: { '.next click': 'next', '.prev click': 'prev' }, next() { this.$(...).css({left: '111px'}); }, ... }
はじめに 私はフリーランスのプログラマで、普段はwebサイト・webアプリを中心に開発を請け負っています。 私のチームでは、CMSを利用した静的webサイトを制作する場合はNext.jsとvercelなどのPaasを推奨しており、webアプリの制作ではNode.jsまたはPHPでサーバー構築することが多いです。 今回はその中の主にクライアントサイド（フロントエンド）とサーバーサイド（バックエンド）のSPAにまつわる争いを止める（？）内容です。 例によって長いので、時間がない方はブラウザバックを。。。 Hotwireとは サーバーサイドの設定を不要とする、HTML主体のSPAライクな環境を構築するためのJavascriptセットです。 Railsプログラマには馴染み深いturbolinksを起源に持ち、そこに新しいライブラリを追加してリニューアルしたプロジェクトがHotwireとなりました。
※この記事は、2022 Speee Advent Calendar11日目の記事です。 昨日の記事はこちら tech.speee.jp こんにちは、DX事業本部エンジニアのさとーる（@satotoru2000）です。 私は今年の6月から「イエウール」というプロダクトのSEOコンテンツ開発チームで開発をしています。今回はその中でやったことをまとめながら、 モノリシックRailsアプリの一部のドメイン領域を担当する状況下で、自信をもって変更できる領域をどうやって広げたか？ という話をしようと思います。 当初のイエウールの課題 イエウールは、アーキテクチャ的にはいわゆる一般的なモノリシックRailsアプリです。下の図のように、一つのRailsアプリケーションにほぼ全ての必要な機能が乗っているような状態です。 イエウールcoreに乗っているものたち また、サービスとしてもそれなりに歴史があるプロダ
昨今のフロントエンドトレンドを鑑みてフロントエンドの技術構成を考えると今はどんな選択肢が主流でしょう？ それぞれ並列なものではないですが、React? Vue? Next? Nuxt?そんなワードがきっと頭に浮かぶでしょう。 今の時代、jQueryでゴリゴリUIを記述するとなんだか白い目でみられる。 そう、令和とはそういう時代です。 界隈の最先端おじさんをみると、build processがあるのは当然で、HTML/CSSはjsが吐き出すもので、それが最大限正しいように語られています。 確かにExising Domのアプローチで界隈から評価されてるライブラリはなく、さほどいい選択肢には見えません。(個人の主観) ではそれらのアプローチの何がそんなにいいんでしょう？ 過去から現在まで我々は何に苦心して、それらはそれをどう解決してくれたのでしょう？ 雑に紐解いていきましょう。(今回はUI構築の
プロダクトエンジニアリング部の海老澤です。 普段は LIFULL HOME'S の賃貸部門のフロントエンド開発をしています。 近年、LIFULL の開発部門では「開発生産性」という言葉が取り沙汰されるようになりました。 LIFULL HOME'Sの主要リポジトリは10年以上運用され続け、今も多くの開発者によって日々改修され続けています。 長い年月の中で小さな設計ミスも積み重なって大きくなり、ちょっとした実装でも入念な調査が必要となり開発生産低下の要因となっていました。 また10年以上前に採用したフレームワークで稼働しているため、今ではドキュメントを探すのも一苦労という具合です。 そこで主要開発部門では「自部門の機能はマイクロサービスへと切り離し、各々で面倒を見る」という方針になりました。 賃貸部門も同様に機能の切り離しを始め、先日「物件詳細ページ」のマイクロサービス化を行いました。 今回は
Stimulus、悪くない
Stimulus: A modest JavaScript framework for the HTML you already have. 2020年末にリリースされた Stimulus 2.0 を試して気づいたことをメモしておく。Stimulus は Rails で有名な Basecamp のメンバーによって開発された生 DOM をベースに、できるだけ template に JS を書かずに動的な DOM の生成、変更を実現するためのライブラリである。 昨今流行りの React, Vue, Angular などの VirtualDOM 系のツールとは根本的に考え方が異なり、今からこれを採用するのはやや申し訳ないというか、正直に言うとよいイメージはなかったし、例えばフロントエンドエンジニアとしてスキルアップしたいぜーという人には合わないと思うが、ただ、どうせサーバサイドの開発が必要で、分
@sugamasaoさんと共著でRails本を執筆しました。Railsを始めたばかりの人向けの特集から、Rails 6の新機能紹介まで幅広く書かれたムック本です。今日から9日後の10月26日に発売予定です(電子書籍も同じくらいに発売されるはず)。 Ruby on Rails 6 エンジニア 養成読本posted with amazlet at 19.10.16すがわら まさのり 前島 真一 技術評論社 売り上げランキング: 2,448 Amazon.co.jpで詳細を見る @sugamasaoさんの書籍紹介エントリはこちら sugamasao.hatenablog.com 内容紹介 @sugamasaoさんが目次や対象読者を紹介しているので、こちらでは具体的にどんな内容を扱っているかを箇条書きにしておきます。Railsの新機能を追いかけていない人にとっては、なにこれ？となったり、名前は知っ
React is Dead. Long live Reactive Rails! Long live StimulusReflex and ViewComponent!
Let me tell you about the feeling that I get when I encounter something poised to revolutionize my work as a software developer. A specific, tangible physical sensation in my bones; a tingle in my skin and a buzz in my fingertips. Like having done a…
GitHub - blackcandy-org/blackcandy: A self hosted music streaming server
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Home
News Check out my new Patron community, The Hotwire Club Better StimulusJS An Opinionated Collection of StimulusJS Best Practices StimulusJS, the modest JavaScript framework by Basecamp is gaining widespread traction. It powers Basecamp and HEY, among others, and is a natural choice for Rails developers. That said, it fits any codebase that embraces server-side generated HTML and lightweight JS sp
はじめにこんちには。万葉でエンジニアをしている koheitakahashi です。 この記事では、既存のサービスに Hotwire を部分的に導入した際に得られた知見として、どのような問題に直面したかということと、その対応策をご紹介します。 Hotwire の導入を検討している方にとって、この記事が導入の判断材料になれば幸いです。 導入したサービスの概要今回は、弊社が参画しているローカルワークス様のリフォマ というサービスに Hotwire を導入しました。 リフォマは、住まいの「困った！」を解決するマッチングサービスです。2016年から稼働しています。詳しくは、ローカルワークス様の以下の記事を御覧ください。 建設業界の「信頼性」を可視化する！ リフォームのマッチングプラットフォーム「リフォマ」についてご紹介 主な技術スタックは以下の通りです（2022年11月現在）。 Ruby 3.1.
半年くらい前にこんな記事を書きました。 様々なプロダクトにメインとして使用しているNext.js製のフロントエンドをStimulusとTurboに書き換えて運用してみました。 今回は実際に運用してみた所管などをまとめたいと思います。 はじめに とはいえ、Hotwireたちは飽くまでフロントエンドのみ。バックエンド側のロジックを持つことのできないこれらのライブラリとの単純な比較対象としては、サーバーレスでも運用できるNext.jsとは若干ズレが出てきます。 今回私はNode.js製のバックエンドサーバーの上にNext.jsが乗っかていたもののフロントエンドの部分を、従来型のpugのマークアップとHotwireに置換し運用しました。 ですので、今回はNext.jsではなくReactとの比較を行っていきます。 ここは一つご留意ください。 ちなみにVercelなどのPaasなどでHotwireを使
QA経験のないエンジニアリング マネージャーがQAのカジュアル面談に出て 苦労していること・気づいたこと / scrum fest niigata 2024
StimulusReflexBuild reactive applications with the Rails tooling you already know and love
iCARE Developer Meetupは、月次で開催している株式会社iCAREが主催するエンジニア向けのLT勉強会です。18回目の今回は、Ruby on Railsをテーマに行いました。株式会社iCAREの技術顧問willnet 氏がHotwireについて話しました。後半はTurbo Streams、Turbo Frames、Stimulusについて。前半はこちらから。 HTMLをいい感じに解釈してくれるTurbo Streams 前島真一氏：Turbo Streamsとは何かと言うと、下の図のようなHTML片をサーバーサイドからTurbo StreamsのContent-Typeで返してあげると、TurboがこのHTMLの内容を見て、いい感じに解釈して処理をしてくれるというものです。 いい感じに解釈するというのはどういうことかこのturbo-streamタグを使って説明しますね。t
Stimulus 3
The third major release of Stimulus represents a big milestone for the Hotwire community. This is the first release where every substantial new feature came as a contribution from outside of Basecamp and HEY. We've got a new package, action parameters, default values, target lifecycle callbacks, debug mode, utility-CSS support, and Controller.shouldLoad. Let's dig into what's new! New Package Firs
「JavaScript sprinkles in Basecamp turned Stimulus」より。Stimulusの設計意図を理解できる貴重な資料なのでまとめた。 DHHにとってプログレッシブエンハンスメントとは、コンテンツのプログレッシブ性を実現するためというよりは、アプリケーション開発のための道標のようなもの。ベースとしてのHTMLはまずサーバーに生成させて、動的部分としての少しの差分をJavaScriptに扱わせる。BasecampやGitHubのように動的部分の少ないアプリケーションにとってはそれが適切なやり方。React/ReduxやAngular、そのほかクライアントサイドのMVCフレームワーク等を試してきたが、それによってプロダクトのコードが良くなることはなかった。 BasecampにあるJavaScriptを調査して、どのような慣習があるか、それを踏まえてどのような
Stimulus Components Stimulus Components is an open-source set of StimulusJS controllers to solve common patterns. Stimulus JS is a modest yet powerful JavaScript framework that augments your HTML with just enough behavior to make it shine. We all share common behaviors between our applications and no one want to reinvent the wheel. That is why the Stimulus Components library exists. To bring you g
Rails 7: importmap-railsとjsbundling-railsでのStimulusの扱いの違い｜TechRacho by BPS株式会社
2022.03.04 Rails 7: importmap-railsとjsbundling-railsでのStimulusの扱いの違い Rails 7でStimulusを書き始めています。Rails 7でimportmap-railsを使うかjsbundling-railsを使うかでStimulusのセットアップが少し違うことに今頃気づいたので、小ネタですがメモします。 ローカルのStimulusコントローラファイル ここでは、ローカルのapp/javascripts/controllers/以下のStimulusコントローラファイルの扱いについて書きます。 1. importmap-railsの場合 importmap-railsを使う場合は、app/javascripts/controllers/index.jsが以下のようにeagerLoadControllersFrom()を呼び
Stimulus、悪くない
Stimulus: A modest JavaScript framework for the HTML you already have. 2020年末にリリースされた Stimulus 2.0 を試して気づいたことをメモしておく。Stimulus は Rails で有名な Basecamp のメンバーによって開発された生 DOM をベースに、できるだけ template に JS を書かずに動的な DOM の生成、変更を実現するためのライブラリである。 昨今流行りの React, Vue, Angular などの VirtualDOM 系のツールとは根本的に考え方が異なり、今からこれを採用するのはやや申し訳ないというか、正直に言うとよいイメージはなかったし、例えばフロントエンドエンジニアとしてスキルアップしたいぜーという人には合わないと思うが、ただ、どうせサーバサイドの開発が必要で、分
Announcing Stimulus 2.0
Today we’re very excited to announce the release of Stimulus 2.0. This version introduces two new APIs, values and CSS classes, which replace the data map API from Stimulus 1.0. You can read more about these APIs in the reference documentation: https://stimulusjs.org/reference/values https://stimulusjs.org/reference/css-classes We’ve also updated the Handbook to cover the changes in 2.0. Here’s th
Stimulus 2.0 を試してみた
はじめに 2020/12/5 に Stimulus 2.0 がリリースされました 🎉 Stimulus 2.0 リリースノート 以前 Rails アプリで JavaScript を書くときに少しだけ使ったことがあり便利だったので、2.0 も試してみました。 前提 $ ruby -v ruby 3.0.0p0 (2020-12-25 revision 95aff21468) [x86_64-darwin19] $ bin/rails -v Rails 6.1.1 今回はテキストエリアの文字数をカウントする処理を Stimulus で実装してみようと思います。 Rails Girls アプリ・チュートリアル でつくるアイデア投稿アプリをベースにして、アイデアの Description 項目に処理を入れていきます。 参考: How to use Stimulus JS 2.0's new Va
We write a lot of JavaScript at Basecamp, but we don’t use it to create “JavaScript applications” in the contemporary sense. All our applications have server-side rendered HTML at their core, then add sprinkles of JavaScript to make them sparkle. - DHH In early 2018, Basecamp released StimulusJS into the world. Stimulus closed the loop on the “Basecamp-style” of building Rails applications. It’s h
GitHub - stimulusreflex/stimulus_reflex: Build reactive applications with the Rails tooling you already know and love.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
StimulusReflex の Setup～Quick Start をやってみる｜TechRacho by BPS株式会社
こんにちは ebi です。 先日、Hotwire のリリースがありましたが、 Hotwire 以前から存在する Rails ベースで SPA 風のサイトを実現するのに適した StimulusReflex について、公式サイトの導入などの触りをやってみたので記録として残しておきます。 まだ全容が分かってないなりにメモがてら色々書いているため、誤った表現、コメントが含まれるであろう旨は予めご容赦ください。 はじめに Stimulus は Ruby on Rails の生みの親である DHH 氏でお馴染みの Basecamp 社製の JavaScript フレームワークで、後述する StimulusReflex のベースになっていることもあって Rails ウォッチなどでも度々取り上げられています。 Stimulus は React などのように、ページやパーツ全体の DOM 構造を JS 内で
Rails: TurboだけでStimulusやJSを書かずに無限オートスクロールする（翻訳）｜TechRacho by BPS株式会社
概要 元サイトの許諾を得て翻訳・公開いたします。 英語記事: Infinite Auto Scroll using Turbo only ( No Stimulus / No Javascript ) | Saeloun Blog 原文公開日: 2022/08/10 原著者: Manmeet Singh サイト: Saeloun Blog 本記事では、Rails 7アプリケーションを作成して無限オートスクロールを実装します。この機能はHotwireのTurboだけで実現されており、JavaScriptコードは1行も書く必要がありません。 このアプリはデフォルトで10件の投稿を表示します。ページ末尾に到達すると、投稿がなくなるまで10件ずつ投稿を追加表示します。 Rails 7アプリケーションを作成する 最初にRails 7アプリケーションを作成します。 rails _7.0.3_ new
執筆時点で昨夕Stimulus v3.2.2がリリースされました。 パッチバージョンではありますが、内容がパッチバージョンとは言えないものが多いので一応拾っておこうと思います。 機能の追加・変更 keyboard event filterにPageUp/PageDownが追加された Stimulusにはもともとキーボードイベントのフィルタリング機構があります。 下記のようにアクション記述のイベント名を書くところのキーボードイベント(keydown,keyup,keypress)にドットで続けてキー名を書けば、対象のキーが押された時だけ実行されるアクションとして定義することができる機能です。 そこにPageUp、PageDownのキーをデフォルトで指定できるようになりました 構文中ではpage_up, page_downという名前で指定するようです。 キーボード操作を実現する際、PageUp
Stimulusの習作: Rails.fireのかわりにRails.ajaxまたはfetchで送信｜usutani
内容Stimulusの習作: ドラッグ・アンド・ドロップ（クライアント側） Stimulusの習作: ドラッグ・アンド・ドロップ（サーバ側） 上記では隠しフォームとRails.fireを用いてBook ID群をクライアントからサーバへ送信しました。今回はつくりを変更してRails.ajaxまたはFetch APIを用いて送信したいと思います。 参照CSRF保護 2020/04/19 Rails セキュリティガイド - Railsガイド 2017/10/23 RailsのCSRF保護を詳しく調べてみた（翻訳）｜TechRacho（テックラッチョ）〜エンジニアの「？」を「！」に〜｜BPS株式会社 Rails.ajax 2019/10/18 ajax · rails-jquery-ujs Wiki 2020/04/19 rails-ajax.coffee at v6.0.2.2 · rails-
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Rails 7.0正式リリース、Node.js不要のフロントエンド開発環境がデフォルトに
Hotwire を 本番環境で使ってみた感想
静的なHTMLのためのコンポーネント駆動開発―その導入を振り返って
HTML Centricで行きたい私たち - LIFULL Creators Blog
Hotwireのススメ ~React製SPAをフルSSRでStimulusとTurboに書き換えた話~
混沌としたモノリシックRailsを手懐けるためにやったこと - Speee DEVELOPER BLOG
第三の答え、Stimulusjs - Qiita
LIFULL HOME'S 賃貸物件詳細ページの基盤刷新について - LIFULL Creators Blog
Ruby on Rails 6 エンジニア 養成読本という本を書きました - おもしろwebサービス開発日記
既存サービスに Hotwire を部分導入して得られた知見｜万葉
React vs Hotwire ~ 私とHotwireとその後
Just Tried Stimulus
StimulusReflex | StimulusReflex
まるでフロントエンドの“Rails” Hotwireを使ってJavaScriptの量を最低限に
「JavaScript sprinkles in Basecamp turned Stimulus」の雑要約
Stimulus Components
Writing better StimulusJS controllers
Stimulus v3.2.2で追加された機能・変更された振る舞い - Qiita