Gyazoのフロントエンドから煩悩を取り払えているのか
/icons/pastak.icon Pasta-K at KyotoJS vol 13 こんにちは
京都大学工学部情報学科5回生
Nota Incでアルバイトをしています
https://gyazo.com/422954eb4591d345c7d507cae73748ae
https://gyazo.com/f9978eca58ad6b127f694093bc8e3c39
最近オフィスリニューアルしました
いつでも遊びに来てください
https://gyazo.com/2cffca844ea36b5ab3f00e1e96909a67
https://gyazo.com/64a0049531a41915595deebbbbfb2622
近況
SW-3377-1978-8675
https://gyazo.com/3e69fa624504a46ff1ff836043559742
来週末 builderscon で話すので来てください
https://gyazo.com/72786d497b34e98a62b4193cc5385d67
（イカのやり過ぎで資料出来てない！！！！！！！！！！）
今日のトーク
Gyazoのフロントエンドの変遷を振り返りつつ、現在のGyazoのフロントエンドの構成やツーリングを紹介
Gyazo
スクリーンショット共有ウェブサービス
https://gyazo.com/70eaf2a9fa84be17891b599610dae3d3
Androidアプリ出ました
https://gyazo.com/b2506d5b6809cc505cd3234be9a40db6
Gyazo基本設計
Rails
先日 Rails 5.1に上げた
MongoDB
「サービスが失敗したらMongoDBの勝ち、成功したらRDBMSの勝ち」
React
今は v15.5.4
on GCP
Gyazoフロントエンドの基本コンポーネント
すべての画像
コレクション
画像個別ページ
関連画像
ドロー
2015年末〜 作り直した
メタデータ
コメント
今は廃止されている
設定画面・その他
ユーザー設定画面
ランディングページ etc
こういう状態
code: 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月
ちょうど画像一覧ページのリニューアルをしていた
検索機能の強化
angular-react
2015年2月 画像ページ・画像一覧ページ 脱Angular完了
https://gyazo.com/31592ad9ce31f38d280fa267dd5d1318
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) 導入しようとしたが力尽きた