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/ja
https://gyazo.com/70eaf2a9fa84be17891b599610dae3d3
Androidアプリ出ました
https://gyazo.com/b2506d5b6809cc505cd3234be9a40db6
https://play.google.com/store/apps/details?id=com.notainc.gyazo
Gyazo基本設計
Rails
先日 Rails 5.1に上げた
MongoDB
「サービスが失敗したらMongoDBの勝ち、成功したらRDBMSの勝ち」
http://opendatabaselife.blogspot.jp/2014/03/mysqlredismongodbredshift.html
React
今は v15.5.4
on GCP
Gyazoフロントエンドの基本コンポーネント
画像一覧
すべての画像
コレクション
画像個別ページ
関連画像
ドロー
2015年末〜 作り直した
ReactとCanvasでお絵かき機能を作った話 #kyotoasterisk - ぱすたけ日記
お絵かき体験向上作戦 #kyotojs - ぱすたけ日記
メタデータ
コメント
スポットコメントで画像の楽しい場所を伝えよう - Gyazo Blog
今は廃止されている
設定画面・その他
ユーザー設定画面
ランディングページ 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便利
更新が必要なnpmパッケージを可視化する - Hatena Developer Blog
フレームワーク遍歴
〜backborn時代
Angular時代
React時代
初期
現在
Angular時代
Angular導入 2014年3月〜
jQueryUIから移行
しかし天下は長く続かず……
React襲来
React初導入 2015年1月
ちょうど1ヶ月前に なぜ仮想DOMという概念が俺達の魂を震えさせるのか - Qiita が出た
ちょうど画像一覧ページのリニューアルをしていた
検索機能の強化
IvySearch: かすかな記憶から画像を探せる連想検索 - Gyazo Blog
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
Flow練習した - hitode909の日記
意外と入れてみると困りもなく、サクサク使えてて便利
flowtype/flow-typedに無いmoduleも結構あるが、気合いでやっていってる
慣れるとシュッと書ける
素振りにもなる
導入早々、ReactDOMの第3引数を使っているところがあったが、flowが第2引数までしか予見してなかったのでPR
ReactDOM takes optional callback in 3rd argument by pastak · Pull Request #4061 · facebook/flow
babel-plugin-flow-react-proptypes でflowのtypeをReactのProptypeに変換してる
https://github.com/brigand/babel-plugin-flow-react-proptypes#example
今後やりたいこと・その他
Scrapboxと良い作戦あったらお互い情報交換・輸出入してやってる
Scrapboxはサーバサイドも全部JSでやってる
D&Dアップロード
PhantomJSをHeadless Chromeに移行したい
PhantomJS捨てたい
やってみた人とかいますか?
Reactのテストをもう少しやっていく
airbnb/enzyme
gulpを整理 → ゆくゆくは捨てたい
npm scriptsに寄せたい
rollup (rollupify) 導入しようとしたが力尽きた