掲示板のJavaScriptこういう風に最適化しました - ✘╹◡╹✘
最近Railsで掲示板つくってて、サボって後回しにしていたJavaScriptの最適化をやりました。 掲示板の構成 Webpackを使っている Reactを使っている Server-Side Renderingをやっている Railsを使っている Sprocketsを使っていない 作業内容 webpack-bundle-size-analyzerで容量の大きいpackageを調査 HTTPクライアントに利用していたjQueryを撤廃 HTTPクライアントにaxiosを採用 lodashを一部しか読み込まないように変更 moment.jsの不要なlocaleを読み込まないように設定 変更結果 これでminify後の容量が770KB→476KBに。gzip圧縮状態では202KB→125KB。 $(npm bin)/webpack --profile --json | webpack-bundl
モダンJavaScript開発環境 on Rails - クックパッド開発者ブログ
投稿推進部の外村（@hokaccha）です。 クックパッドブログの開発でRails上にECMAScript6などのモダンなJavaScript開発環境を導入した経験を元にノウハウを紹介したいと思います。 RailsはSprocketsというgemでJavaScriptやCSSをコンパイルする仕組みが提供されています。Sprocketsによるasset管理の仕組みは非常によくできており、AltJSのトランスパイルやファイルの結合、minifyなど、assetのコンパイルに必要な機能を一通り備えています。 しかし、JavaScriptにおけるモジュールの依存関係の解決や、ライブラリの管理などについてはモダンなJavaScript開発と乖離してきているのが現状です。そこで、Railsでも以下のようなことを実現できることを目標に環境を作りました。 ECMAScript6のシンタックスを使う モジュ
React.jsを使いたいRailsおじさんがJavaScriptライブラリをそれっぽく管理しながら入門する - ppworks.jp
Sendagaya.rb #114に来たので、目標のブログ記事を書いてた。 今日はsendagaya.rbへ行ってブログ記事を一本仕上げるのが目標。— Koshikawa Naoto (@ppworks) August 10, 2015 今日は、React.jsの会なので、RailsからReact.jsをざっくり使って見る準備をしてみます。 目指すもの sprocketsのままとりあえず進む jsのライブラリをnpmで管理したい React.jsをES6で書きたいし、JSX書きたい herokuで動かすぞ！ react-railsは使いたくない 方針 sprocketsと共存するために、browserify-railsを利用し、ES6はBabelを利用します。ライブラリはそのまま、npmで管理します。 npmを入れます もし入っていなければnpmを入れましょうね。 brew install
俺の最近のRailsのJS開発環境を教えてやる - Qiita
こうやってるだけでも出力された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
Rubyist Magazine - スはスペックのス 【第 1 回】 RSpec の概要と、RSpec on Rails (モデル編)
『るびま』は、Ruby に関する技術記事はもちろんのこと、Rubyist へのインタビューやエッセイ、その他をお届けするウェブ雑誌です。 Rubyist Magazine について 『Rubyist Magazine』、略して『るびま』は、Rubyist の Rubyist による、Rubyist とそうでない人のためのウェブ雑誌です。 最新号 Rubyist Magazine 0064 号 バックナンバー Rubyist Magazine 0064 号 Rubyist Magazine 0063 号 Rubyist Magazine 0062 号 Kaigi on Rails 特集号 RubyKaigi Takeout 2020 特集号 Rubyist Magazine 0061 号 Rubyist Magazine 0060 号 RubyKaigi 2019 直前特集号 Rubyist
Railsが時代に合わなくなってきた
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? 追記 RailsでJS辛い問題に関しての結論：http://qiita.com/kaiinui@github/items/dad6180f1910c6a4bfd5 -- 近年、(1) Web/App両対応が増えてきたこと、(2) WebでもJSを多用するようになったこと、の二つがあり、以下の点でRailsが微妙になっている。 ViewのJavascriptがRailsから独立している API層のサポートが微妙 最初に書いておきますが、特に決定的な解決策もなく、辛いから今後解消されてほしいよね、な話です。 ViewのJavascriptが
Javascriptの中からnamed routeを使えるよ - kaeruspoon
9:53:24 (2.67) % bundle exec rails c Loading development environment (Rails 4.0.0.beta1) irb(main):001:0> JsRoutes.generate!("app/assets/javascripts/kaeru_routes.js") 第１引数には出力先のファイル名を指定します。他にもいろいろオプションが指定できるようです。 すると、app/assets/javascripts/kaeru_routes.jsというファイルが生成されます。 このファイルをmanifestファイルで指定してあげれば、あとは簡単にJavascript内からnamed routesが使えるようになります。
Railsでjavascriptやcoffeescriptをつかうとき便利かもしれないGem | | Scimpr Blog
ojgithub.com/ohler55/oj JSONの替わりに使ったOJが速い 高速なJSONパーサ gongithub.com/gazay/gon Railsの変数をJavascript内で使えるようにする RailsからJavaScriptにデータを渡す js-routesgithub.com/railsware/js-routes/ Javascriptの中からnamed routeを使えるよ article_pathとかそういうのがJavascript内で使えるようになる rails-dev-tweaksgithub.com/wavii/rails-dev-tweaks Sass、Compass、Rails 3.1 のアセット パイプライン (翻訳版) 「この gem には Rails の自動読み込み規則を変更する機能があるので、開発中の各要求間の再読み込みが回避されます。既定
Turbolinksさんと上手く付き合う10の方法 - Qiita
Ruby on Rails Advent Calendar 2014の６日目です。 概要 Turbolinks ONのRails案件を２つこなして得たTurbolinksを使うときの知見を共有します。 おまだれ ハートレイルズという会社で働く受託開発Railsエンジニアです。 Rails歴１年ぐらい。お仕事で半年ぐらい。 その前は選ばれた人だけの転職サイトをjavaで作ってました。 Turbolinksさんと上手く付き合う１０の方法 1. 学ぶ。 Turbolinksについて 「rails newしたら真っ先にGemfileから外すやつでしょ？某podcastの最近の回でゲストの人が言ってたよね」 「$(document).ready」が呼ばれないアレでしょ？」 「$(document).on 'ready page:load'使えばとりあえず問題なくなるアレでしょ？」 という認識で気軽に
Sprockets再考 モダンなJSのエコシステムとRailsのより良い関係を探す - Qiita
すいません。締切守れませんでした…。 やっぱ、java-jaの忘年会の翌日は辛い…。 はじめに Webシステムを開発していると切っても切れないのがJavaScriptです。 Railsはかなり早い時期からalt-JSや結合、minify等を組み込めるようにフレームワークにそれを取り入れてきました。 それを支えているのがRails3.1から導入されたsprocketsです。 それに伴なってJSのライブラリをどうやって管理するかという点について、独自の路線を取ることになりました。 JSのライブラリを同梱したgemパッケージにラップしてrubygemsとして管理する方法です。 ある程度は上手くいっていたし、今もその流れは続いているんですが、時々問題になることもあります。 例えばメンテナの対応時期がズレてて古いバージョンのままだったり、似たようなgemが乱立してややこしくなったり。(backbon
Chartkick - Create beautiful JavaScript charts with one line of Ruby
Quick Start Add this line to your application’s Gemfile: gem "chartkick" Then follow the instructions for your JavaScript setup: Importmap (Rails 7+ default) Bun, esbuild, rollup.js, or Webpack Sprockets This sets up Chartkick with Chart.js. For other charting libraries and frameworks, see these instructions. Importmap In config/importmap.rb, add: pin "chartkick", to: "chartkick.js" pin "Chart.bun
Turbolinksを実装するにあたっての注意点 - おやまのエンジニアリングブログ
はじめに Rails 4になってTurbolinksやpjaxなどの非同期通信を使ってページを更新する方法が広く知られるようになりました。自分も積極的にプロジェクトに取り込んだのですが、結構癖があり、実装するにあたって色々考慮が必要だったのでその実装方法をまとめておきます。 ページ遷移後に$.readyが実行されない jQueryの.readyが実行されないというのがありますが、実はjquery-turbolinksというgemをGemfileに加えて、追加されたファイルをJavascriptのマニフェストファイルに加えるだけで解決するので特に問題ではありません。 グローバルスコープがクリアされない 技術の特性として、コンテンツ部分だけを置き換えているので、Javascriptのスコープはページ遷移をしてもクリアされません。なので、グローバルスコープに関数や変数を定義し続けると、どんどんメ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Railsのrakeでasset:precompile前に任意のタスクを流してをjsをビルドする - Qiita
rubocopやjshintなどをgit-hookにまとめて設定できるpre-commit gemが便利そう（メモ） - Qiita
GitHub - mailcheck/mailcheck: Reduce misspelled email addresses in your web apps.
Rails 3.2 のプロジェクトに jasmine 導入して CoffeeScript でテスト書くまで - Qiita