[Day 1: C-1] jQuery + Sass な SPA Rails アプリを React + CSS in JS にリプレースした話


yhirano55
yhirano55 commented 6 months

登壇者: 株式会社ソニックガーデン 後藤 雅之, 石澤 佳祐

Railsアプリケーションの開発において、React/Vue.js 等のモダンなフレームワークが台頭し、これまで主流だった jQuery、Sass で運用されているサービスをリプレースする事例が増えてきています。その一方で、リプレースを検討しつつも、開発規模が大きすぎたり、リソースの確保ができなかったりという理由で、リプレースが進まないケースも多く存在するかと思います。

本セッションでは、そんな既存サービスのリプレースを検討しているエンジニアにとって、SonicGarden の価値観の一つである小口化という考え方を元に、限られたリソースの中でも着々とリプレースを進めていった知見についてお話ししたいと思います。


  • このセッションに関する質問を募集中です
  • 事前に聞きたいことがあれば、何でも書き込んでください。
  • 質問への回答はお約束できません。あらかじめご了承ください

Like(0)

Questions and feedbacks (12)

gotchane
gotchane commented 6 months

@kokuyouwind

SASSをStyled Componentに置き換えていく際、既存のスタイルと2重に適用されてしまうといった問題はなかったのでしょうか?

基本的にはほとんど問題がなかったのですが、稀に置き換え対象のコンポーネントに適用されてるスタイルの specificity(cssへのタグやクラスの指定数)の兼ね合いで、既存のスタイルの適用が優先されることがありました。

  • .menuSampleComponent → specificity 数が同じなので 後者(styled-component)が優先
  • .menu.is-openSampleComponent → specificity 数が前者の方が多いので前者(class 指定)が優先

参考: https://www.styled-components.com/docs/advanced#issues-with-specificity

こちらは、styled-components の specificity 数を上げれば回避はできるのですが、 対応が煩雑になるので、既存 の CSS のspecificity 数は小さくしておくほうが良さそうと思います。。

参考:https://github.com/QuickBase/babel-plugin-styled-components-css-namespace

Like(0)

kei-p
kei-p commented 6 months

@mugi-uno

段階的な移行をする際、jQuery部はDOMに依存し、Reactはstateに依存するような、状態が散り散りになる期間が発生しなかったのかどうか、もし発生した場合はどのようなポリシーで対処したのかを聞きたいです

段階的に機能を置き換えていたので、移行中は常に発生した状態となっておりました。 その時の開発のポリシーというほどではないですが、 ・極力 state への置き換えを優先する ・パーツ内では、絶対混在させない という点は意識していました

Like(0)

kei-p
kei-p commented 6 months

@n-kurasawa

影響度の小口化でテストの話が出ましたが、reactの部分もRspec(?) の feature spec でテストしているんでしょうか? 特に問題はないでしょうか? また、フロントのテスト (jestとか) も書いたりしていますか?

特別、 js 側でのテストはまだ用意できてない状況です。 そのかわり、もともと feature の spec が厚めに書いてあったりするので、そちらで動作の保証はできているかなといった状況です。

Like(1)

gotchane
gotchane commented 6 months

@motchang

I18n のデータを XHRで、との事でブラウザ実行時に翻訳ファイルを画面に注入する仕組みだと思うのですが、ユーザー体験が低下(画面がガチャガチャするなど)はありませんでしたか? レンダリング完了までのベンチマークなどはとりましたか?

今回の React i18n 化によって顕著にユーザー体験が低下するということはほとんど見られませんでした。

厳密なベンチマークはとっていませんが、翻訳データのサイズは約50KBで、取得時間は約150ms 程度だったため、 影響は軽微であったと思っています。

Like(0)

kei-p
kei-p commented 6 months

@n-kurasawa

webpacker 使ってますか? 使っていたら感想とか聞きたいです。使っていなければ理由を知りたいです。

使っています。 使わなかったときに js のコンパイル周りでやらなければいけないことが、これ一ついれるとできるのはかなり楽です。 一方で、version アップでがらっと設定ファイルが変わったり、詳細な箇所はブラックボックスになってたりとハマりポイントも多く時々悩まされます。

Like(1)

kei-p
kei-p commented 6 months

@8398a7

react化するにあたってrenderさせる部分は何かgemを使っていますか? あと複数ページがあるSPAの場合、router周りをどのように制御しているかをお聞きしたいです。

render は、https://github.com/renchap/webpacker-react を使っています。 それと、複数ページがあるSPAというのは、 SPA 内での ページ遷移ということでしょうか? 今回の Remotty では、SPA の中でページ遷移する要素がないので router での制御は必要ありません。

Like(0)

motchang
motchang commented 6 months

I18n のデータを XHRで、との事でブラウザ実行時に翻訳ファイルを画面に注入する仕組みだと思うのですが、ユーザー体験が低下(画面がガチャガチャするなど)はありませんでしたか? レンダリング完了までのベンチマークなどはとりましたか?

Like(1)

8398a7
8398a7 commented 6 months

react化するにあたってrenderさせる部分は何かgemを使っていますか?
あと複数ページがあるSPAの場合、router周りをどのように制御しているかをお聞きしたいです。

Like(3)

n-kurasawa
n-kurasawa commented 6 months

webpacker 使ってますか?
使っていたら感想とか聞きたいです。使っていなければ理由を知りたいです。

Like(3)

kokuyouwind
kokuyouwind commented 6 months

SASSをStyled Componentに置き換えていく際、既存のスタイルと2重に適用されてしまうといった問題はなかったのでしょうか?

Like(1)

n-kurasawa
n-kurasawa commented 6 months

影響度の小口化でテストの話が出ましたが、reactの部分もRspec(?) の feature spec でテストしているんでしょうか?
特に問題はないでしょうか?
また、フロントのテスト (jestとか) も書いたりしていますか?

Like(2)

mugi-uno
mugi-uno commented 6 months

段階的な移行をする際、jQuery部はDOMに依存し、Reactはstateに依存するような、状態が散り散りになる期間が発生しなかったのかどうか、もし発生した場合はどのようなポリシーで対処したのかを聞きたいです

Like(0)

Create Comment

Please sign in to comment.

Sign in with GitHub
This software is available as open source under the terms of the MIT License.
Copyright © 2018 Yoshiyuki Hirano