超簡単!? ActiveAdminで作る管理画面@Ruby / Ruby on Rails ビギナーズ勉強会 第3回

「rails react」でググると、react-railsは真っ先に見つかるんですが、まだ使い慣れてないとgemにお任せはちょっと不安だし、情弱なだけで実はもっといい方法あるんじゃないかと思い、いろいろ探してみました。 調べているとこんな記事あり、だいたい三つの方法があるとのこと。 3 ways to integrate Ruby on Rails + React + Flux | Open Minded Innovations react-railsを使う frontend/backendを切り離してあつかう RailsをAPIサーバーとして使い、API server と React+Flux Front end Appとして切り離してあつかう そのほかも調べてみましたが、だいたいはどれかに当てはまる気がしました。 1.react-railsを使う Method 1: Use Reac
こうやってるだけでも出力されたhtmlにはscriptタグが30個ぐらいならんでて、ページの読み込みに10sec以上かかる。 だけど、単にapp/assets/javascriptsをgulp watchとかはしたくない。 なぜならビルドはブラウザのリロード時に変更がある場合だけして欲しかった。 あとwindow.AppNamespace以下にモジュール追加していくのも辛い。 モジュール同士の依存関係もよくわかんないし、何よりwindow.AppNamespace.Modules.UserList.ItemViewとか長すぎ! browserify-railsってやつ使ってみた browserifyがrailsの仕組みの中で動くようになる。 browserify-rails/browserify-rails https://github.com/browserify-rails/brows
こんにちは、Misoca開発チームのmzpです。 先週は友人の家に泊り込んでWWDCのライブストリームを見ていました。 MisocaではRailsとJavaScriptでの値の共有にgonを利用していますが、ときおりcontrollerのテストが失敗するという奇妙な現象に遭遇しました。今日は、その話について書きたいと思います。 要約 テストケースごとに Gon.clear を呼べば解決する。 もうちょっと長い要約 gonはrequest store gemを使って値を保存する controllerのテスト内では、request storeは予期した動作をしない 明示的に Gon.clear を呼べば回避できる gonとは gonはRailsとJavaScriptで値を共有するためのgemです。 具体的には、Railsで gon.user_role = "admin" とのようにすると、Ja
POSTするデータを、(プレビューのために)javascriptでGETアクセスするような処理を書いていてハマった話。 発端は、textareaに'(シングルクオートまたはアポストロフィー)が入ると、Railsがそこから先のパラメーターを無視しちゃうっていうこと。いろいろ調べた結果、以下のことがわかった(Railsのバージョンは2.0.2)。 URIを定義する2つのRFC URIの構文はRFCで定義されている。これには2つあって、従来のRFC2396(1998年発行)と、RFC3986(2005年発行)だ。 RFC3986によれば、 This document obsoletes [RFC2396], which merged "Uniform Resource Locators" [RFC1738] and "Relative Uniform Resource Locators" [RF
Introduction Ruby on Rails で無効にされがちな Turbolinks を生かす開発をしてみたときの対応策まとめです🐹 Turbolinks のバージョンは 2.5.3📦 wiz5 - もしプログラマが書店員だったら http://wiz5.jp $(document).ready() が発火しない jquery.turbolinks https://github.com/kossnocorp/jquery.turbolinks の導入で解決🍺 <head> が書き変わらない DHH 曰く、 https://github.com/rails/turbolinks/pull/165 実際、title と csrf-token は書き変わるので困らない🐬 と、考えていたものの、メタ情報を参照するスクリプトで都合が悪い☔️ 例えば、canonical を引用するシ
Fernando Villalobos I’ve been developing web platforms for a living for the past 8 years. I’m an agile practitioner and a big advocate of TDD, code review and refactoring as means to increase code quality. Introduction to React.js React.js is the new popular guy around the "JavaScript Frameworks" block, and it shines for its simplicity. Where other frameworks implement a complete MVC framework, we
結論 Sprocketsの動作を維持しつつ、npmやgulpなどのモダンなパワーも取り入れた、いいとこどりな環境を構築してみた。 やりたいこと SEOのため、Reactでserver-side renderingをしたい JSコードをES6で記述したい 既存のCoffeeScriptのコードも共存させたい(後ほど書き換える予定) npmやgulpといったモダンな環境でアセット管理をしたい browserifyを使いたい Sprocketsが実現している機能は維持したい そもそもSprocketsは何をしているか 周知のことでしょうが念のためおさらい。 ファイル毎の依存関係の管理 application.jsなどのマニュフェストファイルがやってること altJSのコンパイル アセットのminify アセットの連結 アセットファイル名にMD5フィンガープリントを挿入 Sprocketsの問題点
前回、ローンシミュレーションで途中で金利を変更するようにしました。金利変更せずにシミュレーションする場合もあり、その際も正常に動作させる必要があります。JavaScriptを使って、チェックボックスにチェックを入れた場合に、金利変更部分を入力できるように入力フォームを変更します。 1)INPUTタグのID属性を確認 下記"text_field"メソッドで生成される実際のHTMLを確認します。 <%= f.text_field :year_kinri1 %> <%= f.text_field :kinri1 %> ↓ <input id="loan_year_kinri1" name="loan[year_kinri1]" type="text" /> <input id="loan_kinri1" name="loan[kinri1]" type="text" /> 上記のようにid属性は
Are you still looking for an easy solution to build simple, dynamic pages for your customers?Hoping there is a working solution out there that you can start using right away?Something without extensive training, that is still worth learning and investing your precious time in? We’ve been just like you for years. Trying different things and never completely satisfied. Until we found React.js. Using
Ojを知ったきっかけ Padrinoでスケルトンを作るとGemfileにojというgemが入っている。 Optimized JSONの略らしい。 標準ライブラリとなったjsonよりも早いらしい。 JSONの替わりに使ったOJが速い - Qiita 自分も、開発しているサービスで使われているJSONデータを使ってやってみたら、 確かにOjの方が早かった。 https://gist.github.com/rightgo09/6492700 Ojのdump mode で、改めて触ってたら、デフォルトでOj.dumpでJSONを吐くと、 シンボルはすべて":hoge"のようになることが分かったのでメモ。 もしそれが意図しておらず、JavaScriptでコロンは不要なら、 :mode => :compatが必要である。 Oj.dump({ :hoge => :fuga }) #=> {":hoge"
Originally published on techtrails.io Server-side rendering of React components to improve SEO and minimize your web app initial loading time. Update 16 Jan. 2016 It’s been more than a year since this tutorial has been published, so I have updated to reflect the latest evolutions of the different libraries that are used here. The complete code for this tutorial is available here. Background & goal
I am building Rails 4.x app that runs on Heroku. And I recently added browserify-rails to the app then I got an error below while deploying it to Heroku. BrowserifyRails::BrowserifyError: browserify could not be found at /tmp/build_7afd0a3da809f3510421bfa4737d3bf8/./node_modules/.bin/browserify. Please run npm install. I've tried a lot of thing and finally found the solution. Here is the process f
Originally published on techtrails.io Using Node.js, I’ve grown accustomed to using CommonJS modules and I like them as a solution to dependency management and scope isolation in Javascript. Using Rails, what you natively get is Sprockets, which I feel doesn’t provide the same robustness and flexibility CommonJS does. So how could I continue using modules within Rails? Browserify is a tool that le
Why I’m using React with Rails I've been using Rails for years and recently I’ve been integrating javascript frameworks into my stack in various ways to help with front end development. There are a lot of great javascript frameworks out there like Angular, Ember, Meteor, etc, but my current favorite is React and Flux. Facebook has been doing tremendous work open sourcing their javascript stack fro
I recently wrote about real-world results with React JS. Here is a concrete example of adding React to a Rails app, start to finish. React JS is a library from Facebook that powers user interfaces. It is simpler, faster, and less opinionated than many JavaScript MVC frameworks, making it easier to bring into an existing app. Start by reviewing our recommended React resources, then check out an exa
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く