Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
airClosetのフロントアーキテクチャの歴史と色々
Search
osamu38
February 26, 2018
Research
3
1.9k
airClosetのフロントアーキテクチャの歴史と色々
osamu38
February 26, 2018
Tweet
Share
Other Decks in Research
See All in Research
ゼロからわかるリザバーコンピューティング
kurotaky
1
290
待機電力を削減したネットワーク更新型電子ペーパーサイネージの開発と評価 / IOT64
yumulab
0
110
データで診て考える合志市の渋滞と公共交通 ~めざせ 車1割削減、渋滞半減、公共交通2倍~
trafficbrain
0
460
Azure Arc-enabled Serversを利用した ハイブリッド・マルチクラウド環境の管理 / Managing Hybrid Multi-cloud Environments with Azure Arc-enabled Servers
nttcom
0
210
Target trial emulationの概要
shuntaros
2
1.1k
Prompt Tuning から Fine Tuning への移行時期推定
icoxfog417
17
7k
「歴史的農業環境閲覧システム」と「迅速測図」について
wata909
1
600
研究効率化Tips_2024 / Research Efficiency Tips 2024
ryo_nakamura
5
2.8k
Cross-Media Information Spaces and Architectures
signer
PRO
0
120
10-ot-generic-bio.pdf
gpeyre
0
140
DeepCrysTet: A Deep Learning Approach Using Tetrahedral Mesh for Predicting Properties of Crystalline Materials
tsurubee
0
370
MegaParticles: GPUを利用したStein Particle Filterによる点群6自由度姿勢推定
koide3
1
530
Featured
See All Featured
Visualization
eitanlees
136
14k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
The Mythical Team-Month
searls
216
42k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
274
13k
Practical Orchestrator
shlominoach
182
9.7k
Stop Working from a Prison Cell
hatefulcrawdad
266
19k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Become a Pro
speakerdeck
PRO
11
4.5k
Gamification - CAS2011
davidbonilla
76
4.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3.1k
Transcript
株式会社エアークローゼット Forefront JavaScript ! 急成長中のサービスの技術達!2018.2.26
フロントエンドエンジニア(4~5年ぐらい) airClosetではSSRの設計をしてる ReactとNode.jsが好き フリーランス 荒田 修(あらた おさむ) osamu38(GitHub) プロフィール
もくじ • airClosetのフロントアーキテクチャの歴史 • SSRに便利なツール達 • CSS • 成功した話 •
失敗した話 • もし今日からSSRを勉強したい人がいましたら • 伝えたかったこと
もくじ • airClosetのフロントアーキテクチャの歴史 • SSRに便利なツール達 • CSS • 成功した話 •
失敗した話 • もし今日からSSRを勉強したい人がいましたら • 伝えたかったこと
airClosetのフロントアーキテクチャの歴史
かつて(2015年2月〜2016年9月)
課題 • レガシーなコード • セキュリティがガバガバ • 拡張性がない
作り直し
React
僕が参画した後の設計(2016年9月〜2017年12月)
僕が参画した後の設計(2016年9月〜2017年12月) メイン:Reactを使ったSPA サブ :Staticサーバー(キャンペーンページ用) CSS :PostCSS
• SPAだとOGPの対応が困難 • StaticサーバーでReactのコンポーネン トを再利用できない • そもそもリポジトリを一元管理ができな い 課題
二度目の作り直し
SSRの巻 Server Side Rendering
メリット • SPAだとOGPの対応が困難 • StaticサーバーでReactのコンポーネン トを再利用できない • そもそもリポジトリを一元管理ができな い 全部できる。最高。
現在のアーキテクチャ
現在のアーキテクチャ(2016年12月〜現在) メイン:Reactを使ったSSR サブ :Reactを使ったSPA(移行しきれていない ページ) CSS :PostCSS to styled-components
もくじ • airClosetのフロントアーキテクチャの歴史 • SSRに便利なツール達 • CSS • 成功した話 •
失敗した話 • もし今日からSSRを勉強したい人がいましたら • 伝えたかったこと
SSRに便利なツール達
SSRに便利なツール達 その1 react-helmet https://github.com/nfl/react-helmet
SSRに便利なツール達 その1 react-helmet
SSRに便利なツール達 その2 react-cookie https://github.com/reactivestack/cookies/tree/master/packages/react-cookie
SSRに便利なツール達 その2 react-cookie
SSRに便利なツール達 その2
[email protected]
セットして... 使うだけ
もくじ • airClosetのフロントアーキテクチャの歴史 • SSRに便利なツール達 • CSS • 成功した話 •
失敗した話 • もし今日からSSRを勉強したい人がいましたら • 伝えたかったこと
CSS
CSSっていろいろあるけど、何がいいのかしら Reactを使ったアプリケーションでCSSを書くときに現実的な選択肢 は2種類だと思っています。 1つはCSS Modules。 もう1つはstyled-componentsです。 どちらも甲乙つけがたいところがあり、CSSを非エンジニアが書く場 合CSS Modulesに分があり、エンジニアが書く場合は styled-componentsが良さそうだなと思いました。
異論は認めます。
もくじ • airClosetのフロントアーキテクチャの歴史 • SSRに便利なツール達 • CSS • 成功した話 •
失敗した話 • もし今日からSSRを勉強したい人がいましたら • 伝えたかったこと
成功した話
成功した話 その1 頻繁にnpm-check-updatesしてたこと https://github.com/tjunnone/npm-check-updates
npm-check-updatesとは ターミナル上でncuコマンドを叩くことにより、package.jsonの依存モ ジュールを最新バージョンにアップグレードできるコマンドラインツー ル。
最近のモジュール事情とncuのメリット 最近ではモジュールが破壊的に変更されることが多々あり、一 気にアップデートすると死にます。(reactとか) なので頻繁に少しずつアップデートすることによって後で苦労 することもなくなります。(react-routerは別)
余談 仕事がなくて暇な時は npm install [module-name]@latest してみましょう。事前に新しいバージョンのモジュールを導入す ることができます。 ちなみにreact-hot-loaderは現在v3.1.3が最新版ですが npm install
react-hot-loader@latest するとv4.0.0-rc.0が入ります。
成功した話 その2 GitHubのリポジトリを沢山見比べたこと https://github.com/osamu38/universal-investigation/wiki
そもそもSSRの設計なんて全然わからん。 SSRのような少し複雑な設計をする際に、そもそもどう作れば 良いのかよくわかりませんでした。 なのでひたすら調査してみました。2017年1月21日の時点での メモ。 https://github.com/osamu38/universal-investigation/wiki 調べてみると各々の実装の違いやお作法のような書き方が あったり、当時の実装者たちの苦労が伺えます。 ここで調べていたおかげである程度SSRにおけるコツを掴みま した。
ちなみに この時点でのNext.jsのスター数が8327でしたが、資料作成中 に見たら22718でした。なにも考えずNext.js使えば良いんじゃ ないかな。
もくじ • airClosetのフロントアーキテクチャの歴史 • SSRに便利なツール達 • CSS • 成功した話 •
失敗した話 • もし今日からSSRを勉強したい人がいましたら • 伝えたかったこと
失敗した話
失敗した話 その1 RefluxJSを使ったこと https://github.com/reflux/refluxjs
当時は良いと思ってたんだよ。当時は Reduxの冗長さに対して懐疑的であり、より楽に書けるRefluxJS(さ りげなくスター数5000越え)があったので使ってみたものの、徐々に メンテされなくなりエコシステムと切り離される恐怖感からReduxへ 移行。使い心地は悪くなかった。 ↓Refluxの設計(とてもシンプル)
失敗した話 その2 CSS Spriteを使ったこと
CSS Spriteとは たくさんの画像をなるべく一枚画像にまとめて、サーバへのリクエス ト回数を少なくする技術です。 Sprite画像とCSSのマッピングが必要なため、レスポンシブに対応さ せるなどの凝ったものを作ろうとするとそれなりに面倒な設定を書 かざるをえないのですが、当時は画面を少しでも早く表示したいが ために頑張って書いていました。
HTTP2 襲来 エアクロメンバー
なんてこったい。。。 HTTP2では並列でリクエストが可能なため、一枚あたりの画像 サイズが小さい方が相性良さそうです。 苦労して導入したのに捨てるどころかパフォーマンスを下げる 原因になり、PostCSSからstyled-componentsに移行する際の 障壁にもなっているため、本当に失敗でした。
もくじ • airClosetのフロントアーキテクチャの歴史 • SSRに便利なツール達 • CSS • 成功した話 •
失敗した話 • もし今日からSSRを勉強したい人がいましたら • 伝えたかったこと
もし今日からSSRを 勉強したい人がいましたら
スターつけてもいいんだよ https://github.com/osamu38/universal-investigation のリポジトリをクローンしてみましょう。 中身の実装が世界一薄いので勉強には向いていると思います。
もくじ • airClosetのフロントアーキテクチャの歴史 • SSRに便利なツール達 • CSS • 成功した話 •
失敗した話 • もし今日からSSRを勉強したい人がいましたら • 伝えたかったこと
伝えたかったこと
SSRよ、流行れ この前僕がReact.jp meetup #5に参加させて頂いた際に、会場で Reactを実務で使っている人とSSRまでやってる人を質問していまし たが、Reactを使っている人は半分ぐらいで、SSRやっている人は3 人ぐらい。 ちょっとショックでした。もっと流行ってると思ってた。 SSRのような技術は導入していない会社からすれば遠い技術と思 われがちですが、ちょっとずつでもいいから情報をキャッチアップし
てモダンな環境に日々近づけていく努力がエンジニアには必要だな と思いました。
airCloset、まじ自由 フリーランスの僕がおすすめするのもあれですが、airClosetは自由 に設計できてとても良い会社です。 エンジニア絶賛募集中なので、是非よろしくお願いします。 https://www.wantedly.com/projects/177054
半歩先の 新しいライフスタイルとして、 これまでにないワクワクする ファッションとの出会い方を 創造します 42