「JavaScript sprinkles in Basecamp turned Stimulus」より。Stimulusの設計意図を理解できる貴重な資料なのでまとめた。 DHHにとってプログレッシブエンハンスメントとは、コンテンツのプログレッシブ性を実現するためというよりは、アプリケーション開発のための道標のようなもの。ベースとしてのHTMLはまずサーバーに生成させて、動的部分としての少しの差分をJavaScriptに扱わせる。BasecampやGitHubのように動的部分の少ないアプリケーションにとってはそれが適切なやり方。React/ReduxやAngular、そのほかクライアントサイドのMVCフレームワーク等を試してきたが、それによってプロダクトのコードが良くなることはなかった。 BasecampにあるJavaScriptを調査して、どのような慣習があるか、それを踏まえてどのような

こんにちは、@mugi_unoです。 MisocaでjQuery製のフロントエンドコードを書き換え続けていた結果、技術書典6に参加することになりました。現在必死で書いております。 farewell_webpacker さて、先日とあるブランチがmasterにマージされ、リリースされました。 farewell : ごきげんよう！、さらば！ farewellの意味・使い方・読み方 | Weblio英和辞書 farewell_webpacker です。 長い間フロントエンドのビルドにはRailsのGemであるWebpackerを使ってきましたが、現在は完全に依存を外しており、純粋なwebpackビルドを行う形に書き換えました。 正直なところ、フロントエンド界隈からは否定的な意見を聞くことも多いWebpackerですが、実際にある程度の期間プロダクションで利用してみて、良いところも辛いところも両方

この記事では、Webpackerを使っている Rails アプリからWebpackerを剥がし、webpackを使うようにするための手順を書いていく。 Webpackerを止めたい理由は様々だが、主な理由は以下のような感じだろうか。 現時点ではWebpackerが使用しているwebpackのバージョンは3.xで、最新バージョンに追従できていない webpackの設定の他に、「Webpackerの設定」について学ばなければならず、無駄が多い webpackを直接触れば済む話を、常にWebpackerという仲介者を通して作業しなければならない カスタマイズやマイグレーションの際に、考慮しなければならない要素が増えてしまう 手軽にフロントエンド開発環境を導入できる、というのがWebpackerの利点であり、カスタマイズやらアップデートやらが必要になってしまうのならあまりメリットはない、と個人的に

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

概要 Rails 4上において、一部ブラウザに対するプッシュ通知（Web Push）を実装する VAPID（Voluntary Application Server Identification）を利用することで事前にプッシュサーバへの事前登録は必要ない 記事執筆時点(2017年04月28日)では Google Chrome Google Chrome for Android Firefox Opera がWeb Pushに対応している OperaはVAPIDに対応してない為、本記事ではChromeおよびFirefoxのみ扱うこととする （本記事のコードをOpera（44.0 OS X）で動かした所、Operaインストール直後は正常にServiceWorker登録および購読登録でき、通知も送られたものの、一度Operaを終了し、再度起動した所、Registration failed - p

Rejectcon 2018 レポート記事 こんにちは。オウチーノ吉川です。 去る9/29にRejectconで「Rails+ReactなSPAサイトでのSEO」について登壇してきました。 SPAサイトでSEOを行う際にぶつかった壁と、それをどのように乗り越えていったかの経緯をご紹介しました。 ちょっと内容詰め込みすぎて途中途中端折ってしまったのと、発表後にもいろいろ質問などをいただいていたのであわせて補足しながらご紹介します。 発表資料はこちらです。 なぜ経緯を紹介したのか？ 昨今のフロントエンド技術の進化速度は非常に速く、どんどん新しい技術が登場しています。 記事などでどういった技術が登場しているのかは抑えているが、実際に全てちゃんと触ってはいないという方も多いのではないでしょうか。 SSRをするためにはreact-railsやhypernovaがある、ということを知っているだけでは、

amakan での設計を例に、RailsでSingle-Page Applicationをつくるときの自分のやり方をまとめてみます。 Gem 「JavaScriptで書かれたReactのコンポーネントからHTMLを生成する」というのをRubyでやるために、RubyのV8エンジン実装であるmini_racerというGemを使う。この処理を楽に実行するために、react_on_railsというGemも使う。 gem "mini_racer" gem "react_on_rails" View body要素内のHTMLは全てReactで生成するので、layout以外にviewのテンプレートは存在しない。 Controller 初回リクエストの場合はHTMLを返す ページ遷移時に呼ばれるリクエストの場合はJSONを返す 外部サイトからブラウザバックで戻ってきたときにJSONを見せない という要求に

ビール大好きですが、3回に1回は年齢確認をされる26歳エンジニアの村上(pipopotamasu (pipopotamasu) · GitHub)です。 今回はリクエストからレンダリング完了までの時間を減らした取り組みについて書こうと思います。 きっかけ メドピアではメインプロダクトをRuby on Railsで開発しています。 Railsで開発を始めてから2年半、すくすくとアプリケーションが成長してきています。 しかし成長していくにつれ問題が出てくるのが世の常、以下のような問題が生じてきました。 「ページ読み込みが遅い...」 Webアプリケーション開発者は開発環境で1日に何十回とページ読み込みをさせると思いますが、Railsの成長と共にそれがめちゃくちゃ遅くなってきたのです。 環境 メドピアのフロントエンド環境はassets pipeline(browserify-railsを用いてビ

Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article?

React On Rails with Devise: Two Ways Hi, I’m Kate! I’ve been working as a web development intern at Abletech for the last two months. Recently I’ve been investigating using React together with Ruby on Rails. My task was to discover common ‘gotchas’ and figure out what it would take to use React in our next project. As a noob with a little experience with React, and even less with Rails, I ran into

RailsにReact.jsを導入するのは簡単だが、既にMVCで作られているプロダクトにおいて、クライアントを分離するのは容易ではない。JSON API、Controller、CSS、jQueryなど色々問題がある。 https://qiita.com/khrtz/items/a43d58cad54af2425ced 前にこんなの書きましたが、既存のRailsサービスにJSライブラリを利用するには俯瞰した設計が足りない気がする(Railsにとっては) よくReactを導入する事例で、Reactコンポーネントを作り、Fluxを作ればデータ取得から表示までクライアントで行うことができるけど、アプリケーション全体としてみたときどうなんだろう。RailsのViewはすでにhtml化されユーザーに届けられるが、その上で更にJSのロジックが動き始めるのは体験的にいいものではない。 提案: Server

おはようございます。ゴールデンウィークいかがおすごしでしょうか。 これまでブログの中であまりエンジニア的な話はしてこなかったのですが、 改めて自己紹介をさせていただきますと、僕は横浜でWebのフロントエンドエンジニアをやっている者です。 名を田島といいます。どうぞよろしくお願いします。 さて、僕はエンジニアでありながらスロットも大好きなので、 最近ではその趣味が高じて、 誰でも言葉のスロットが作れる！スロットメーカー という、なさそうでなかったWebサービスを作ってみました。 slot-maker.com 制作に用いた技術はフロントエンドに React.js (フレームワークはFlux)、バックエンドにRuby on Rails (主にAPIのみ)という構成で実装しました。 今回はその技術的なお話を書こうと思います。 ところで、僕が普段やっている仕事は、 3分でわかる！事故予測検定 のよう

jquery-ujsからrails-ujsの移行、特に気をつけることないと思ってたけどajax:successなどのイベントのコールバックに渡される引数が違うな— willnet (@netwillnet) 2017年7月15日 jquery-ujs だと data, status, xhr rails-ujs だと event だけ レスポンスの情報がほしいときは event.detailの中をみる document.body.addEventListener('ajax:success', function(event) { var detail = event.detail; var data = detail[0], status = detail[1], xhr = detail[2]; }) 参考 jquery-ujs/rails.js at master · rails/jq

概要 Rails4.2 で新規プロジェクトを立ち上げることになったらテストをどうしようか。 現時点で考えうる全部入りを試してみようと思う。 導入する gem やライブラリは下記。 Rspec Ruby向けテストフレームワーク Capybara WEBアプリケーションのテストを補助するライブラリ PhantomJS ヘッドレスブラウザ Poltergeist Capybara を PhantomJS で動作させるためのドライバ Turnip Rspec を Gherkin 書式に対応させる Jasmine Javascript向けテストフレームワーク FactoryGirl テストデータを柔軟に生成 Guard ファイル変更を監視して任意のコマンドを実行 Rubocop 静的解析ツール（コーディング規約チェック） Spring アプリケーションプリローダー 何ができるかというと、 単体テスト

検討 競合する可能性が大いにあり、かつデータの整合性が非常に重要な部分の実装なので、今回の場合は楽観的ロックではつらそう。では悲観的ロックではどうか。 悲観的ロックとは、 悲観的ロックとは、DBMSの行ロック機能（SELECT FOR UPDATE句）を利用して、並行した更新作業を制限する方法です。 ロックはレコード取得時にかかるので、同時にレコードを取得しようとした場合は他方がロック解除になるまで待機するため、同時に同じレコードを取得できないようになります。 via: http://kray.jp/blog/activerecord%E3%81%A7%E8%A1%8C%E3%83%AD%E3%83%83%E3%82%AF%E3%82%92%E3%81%8B%E3%81%91%E3%82%8B%E6%96%B9%E6%B3%95/ 今回ロックしたいデータはReact componentから

ほぼ表題の通りの内容で、Chrome拡張を作ってみた。 完成度としてはまだまだだけど、とりあえずざっくり触れる程度にはなったので公開した。 github.com chrome.google.com アイコン画像は、カピバラの写真を適当になぞって作った。 なんでこんなものを？ Capybaraのテストコードを書くのが面倒だなって感じることが多かったのが1つの理由。 TDD的に、先にテストコードを書いていけるのが理想だな〜とは思うものの、Webアプリケーションの開発をしていると、現実には一度は画面から一通り確認して、その後にfeature specを書く流れが多いように感じる。 そしてCapybaraでfeature specを書こうと思うと、 「これはテキストじゃなくてIDで選択しないとダメか〜」 「あ〜、これはfindしてからsetしないといけないのか〜」 という感じで、スムーズに書けない

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