jQuery + Sass な SPA Rails アプリを React + CSS in JS にリプレースした話 ツイートまとめ #railsdm2019

1
黒曜@Leaner Technologies @kokuyouwind

C会場「jQuery + Sass な SPA Rails アプリを React + CSS in JS にリプレースした話」 二人でお話するとのこと。まずは前半、jQuery -> Vue.jsのリプレイスをうまく進めていくコツ #railsdm2019c

2019-03-22 11:51:43
mugi @mugi_uno

jQuery辛い人という質問に対して、ここ一年くらいで一番勢いよく挙手した #railsdm2019c

2019-03-22 11:54:40
黒曜@Leaner Technologies @kokuyouwind

機能改善とリプレイスを並行して進めづらいの、わかりすぎるなぁ… #railsdm2019c

2019-03-22 11:56:03
👶 @negipo

古い塩で苦労してるひとびとで部屋が埋めつくされてる #railsdm2019c

2019-03-22 11:56:27
mugi @mugi_uno

わかる…わかる…という感情でいっぱいです #railsdm2019c

2019-03-22 11:56:52
ldk2iln3yt201 @ldk2iln3yt201

既存機能の改修が優先されるというのはよくわかるなあ →小口化して対応する #railsdm2019 #railsdm2019c

2019-03-22 11:57:32
黒曜@Leaner Technologies @kokuyouwind

「小口化。工程ごとに一気に作るのではなく、動くものまで一気通貫で少しずつ作っていく」 ユーザストーリーの分け方と同じような考え方やな #railsdm2019c

2019-03-22 11:57:54
ldk2iln3yt201 @ldk2iln3yt201

機能の小口化 ・機能的に疎結合のパーツにする 画面内の要素を影響(関連)の少なそうなものから順に対応していく なるほどー #railsdm2019 #railsdm2019c

2019-03-22 11:59:15
黒曜@Leaner Technologies @kokuyouwind

機能の小口化とは、機能的に疎結合なパーツに分けて段階的に置き換える、要素の少ないパーツから置き換える、など。最初はjQueryとReactのレイヤーを重ねて、部品を少しずつ移していった #railsdm2019c

2019-03-22 12:00:17
黒曜@Leaner Technologies @kokuyouwind

網羅性の小口化。すべてのコンポーネントを置き換えるのではなく、イベントハンドリングが複雑だったりstateの管理が大変だったりなど、React化の意味が大きいものを優先する。 #railsdm2019c

2019-03-22 12:01:25
ldk2iln3yt201 @ldk2iln3yt201

網羅性の小口化 jqueryを完全に無くすのはやめる。 イベントハンドリングや状態管理が複雑なものは移行し、そうでないものはjqueryを残す fmfm #railsdm2019 #railsdm2019c

2019-03-22 12:01:25
黒曜@Leaner Technologies @kokuyouwind

影響度の小口化。いきなりお客さんに公開せず、社内運用やフィーチャートグルで限定公開する。jQueryとReactの両バージョンの動作をテストで担保する。 #railsdm2019c

2019-03-22 12:03:22
mugi @mugi_uno

やっぱfeature testで担保するのか #railsdm2019c

2019-03-22 12:04:36
ldk2iln3yt201 @ldk2iln3yt201

影響度の小口化 社内での試験運用→社外への公開 フィーチャートグルを使うが、テストは共通化して品質を担保すると フィーチャートグル使うとコードを相当きれいに書かないとやばいことになりそう(小並感) テストコード共通化はすごいなあ #railsdm2019 #railsdm2019c

2019-03-22 12:05:52
黒曜@Leaner Technologies @kokuyouwind

テストの切り替えはパラメタ or 環境変数。feature specを両方で流して担保するのはまぁそうなるよなーって感じ #railsdm2019c

2019-03-22 12:06:05
👶 @negipo

両バージョンのfeature specを常にCI回す、なるほど #railsdm2019 #railsdm2019c

2019-03-22 12:06:25
mugi @mugi_uno

そうなんですよ、ゼロからの導入の知見は山ほどあるけど、稼働中システムへの導入は手探りになって死ぬほど大変なんですよ #railsdm2019c

2019-03-22 12:10:48
黒曜@Leaner Technologies @kokuyouwind

続けてサイトリニューアルと合わせたReact公開の話。フロント経験がほとんどない元インフラの人に任せるのすごいなぁ… #railsdm2019c

2019-03-22 12:10:59
mugi @mugi_uno

Bootstrapのコンポーネント単位での置き換えよさそう #railsdm2019c

2019-03-22 12:15:01
👶 @negipo

古いUI要素の振る舞いを『ポップオーバー』などで分類し、ライブラリ選定して使い回す #railsdm2019 #railsdm2019c

2019-03-22 12:15:13
mugi @mugi_uno

テスト用セレクタ、data-test属性使ってたな〜 #railsdm2019c

2019-03-22 12:16:43