【RECRUIT Technologies NIGHT vol.5】リクルート流フロントエンド開発 に参加してきた
React / Redux を活用したリクルートテクノロジーズのフロントエンド開発
古川陽介 さん(@yosuke_furukawa)
以下メモ
言いたいこと
フレームワークは作るものに合わせて作る
リクルートのWeb
トップページに検索があり、
検索するとリストビューがでるような一般的なwebサイト
典型的なWebサイト
最近はチャットできたり、
インタラクティブなやつができた。
要望
- とにかくパフォーマンス
- NatieアプリっぽいLook & Feel
- Interactiveな動き(Chat や いいね通知)
これまでのWebフレームワークでは無理
React x Redux x Node でフレームワークを作っている
事例
フロントエンドを作る上でも気をつけていること
- サーバでもクライアントでもレンダリングする
- nginxのCacheDirの保存
- Above the foldのみレンダリング
- Historyを壊さない
- 戻る・進むで状態を壊さない
- 戻る・進む中にはレンダリングスキップする
- Consumer Driven Contract
【翻訳】リッチなWebアプリケーションのための7つの原則 - from scratch
フロントエンドエンジニアが React Native を触ってみた話
90%ほどiOS/Androidで共有できる
Hot/Live Reloadingが早い
疑似要素が使いたい
疑似要素は無理
shorthandも使えない
cssがちょっと違和感があるので戸惑うかもしれない。
プラットフォーム毎にUI/UXのベストプラクティスは違う
- ナビゲーション
- ハンバーガー・タブ
Platform.OS
で分ける- ファイル自体を分ける
何故ReactNativeなのか
- ユーザー数の多いアプリで採用されている
- Webとのコード共有ができる
ReactNativeアーキテクチャ
WebのReactをつかったこと Objc,Javaの知識は今の所必要なしに使える。
ReactNativeは想像以上に良さそうだった。
簡単なアプリならWebの延長で作れそうでよい!
是非取り入れて評価してみたい。
リクルートのフロントエンド改革に挑んだ話
太田さん
前提
外注がZip納品して、SvnでBackendが開発されている
フロントエンドがViewを見れないので、CSSの影響調査をすることができない
というまあひどい状況
改革
SIerの意識改革の話。
保守的なエンジニアのやり方を変えるにはどんなものでもいいから定量的な指標が必要で、
たとえ、LOC(Lines of codes 要はコード行数)であれ、前提あれば指標にするしかない。
でなんとかやり方の改革に成功した話。
エンジニアは保守的な人が多いのはまあ結構思う。
ただ、論理的に何%良くなったとか、定量的な指標をしっかり準備しておけば、説得できる人も多いのは確かだなと思ったし、
これはとても参考になる。
成長
バックエンド寄りのフロントエンドの人がCSSを学習するのは早いけど、
フロントエンド寄りの人がバックエンドを学ぶのはやはり時間がかかる。
きちんとした学習コンテンツを用意すべきだった。
ここはかなり同意。
ただ、学習コンテンツがどんなものか、どう動機づけするかがかなりの課題だなと思う。
まとめ
リクルートテクノロジーズさんは、というかリクルートさんは結構外注が多いイメージだったが、
内部でもかなり進んだことにチャレンジしていたっていう印象を受けた。
特にReactNativeのところは今の業務にも活かしていきたい(難しいけど)
全体的に実りのある勉強会だったなぁ。