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
2k
airClosetのフロントアーキテクチャの歴史と色々
osamu38
February 26, 2018
Tweet
Share
Other Decks in Research
See All in Research
熊本から日本の都市交通政策を立て直す~「車1割削減、渋滞半減、公共交通2倍」の実現へ~@公共交通マーケティング研究会リスタートセミナー
trafficbrain
0
180
129 2 th
0325
0
250
[依頼講演] 適応的実験計画法に基づく効率的無線システム設計
k_sato
0
180
国際会議ACL2024参加報告
chemical_tree
1
360
文化が形作る音楽推薦の消費と、その逆
kuri8ive
0
210
Weekly AI Agents News! 11月号 プロダクト/ニュースのアーカイブ
masatoto
0
220
Poster: Feasibility of Runtime-Neutral Wasm Instrumentation for Edge-Cloud Workload Handover
chikuwait
0
230
[ECCV2024読み会] 衛星画像からの地上画像生成
elith
1
920
The Relevance of UX for Conversion and Monetisation
itasohaakhib1
0
120
snlp2024_multiheadMoE
takase
0
470
20241115都市交通決起集会 趣旨説明・熊本事例紹介
trafficbrain
0
750
秘伝:脆弱性診断をうまく活用してセキュリティを確保するには
okdt
PRO
4
780
Featured
See All Featured
Building Applications with DynamoDB
mza
91
6.1k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Navigating Team Friction
lara
183
15k
How To Stay Up To Date on Web Technology
chriscoyier
789
250k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
45
2.2k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Music & Morning Musume
bryan
46
6.2k
Git: the NoSQL Database
bkeepers
PRO
427
64k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
132
33k
KATA
mclloyd
29
14k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
170
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
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