Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
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
LLM時代にLabは何をすべきか聞いて回った1年間
hargon24
1
520
EBPMにおける生成AI活用について
daimoriwaki
0
220
marukotenant01/tenant-20240826
marketing2024
0
520
VisFocus: Prompt-Guided Vision Encoders for OCR-Free Dense Document Understanding
sansan_randd
1
310
LiDARとカメラのセンサーフュージョンによる点群からのノイズ除去
kentaitakura
0
160
システムから変える 自分と世界を変えるシステムチェンジの方法論 / Systems Change Approaches
dmattsun
3
890
Weekly AI Agents News! 11月号 論文のアーカイブ
masatoto
0
130
Embers of Autoregression: Understanding Large Language Models Through the Problem They are Trained to Solve
eumesy
PRO
7
1.2k
20241115都市交通決起集会 趣旨説明・熊本事例紹介
trafficbrain
0
610
熊本から日本の都市交通政策を立て直す~「車1割削減、渋滞半減、公共交通2倍」の実現へ~@公共交通マーケティング研究会リスタートセミナー
trafficbrain
0
170
The Fellowship of Trust in AI
tomzimmermann
0
150
Introducing Research Units of Matsuo-Iwasawa Laboratory
matsuolab
0
1.2k
Featured
See All Featured
Building Adaptive Systems
keathley
38
2.3k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
Site-Speed That Sticks
csswizardry
1
150
Building Your Own Lightsaber
phodgson
103
6.1k
Into the Great Unknown - MozCon
thekraken
33
1.5k
Navigating Team Friction
lara
183
15k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Being A Developer After 40
akosma
87
590k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
27
2.1k
Optimizing for Happiness
mojombo
376
70k
Making Projects Easy
brettharned
116
5.9k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
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