Gyazoのフロントエンドから煩悩を取り払えているのか
こんにちは
京都大学工学部情報学科5回生
Nota Incでアルバイトをしています
最近オフィスリニューアルしました
いつでも遊びに来てください
近況
SW-3377-1978-8675
来週末 builderscon で話すので来てください
（イカのやり過ぎで資料出来てない！！！！！！！！！！）
今日のトーク
Gyazoのフロントエンドの変遷を振り返りつつ、現在のGyazoのフロントエンドの構成やツーリングを紹介
Gyazo
スクリーンショット共有ウェブサービス
Androidアプリ出ました
Gyazo基本設計
Rails
先日 Rails 5.1に上げた
MongoDB
> 「サービスが失敗したらMongoDBの勝ち、成功したらRDBMSの勝ち」
React
今は v15.5.4
on GCP
Gyazoフロントエンドの基本コンポーネント
すべての画像
コレクション
画像個別ページ
関連画像
ドロー
2015年末〜 作り直した
メタデータ
コメント
今は廃止されている
設定画面・その他
ユーザー設定画面
ランディングページ etc
こういう状態
tree.
├── app
│ ├── actions
│ ├── components
│ │ ├── InductionPopups
│ │ ├── ads
│ │ ├── alert
│ │ ├── board
│ │ │ └── header
│ │ ├── captures
│ │ ├── collection
│ │ ├── draw
│ │ ├── explorer
│ │ │ ├── header
│ │ │ ├── main
│ │ │ ├── overlay-side
│ │ │ │ └── Page
│ │ │ └── side
│ │ ├── grid
│ │ │ ├── card
│ │ │ └── operations
│ │ ├── header
│ │ ├── image
│ │ │ └── renewal
│ │ │ ├── Share
│ │ │ └── ads
│ │ ├── mixins
│ │ ├── pro
│ │ ├── search-result
│ │ ├── sessions
│ │ ├── settings
│ │ │ ├── UserInfoTable
│ │ │ └── mfa
│ │ └── user
│ ├── layouts
│ ├── lib
│ │ └── units
│ ├── models
│ ├── routes
│ │ └── lib
│ └── stores
└── test
├── components
├── lib
├── stores
└── support基本作戦
規模がそんなに大きくないので、ツールも依存もどんどん入れ替えてアップデートしていく
$ find . -path ./node_modules -prune -o -name '*.js' | wc -l //=> 332 npm moduleのアップデートは月2回くらい？
決まった周期はなくて気持ちが高まった時にやってる
yarn-outdated-formatter 便利フレームワーク遍歴
〜backborn時代
Angular時代
React時代
初期
現在
Angular時代
Angular導入 2014年3月〜
jQueryUIから移行
しかし天下は長く続かず……
React襲来
React初導入 2015年1月
ちょうど1ヶ月前に なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita が出た
ちょうど画像一覧ページのリニューアルをしていた
検索機能の強化
angular-react
2015年2月 画像ページ・画像一覧ページ 脱Angular完了
Component / Storeでデータをやりとり
React現在
Flux like style: Component / Action / Store Dispatcher
build
bower + npm → npm
Grunt→gulp
asset pipelineでJSのbuildをしていたのを捨てた（2014年12月）
browserify /w babel
Coding Style
vanilla JS → CoffeeScript → vanilla JS /w ES2015〜
RailsがCoffeeScriptだったが、2015年4月末にBabel導入→2015年11月にCoffeeScriptを依存から削除
Arrow Functionが入った辺りで機運が高まった
Coffee ScriptのArrow Function便利だったよね
decaffeinateでざっくり変換して、手で微調整
jshint→standard → eslint
flowを利用するにはstandardを捨てる（or
standard-flow を利用する）必要があったJS書く人が増えて少し細かい設定をしたくなってた
eslint-config-standard と eslint-config-standard-jsx をルールのベースにして、少しだけ手を入れて使ってるflow
意外と入れてみると困りもなく、サクサク使えてて便利
flowtype/flow-typedに無いmoduleも結構あるが、気合いでやっていってる
慣れるとシュッと書ける
素振りにもなる
導入早々、ReactDOMの第3引数を使っているところがあったが、flowが第2引数までしか予見してなかったのでPR
babel-plugin-flow-react-proptypes でflowのtypeをReactのProptypeに変換してる今後やりたいこと・その他
Scrapboxと良い作戦あったらお互い情報交換・輸出入してやってる
Scrapboxはサーバサイドも全部JSでやってる
D&Dアップロード
PhantomJSをHeadless Chromeに移行したい
PhantomJS捨てたい
やってみた人とかいますか？
Reactのテストをもう少しやっていく
airbnb/enzyme
gulpを整理 → ゆくゆくは捨てたい
npm scriptsに寄せたい
rollup (rollupify) 導入しようとしたが力尽きた