airClosetのフロントアーキテクチャの歴史と色々

Transcript

1. 株式会社エアークローゼット Forefront JavaScript ! 急成長中のサービスの技術達！2018.2.26
2. フロントエンドエンジニア（4~5年ぐらい） airClosetではSSRの設計をしてる ReactとNode.jsが好き フリーランス 荒田 修（あらた おさむ） osamu38（GitHub） プロフィール
3. もくじ • airClosetのフロントアーキテクチャの歴史 • SSRに便利なツール達 • CSS • 成功した話 • 失敗した話 • もし今日からSSRを勉強したい人がいましたら • 伝えたかったこと
4. もくじ • airClosetのフロントアーキテクチャの歴史 • SSRに便利なツール達 • CSS • 成功した話 • 失敗した話 • もし今日からSSRを勉強したい人がいましたら • 伝えたかったこと
5. airClosetのフロントアーキテクチャの歴史
6. かつて（2015年2月〜2016年9月）
7. 課題 • レガシーなコード • セキュリティがガバガバ • 拡張性がない
8. 作り直し
9. React
10. 僕が参画した後の設計（2016年9月〜2017年12月）
11. 僕が参画した後の設計（2016年9月〜2017年12月） メイン：Reactを使ったSPA サブ　：Staticサーバー（キャンペーンページ用） CSS　：PostCSS
12. • SPAだとOGPの対応が困難 • StaticサーバーでReactのコンポーネン トを再利用できない • そもそもリポジトリを一元管理ができな い 課題
13. 二度目の作り直し
14. SSRの巻 Server Side Rendering
15. メリット • SPAだとOGPの対応が困難 • StaticサーバーでReactのコンポーネン トを再利用できない • そもそもリポジトリを一元管理ができな い 全部できる。最高。
16. 現在のアーキテクチャ
17. 現在のアーキテクチャ（2016年12月〜現在） メイン：Reactを使ったSSR サブ　：Reactを使ったSPA（移行しきれていない ページ） CSS　：PostCSS to styled-components
18. もくじ • airClosetのフロントアーキテクチャの歴史 • SSRに便利なツール達 • CSS • 成功した話 • 失敗した話 • もし今日からSSRを勉強したい人がいましたら • 伝えたかったこと
19. SSRに便利なツール達
20. SSRに便利なツール達 その1 react-helmet https://github.com/nfl/react-helmet
21. SSRに便利なツール達 その1 react-helmet
22. SSRに便利なツール達 その2 react-cookie https://github.com/reactivestack/cookies/tree/master/packages/react-cookie
23. SSRに便利なツール達 その2 react-cookie
24. SSRに便利なツール達 その2 react-cookie@1.0.5 セットして... 使うだけ
25. もくじ • airClosetのフロントアーキテクチャの歴史 • SSRに便利なツール達 • CSS • 成功した話 • 失敗した話 • もし今日からSSRを勉強したい人がいましたら • 伝えたかったこと
26. CSS
27. CSSっていろいろあるけど、何がいいのかしら Reactを使ったアプリケーションでCSSを書くときに現実的な選択肢 は2種類だと思っています。 1つはCSS Modules。 もう1つはstyled-componentsです。 どちらも甲乙つけがたいところがあり、CSSを非エンジニアが書く場 合CSS Modulesに分があり、エンジニアが書く場合は styled-componentsが良さそうだなと思いました。 異論は認めます。
28. もくじ • airClosetのフロントアーキテクチャの歴史 • SSRに便利なツール達 • CSS • 成功した話 • 失敗した話 • もし今日からSSRを勉強したい人がいましたら • 伝えたかったこと
29. 成功した話
30. 成功した話 その1 頻繁にnpm-check-updatesしてたこと https://github.com/tjunnone/npm-check-updates
31. npm-check-updatesとは ターミナル上でncuコマンドを叩くことにより、package.jsonの依存モ ジュールを最新バージョンにアップグレードできるコマンドラインツー ル。
32. 最近のモジュール事情とncuのメリット 最近ではモジュールが破壊的に変更されることが多々あり、一 気にアップデートすると死にます。（reactとか） なので頻繁に少しずつアップデートすることによって後で苦労 することもなくなります。（react-routerは別）
33. 余談 仕事がなくて暇な時は npm install [module-name]@latest してみましょう。事前に新しいバージョンのモジュールを導入す ることができます。 ちなみにreact-hot-loaderは現在v3.1.3が最新版ですが npm install react-hot-loader@latest するとv4.0.0-rc.0が入ります。
34. 成功した話 その2 GitHubのリポジトリを沢山見比べたこと https://github.com/osamu38/universal-investigation/wiki
35. そもそもSSRの設計なんて全然わからん。 SSRのような少し複雑な設計をする際に、そもそもどう作れば 良いのかよくわかりませんでした。 なのでひたすら調査してみました。2017年1月21日の時点での メモ。 https://github.com/osamu38/universal-investigation/wiki 調べてみると各々の実装の違いやお作法のような書き方が あったり、当時の実装者たちの苦労が伺えます。 ここで調べていたおかげである程度SSRにおけるコツを掴みま した。
36. ちなみに この時点でのNext.jsのスター数が8327でしたが、資料作成中 に見たら22718でした。なにも考えずNext.js使えば良いんじゃ ないかな。
37. もくじ • airClosetのフロントアーキテクチャの歴史 • SSRに便利なツール達 • CSS • 成功した話 • 失敗した話 • もし今日からSSRを勉強したい人がいましたら • 伝えたかったこと
38. 失敗した話
39. 失敗した話 その1 RefluxJSを使ったこと https://github.com/reflux/refluxjs
40. 当時は良いと思ってたんだよ。当時は Reduxの冗長さに対して懐疑的であり、より楽に書けるRefluxJS（さ りげなくスター数5000越え）があったので使ってみたものの、徐々に メンテされなくなりエコシステムと切り離される恐怖感からReduxへ 移行。使い心地は悪くなかった。 ↓Refluxの設計（とてもシンプル）
41. 失敗した話 その2 CSS Spriteを使ったこと
42. CSS Spriteとは たくさんの画像をなるべく一枚画像にまとめて、サーバへのリクエス ト回数を少なくする技術です。 Sprite画像とCSSのマッピングが必要なため、レスポンシブに対応さ せるなどの凝ったものを作ろうとするとそれなりに面倒な設定を書 かざるをえないのですが、当時は画面を少しでも早く表示したいが ために頑張って書いていました。
43. HTTP2 襲来 エアクロメンバー
44. なんてこったい。。。 HTTP2では並列でリクエストが可能なため、一枚あたりの画像 サイズが小さい方が相性良さそうです。 苦労して導入したのに捨てるどころかパフォーマンスを下げる 原因になり、PostCSSからstyled-componentsに移行する際の 障壁にもなっているため、本当に失敗でした。
45. もくじ • airClosetのフロントアーキテクチャの歴史 • SSRに便利なツール達 • CSS • 成功した話 • 失敗した話 • もし今日からSSRを勉強したい人がいましたら • 伝えたかったこと
46. もし今日からSSRを 勉強したい人がいましたら
47. スターつけてもいいんだよ https://github.com/osamu38/universal-investigation のリポジトリをクローンしてみましょう。 中身の実装が世界一薄いので勉強には向いていると思います。
48. もくじ • airClosetのフロントアーキテクチャの歴史 • SSRに便利なツール達 • CSS • 成功した話 • 失敗した話 • もし今日からSSRを勉強したい人がいましたら • 伝えたかったこと
49. 伝えたかったこと
50. SSRよ、流行れ この前僕がReact.jp meetup #5に参加させて頂いた際に、会場で Reactを実務で使っている人とSSRまでやってる人を質問していまし たが、Reactを使っている人は半分ぐらいで、SSRやっている人は3 人ぐらい。 ちょっとショックでした。もっと流行ってると思ってた。 SSRのような技術は導入していない会社からすれば遠い技術と思 われがちですが、ちょっとずつでもいいから情報をキャッチアップし てモダンな環境に日々近づけていく努力がエンジニアには必要だな と思いました。
51. airCloset、まじ自由 フリーランスの僕がおすすめするのもあれですが、airClosetは自由 に設計できてとても良い会社です。 エンジニア絶賛募集中なので、是非よろしくお願いします。 https://www.wantedly.com/projects/177054
52. 半歩先の 新しいライフスタイルとして、 これまでにないワクワクする ファッションとの出会い方を 創造します 42