Yahoo!スポンサートーク by @__sakito__ さん
社員
- 社員6611人
- エンジニア 2600人
- デザイナー 400人
- 100以上のサービス
働き方
- フリーアドレス
- どこに誰がいるかわかるシステムが構築されている
- 1on1
- Hack Day
- ヤフーミーティング
- 食堂・カフェ
- 保育園
フロントエンド
- React, Vue, Angular, jQuery, Backboneなどなど
- まとめブログがあります
- Yahoo! TechConference 2019
- イベント
- フロントエンドランチ会
- LT会
- もくもく会
- 採用募集
- 日本全国募集しています
読みやすいコードの書き方のススメ by @hmktsu さん
読みやすいコード
- 他の人と一緒に作業するときに流れが理解しやすい
- 久しぶりに触るときに迷わない
eslint-config-airbnb
- 素のESLINTよりも厳しい
- 誰が書いても似たような感じになる
VSCodeのプラグインで保存時に自動整形
DEFAULTPROPS
propsの初期値を設定しておけばVSCodeでマウスオーバーすると教えてくれる
importの整理
- package.jsonのnameをつける
- nameがルートのエイリアスになる
その他
- コンポーネントを返すメソッドをJSX内に書かない
- アセットを一元管理する
React HooksとReduxとProxy by @dai_shi さん
React Hooks
function componentsですべて完結する仕組み
出てくると言われてから時間がかかった
React Hooks好きすぎてライブラリをたくさんつくりました
Redux
Reduxは独立したライブラリ。本質的には99行程度
React ReduxはReactに依存したライブラリ
React Hooksによって代替ライブラリが登場
- Reduxを使わずにhooksで似たようなことを実現するライブラリ
- など
作るにあたって
- Redux Storeを作成
- 素朴な実装だと関係ないコンポーネントがレンダリングされる問題に対応したい
- 変更検知問題
- selector
- memoization
- auto-detect
- これを採用した
- Proxy
- オブジェクトの操作をフックすることができるのでどの部分が操作されたか検知できる
react-hooks-easy-reduxを作りました。
v0.8.0はすごく遅かった(8.37fps)が、ボトルネックになっていたライブラリの作者とともにボトルネックの改善をして39fpsくらいになった
ちょっと先のReact by @koba04 さん
reactjs/ja.reactjs.org
新しい日本語ドキュメントプロジェクトが立ち上がっているので興味ある方はぜひ。
（ライブコーディング）
- class componentsをfunction componentsに書き換え
- SuspenseでのLoading callback埋め込み
- Lazyロード
- useCallback(func, [...obj])で、useCallback(func, [])にすると1度しか動かない
- [...obj]に変更があったときにfuncが呼ばれるため
APOLLOとREACTを使ったアプリケーション設計 by @about_hiroppy さん
- GraphQL
- Apollo
- apollo-link-state
Apollo
GraphQLプラットフォーム
-
一部がOpen Sourceとして無料で提供されている
- Apollo Server
- Apollo Client
- JavaScript
- Native Mobile
- Apollo Links
- ...
GraphQL Gatewayみたいなもの……？
apollo-link-state
ローカルデータをapollo clientで管理して、GraphQL query/mutationでアクセスする
redux vs apollo
- fetchのフラグ管理が楽
- 部分更新が簡単
- バケツリレーが起きない
- 何が必要かわかりやすい
- リモートとローカルを同一コンポーネントで表現できる
- 複雑な処理を書くのはあまり向いていない
まとめ
- apollo はエコシステム含め充実している
- ...
- ...
どうにも疲れているようで後半理解しきれなかった……orz