Snappy server-rendered web app with Rails/Webpack/React/Flux
April 2015 Rails Development There are two main tradeoff options web application developers have to think about today: Interactivity For most web applications in 2015 that have a non-trivial amount of interactivity, client-side rendering and routing becomes inevitable. While solutions like Turbolinks/pjax can work well for some (and are always preferable in those cases), many web applications exce
Webpacker is installed 🎉 🍰 - 弥生開発者ブログ
こんにちは、@mugi_uno です。 庭に花壇を作ったところ変に日焼けをしてしまい、半袖で外に出るのが恥ずかしいです。 つい最近、Misocaのフロントエンド周りのビルドをWebpackerを利用したものに置き換えました。 様々な知見が得られたので書いてみたいと思います。 Webpacker? フロントエンド用のビルドツールであるwebpackをRailsから簡単に使えるようにするためのRubyGemsです。 github.com Rails5.1からはこのWebpacker経由で、rails new の際に同時にwebpack用の設定ファイルを生成することもできます。 流行りのフロントエンド環境を構築しようとする際、最近ではwebpackを利用するケースが多いですが、実際にはES6やReactなどが混ざることも多く、慣れていないと設定するだけでもなかなか敷居が高いです。 さらに、Rai
roppongi.rb #3 "Rails x Frontend-Tech" まとめ - Speee DEVELOPER BLOG
Speee技術顧問の id:gfx です。 2017/05/31 に Roppongi.rb #3 開催のためSpeee Loungeを提供いたしました。私も「RailsエンジニアがReactを始めてSSRとReduxを導入するまで」と題した発表をしましたが、普段使っているReactベースの環境とはまたったく別のAngualrやRiotなどの話を聞けましたし、大変すばらしい勉強会だったと思います。 Roppongi.rb #3 “Rails x Frontend-Tech” - connpass Roppongi.rb #3 “Rails x Frontend-Tech” Tweetまとめ #roppongirb - Togetterまとめ Roppongi.rb #3をSpeee Loungeでやってます！#roppongirb #speee_lounge pic.twitter.com
Railsフロントエンド技術の今とこれから
待望されたYarnサポートの入ったRails5.1が2017年4月にリリースされました。 Ruby on Rails 5.1 Release Notes — Ruby on Rails Guides 他にもjQueryがデフォルトdependencyから外されたり、Optionalでwebpackサポートが入ったりしており、Railsのフロントエンドは大きな転換点を迎えたと言ってよいでしょう。本エントリではRailsのフロントエンド技術の今を振り返り、今後どうなっていくかをまとめてみたいと思います。 DisられてきたRailsフロントエンド Railsのフロントエンド技術スタックは、フロントエンドを専業とするエンジニアにDisられるものでした。具体的には下記の技術要素です。 jQueryCoffeeScriptAssets Pipeline (sprockets)gemのエコシステムに乗っ
Rails5.1から導入されるwebpacker.gemは本当にRailsのフロントエンド開発に福音をもたらすのか? - Qiita
Rails5.1が今betaで出ていますね。中でも目玉はwebpacker.gemによるモダンなフロントエンド開発がRailsに導入されることでしょう。 今までのRailsのasset pipelineとは別に、yarnによって依存性を管理しwebpackで結合する独立したjsのビルドシステムがサポートされます。 これによって、以下のような従来のasset pipelineでは解決がむずかしかった問題への解が示されました。 coffee scriptへの依存 npmによる依存性、バージョン管理が難しい javascriptのライブラリが野良gem化されてupdateされない問題 webpacker.gemはyarn/webpackの薄いwrapperとなっていて、加えて幾つかのrakeタスクを追加することでフロントエンド開発をサポートします。 具体的には以下のような機能が提供されます。 y
Railsが5.1になることでフロントエンドの開発が本当に楽しくなりました - チラシ裏日記上等！！新館
Ruby on Rails の 5.1.0.beta1がリリースされましたね！ weblog.rubyonrails.org 仕事でRailsを使うものとしてちゃんと触っておかねばと思い、まずは自分の好きなJavaScript周りがどれぐらい良くなったのか見てみたところかなりびっくりしました。JavaScriptすごく開発しやすいです。 webpack があって yarn がありますし、ReactやVue、angular まで rake タスクでセットアップできます。ちょっと前までRailsでJavaScriptやるのが辛いなんて言っていたのが嘘みたいです・・・。 今回はRails 5.1.0 で Vue.js を使って新しくプロジェクトを作るところまでやってみました。 rails new rails webpacker:install:vue Webpackでのビルド Hot Modul
jQueryでは、クロスドメインなAjaxを行った際にはリクエストヘッダにX-Requested-Withが付かないようだ。 - Sooey
jQueryでは、クロスドメインなAjaxを行った際にはリクエストヘッダにX-Requested-Withが付かないようだ。 Cross-Domain AJAX doesn't send X-Requested-With header - Stack Overflow サーバー側のRailsで if request.xhr? といった条件で判定しているような場合に条件が真にならずにはまるので、そのようなケースでは以下を参考に CORS in Rails 4 APIs サーバー側がOPTIONSメソッドによるpreflightリクエストに応答できるようにした上で、jQueryのAjaxリクエスト時のsettingsに headers: {'X-Requested-With': 'XMLHttpRequest'} を含めるようにする必要がある。
Rails5.1に向けてフロントエンド周りで起こっている革命まとめ - Qiita
こんにちは Rails5.1に向けて、DHHのjqueryを依存から外す発言を発端にフロントエンド周りが急激に発展しているので、簡単にですがまとめてみました。 各issue, PRの詳細には踏み込みませんが、知見に溢れているので読んでみるの推奨です。 間違い、足りないものがあったら編集リクエストお願いします。 jQuery依存を無くす話が出る rails(issue): Drop jQuery as a dependency jquery-ujsはjqueryに依存しないようにする jquery-ujs: Drop jQuery as a dependency "jquery"-ujsじゃなくなったので名前変更 rails-ujs誕生 実際にRailsからjquery依存がなくなる rails: Drop jQuery as a dependency jsライブラリを入れる方法がnpmパッ
新規Railsアプリに小さく導入するReact - Speaker Deck
dotsで開催されたReactの導入を検討されてる方向けの勉強会でお話しました https://eventdots.jp/event/597088
webpackを使った Rails上でのReact開発 - クックパッド開発者ブログ
はじめに こんにちは、投稿開発部エンジニアの芳賀です。 既存のRailsプロジェクトの中でReact.jsを利用する機会があったので、その時にやったことについてまとめてみます。 私自身は普段RailsのサーバサイドとCoffeeScriptが中心で、最近のJavaScript開発環境についてあまりキャッチアップできていなかったのですが、それらの状況を把握しつつ試行錯誤で開発していった経験から、できるだけ「React採用してみたいけどJavaScript界隈よくわからない目線」で書いてみようと思います。 RailsでReact.jsを使ういくつかの方法 2016年時点で、RailsでReact.jsを使う方法はいくつかあって、どれを採用するかで悩みました。 vendor/assets/javascripts にreact.jsを置いて利用する react-rails gem を利用する br
5年間開発しているRailsプロジェクトにReact + Reduxを導入した話 by Shimpei Takamatsu | Wantedly, Inc.
こんにちは、WantedlyのWebエンジニアの高松です。 このエンジニアブログでも何度かReact関連の話題が出ていますが、WantedlyではReact + Reduxを中心としたWebフロントエンドの技術スタックを導入して開発しています。 今回はスタックの導入方法や勘所について、詳しく解説してみたいと思います。特に既存のRails環境にReactなどの導入を検討していらっしゃる方の参考になれば、と思います。 今回の内容は以前発表した以下のスライドを元にしています。 これまでのWantedlyのフロントエンド開発 まず、今回のスタック導入前のWantedlyのフロントエンド開発がどのようなものであったのかについてご説明します。 Wantedlyの開発リポジトリを参照すると、最初のコミットは2011年9月になっています。現在は社内でもマイクロサービス化の動きが始まっていますが、基本的にW
Railsでi18n-jsを使ってJavaScriptの国際化 - Startup Reality
前はRuby on Railsアプリ内で使用するjavascriptでi18n APIを利用する - hrendohの日記のようにtoretore/babilu - GitHubを使っていたのですが、 DEPRECATED This project is abandoned in favor of i18n-js: https://github.com/fnando/i18n-js と書かれてしまっているので、i18n-jsを使ってみます。 指定したscopeのメッセージのみをJavaScriptファイルとして保存することができる。 日付のローカライズができる などbabiluと比べて進化しているようです。 基本的にはREADMEに書いてある通りですが、日本語の情報は見当たらなかったので、Rails 3.0.xで僕がやった設定を簡単に書いておきます。 1. Gemfileに1行追加します。
Delete in Rails Without jQuery and UJS | Viget
We’re a full-service digital agency that’s been helping clients make lasting change since 1999. Contact Us
Rails にオートコンプリート機能付きのテキストフィールドを追加する
今作ってる Web サイトでテキストフィールドにオートコンプリートをつけたいなーと思ったので調べたら gem があったので使ってみた。 peterwillcn/rails4-autocomplete jQuery UI のオートコンプリート機能を利用しているっぽい。 rails4 autocomplete を使う準備 自分の環境は ruby 2.1、rails は 4.1 を使用しています。 Gemfile に rails4-autocomplete を追加する gem 'rails4-autocomplete' jquery をいれてなかったら gem 'jquery-rails' もいれておく。 Gemfile 編集したら bundle install しよう。 JavaScript と CSS を読み込む app/assets/javascripts/application.js に
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Rails5.1.3でsassとjsの管理をSprocketsからWebpackerに移行した - Qiita
doruby.jp
GitHub - wdpress/WDP92_NewComerTutorial: WEB+DB PRESS Vol.92特集1「Web開発新人研修」で利用したサンプルコードを公開しています。
http://post.simplie.jp/posts/27
WantedlyにReact + Reduxを導入した話
Ruby on Railsでオートコンプリート
