君たちはReactをどうやってRuby on Railsに載せるべきか？
下記の記事の内容をRuby Gemにしました！ react_router_rails_spa gem. 以下のコマンドを実行するだけで、Modern SPAをRuby on Railsに載せることができます。 # Railsのインストール rails new test_app cd test_app # gemのインストール bundle add react_router_rails_spa bundle install bin/rails generate react_router_rails_spa:install # サーバ立ち上げ bin/rails s bin/rails react_router:dev はじめに こんにちは！Ruby on Railsフロントエンドエンジニアを目指し、Hotwireを中心に活動しつつ、Next.jsもReactも勉強している加々美です！ 202
Hotwire for Frontend devs
フィードバックがないページの例 # 下記のビデオは2024年8月に記録したNewsPicks社のウェブサイトです。Next.jsのSSRとGraphQLを使って作成されているようです。しかしUX上の大きな問題があります。 下記ビデオをご覧になっていただくとわかりますが、ボタンをクリックしても全くフィードバックがなく、1秒後ぐらいにやっと画面が切り替わります。ユーザは自分がちゃんとクリックしたかどうかに自信が持てず、不安になります。またサイト全体がモッサリしている感覚があります。 これは決してNewsPicks社だけが悪いわけではなく、AJAX/fetchによる非同期通信を使ってウェブページを更新するすべてのサイトに共通する課題です。強いていうと、Next.jsが解決策を提供していなかったのが原因と言えると思います。 同じことはTurbo FramesやTurbo Streamsを使っている
Rails 7のHotwireを簡単に理解する
GMOアドマーケティングの吉岡です。 今回の記事ではRails 7で追加されたHotwireという技術について、何が良いのか？どんなことができるのか？を話したいと思います。 Hotwireとは？ 大量のJavaScriptを使わずに、モダンなWebアプリケーションを作るためのアプローチ JSONではなくHTMLベース サーバーサイドでHTMLを生成し、WebSocketでWebブラウザへ送信 構成する主な要素 Turbo Stimulus Hotwireを使うと何が良いのか？ Rails6以前の環境 最新バージョンのjs(ES6)を使いたい →主要なブラウザが対応していないため、ブラウザで動作するES5にトランスパイルする必要がある そのために必要なパッケージとその役割 node.js ES6のjsをサーバー側で解釈するために必要 ES6のjsをES5にトランスパイルするため、node.j
Rails: HotwireとSPAを比較するなら実装コストの違いに注意（翻訳）｜TechRacho by BPS株式会社
概要 原著者の許諾を得て翻訳・公開いたします。 英語記事: The popover drama 原文公開日: 2024/06/02 原著者: Jorge Manrubia 日本語タイトルは内容に即したものにしました。 インターネット接続が遅い環境でHEYカレンダーのポップオーバーの読み込みが遅くなる様子が以下でツイートされたことがきっかけで、ポップオーバーのドラマが幕を開けました。その後、無慈悲で辛辣な書き込みやプロの荒らしの出現など、最もSNSらしい形で議論がヒートアップしました。 If you want to know why an app *needs* JavaScript on the client and can’t just do it all on the server, just look at Hey or any other Hotwrite app pic.twit
Remove TypeScript - laiso
経緯 world.hey.com DHHが「オタクくん見てる〜？ 今からうちのレポジトリからTypeScriptを剥しま〜す」と宣言したことにより、Web開発者界隈でTypeScriptの是非自体の話になり騒ぎになった*1*2。 github.com その後、野次馬がたくさん集ってきてrevertプルリクエストを立てる人やTypeScript公式リポジトリから全ソースコードを消すプルリクエストを出す*3ようなキッズムーブをする人も出てきた world.hey.com 実際の変更 8617行のTypeScriptがJavaScript化された。(Sloc 便利) ❯ scc src/ ─────────────────────────────────────────────────────────────────────────────── Language Files Lines Blan
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ChatGPT - SPA 複雑さの懸念
