abcdefGets

ゲッツ!

【RECRUIT Technologies NIGHT vol.5】リクルート流フロントエンド開発 に参加してきた

React / Redux を活用したリクルートテクノロジーズのフロントエンド開発

古川陽介 さん(@yosuke_furukawa)

speakerdeck.com

以下メモ

言いたいこと

フレームワークは作るものに合わせて作る

リクルートのWeb

トップページに検索があり、
検索するとリストビューがでるような一般的なwebサイト

典型的なWebサイト

最近はチャットできたり、
インタラクティブなやつができた。

要望

  • とにかくパフォーマンス
  • NatieアプリっぽいLook & Feel
  • Interactiveな動き(Chat や いいね通知)

これまでのWebフレームワークでは無理

React x Redux x Node でフレームワークを作っている

事例

フロントエンドを作る上でも気をつけていること

  • サーバでもクライアントでもレンダリングする
  • Historyを壊さない
    • 戻る・進むで状態を壊さない
    • 戻る・進む中にはレンダリングスキップする
  • Consumer Driven Contract
    • 従来バックエンドが決めていたAPIの仕様をフロントエンドが手動して要求を書く
    • フロントエンドが使いやすいAPIになる。

【翻訳】リッチなWebアプリケーションのための7つの原則 - from scratch

フロントエンドエンジニアが React Native を触ってみた話

90%ほどiOS/Androidで共有できる
Hot/Live Reloadingが早い

疑似要素が使いたい
疑似要素は無理

shorthandも使えない

cssがちょっと違和感があるので戸惑うかもしれない。

iOS/Androidの違い

プラットフォーム毎にUI/UXのベストプラクティスは違う

iOS/Android

  • Platform.OSで分ける
  • ファイル自体を分ける

何故ReactNativeなのか

  • ユーザー数の多いアプリで採用されている
  • Webとのコード共有ができる

ReactNativeアーキテクチャ

WebのReactをつかったこと Objc,Javaの知識は今の所必要なしに使える。

ReactNativeは想像以上に良さそうだった。
簡単なアプリならWebの延長で作れそうでよい!
是非取り入れて評価してみたい。

リクルートのフロントエンド改革に挑んだ話

太田さん

前提

外注がZip納品して、SvnでBackendが開発されている

フロントエンドがViewを見れないので、CSSの影響調査をすることができない

というまあひどい状況

改革

SIerの意識改革の話。
保守的なエンジニアのやり方を変えるにはどんなものでもいいから定量的な指標が必要で、
たとえ、LOC(Lines of codes 要はコード行数)であれ、前提あれば指標にするしかない。
でなんとかやり方の改革に成功した話。

エンジニアは保守的な人が多いのはまあ結構思う。
ただ、論理的に何%良くなったとか、定量的な指標をしっかり準備しておけば、説得できる人も多いのは確かだなと思ったし、
これはとても参考になる。

成長

バックエンド寄りのフロントエンドの人がCSSを学習するのは早いけど、
フロントエンド寄りの人がバックエンドを学ぶのはやはり時間がかかる。

きちんとした学習コンテンツを用意すべきだった。

ここはかなり同意。
ただ、学習コンテンツがどんなものか、どう動機づけするかがかなりの課題だなと思う。

まとめ

リクルートテクノロジーズさんは、というかリクルートさんは結構外注が多いイメージだったが、
内部でもかなり進んだことにチャレンジしていたっていう印象を受けた。
特にReactNativeのところは今の業務にも活かしていきたい(難しいけど)
全体的に実りのある勉強会だったなぁ。