Akatsuki Hackers Lab | 株式会社アカツキ（Akatsuki Inc.)

Akatsuki Hackers Labは株式会社アカツキが運営しています。

React Conf 2017 現地レポート (1日目)

イベント

ライブエクスペリエンス事業部 エンジニアの高松(@shimpeiws)です。 2017/3/13 ~ 14の期間で開催中のReact Conf 2017に参加するためにサンノゼに来ています。

React Conf 2017

つい数時間前に終わったばかりの1日目のレポートを現地からお送りします!

会場の様子

サンノゼ空港近くのSanta Clara Marriottというホテルでの開催です。
インテル博物館がほど近くにあり、IT系企業が多くある地域のようです。

f:id:shimpeiws:20170314072356j:plain

f:id:shimpeiws:20170314072257j:plain

f:id:shimpeiws:20170314072402j:plain

1日目の感想

実際に運用してえられた知見に基づいた実践的な内容が多い一日でした。

全体を通してパフォーマンスの話題が多かったことが印象に残りました。

React Nativeもあり、アニメーションや高度なインタラクションの実現がReactに求められていることが背景にありそうです。

Sebastian Markbageさんのキーノートが特に象徴的でしたが、 SPAの構築でもinitial viewを意識したchunk化やキャッシュの利用などといった、 きめ細やかな設計・実装をすることによってUXのレベルを上げようとする流れを感じました。
実装は、大変になりますね…

個人的には“Next.js: Universal React Made Easy and Simple"の発表が興味深かったです。

Next.jsは"SSRできる環境を簡単に用意できるもの"程度の理解でしたが、 prefetchやオフラインcacheの機構などもあるようで、
これからのWebの要素がちりばめた非常に挑戦的なライブラリだと感じました。

ここからは各セッションの概要とメモです。

セッションは全てストリーミングされ、録画もされているそうなので、録画が後日公開されると思います。
気になるセッションがあれば、後日録画でチェックしてください!!!

Keynote (Tom Occhino, Jing Chen, Sebastian Markbage)

概要

  • FacebookのReactに関わる3人のスピーカーからのキーノート

Tom Occhino

  • 3度目のReact Conf
  • ReactやReact Native、それを支えるコミュニティも非常に大きくなってきた
  • これからもReactを進化させ、革新させていく

Jing Chen

  • Facebookでは多くのアプリでReact Nativeを使っている
  • Facebook Ads ManagerなどでReact Nativeを使ってきたが、Facebook本体のアプリでも部分的にReact Nativeに移行している
  • React Nativeは最初はWeb Viewのリプレイス、次に更新頻度が多いView、View全体へと適用してきた
  • Cross Platform、 Cross Appでも使えると思っている
  • React Nativeを使って、フィードバックしてほしい。コミュニティを育てていきたい

Sebastian Markbage

  • “React Performance End-to-End” というタイトル
  • Reactでの実装は実際に描画されるまでのステップが多く、ボトルネックを生みやすい (Network -> Parse -> Compile -> Heap Init -> Render)
  • それぞれのステップで最適化させていこう
    • Network
      • Initial Viewに欲しいものだけ取得する、 Lazy Loading
      • キャッシュの活用(Service Workerの活用も含む)
      • P2Pの利用
      • Shared Distribution(Shared Versioning, CDN)
    • Parse -> Compile
      • Cache Artifacts(Butecode/Codegen Cache, AOT Compilation)
    • Heap Init
      • Compile(Constant Folding, Heap Snapshoting)
    • Render
  • NetworkはIO、それ以降はCPUボトルネックになる。断片化(Chunk)を軸に最適化していくことができる
    • Networkは時間がかかるので初期に必要な分の取得が完了したら、Prase以降の段階にかかる。
    • ユーザの行動をブロッキングするタイミングが減るので、UXの向上が見込める
    • レンダリングも断片化できる
    • Gestures / Animation -> Tap / Click -> Network / Timer -> ユーザに見えていない部分の更新、の順に早いレスポンスが求められる

A Cartoon Intro to Fiber (Lin Clark)

概要

  • Code CartoonsのLin Clarkさんの発表
  • Reactのアルゴリズムの再実装であるFiberの仕組みをイラストで説明する内容
  • わかりやすい、はずだが、自分のFiberや既存のReactのアルゴリズムの知識がたりないため、あまり理解できず…

メモ

  • 二段階のPhaseがある
    • Phase1 (render / reconciliation)、中断可能
    • Phase2 (commit)、中断不可能
  • priorityがあり、各priority毎にRenderが繰り返される

Next.js: Universal React Made Easy and Simple (Guillermo Rauch)

概要

メモ

  • シンプルかつ、パワフルで動的なリアルタイムアプリケーションを作りたい
    • Universalなプログラミングモデル(React)と言語(JS)を使って実現したい
    • Next.jsのサンプルとしてHacker Newsを真似たHacker Nextを作った
    • zeit.coは1年間 Next.jsで運用されている
  • Next.jsの原理やパターン、将来的な方向性を示す
    • 自動的にCode Splittingする
      • minimalな"設定より規約"の精神で設計されている
        • ./pages 配下に各エンドポイント毎のリソースを置く
        • トップレベルコンポーネントは独自に定義された “getInitialProps” というライフサイクルメソッドでデータを取得する
      • Code splittingはSPA症候群(トップページでJSの全てのモジュールを読み込むこと)を解決する

React + ES.next = ♥ (Ben Ilegbodu)

概要

  • ES2015やES.nextのフィーチャーを有効活用し、Reactのコードをもっと上手く書こうというTips集的な内容
  • ES5に慣れた人には良い資料になりそう
  • 発表の冒頭で全員立ち上がってスクワットタイムがあったり、GIFアニメーションを多用したスライドがオーディエンスをつかんでいた

メモ

Desctucturing(分割代入)

  • let {comments} = this.state みたいに書ける
  • 名前付き引数に使える
function MyComponent({children, style}) {
  return (
      <div style={style}>{children}</div>
    )
}

Spread Operator

ArrayやObjectを...fooで展開できる

let {comments} = this.state
let newComment = {...comment, id: 123}
let newComments = [...comments, newCOmments]

applyがいらなくなる

Math.max(...arrayOfValues) // ES2015
Math.max.apply(null, [1,2,3]) //ES5

objectに関して、_.assign もいらなくなる

Arrow Functions

.bind(this) が省ける

Promises

Fetch APIとPromiseのコード例 メソッドチェーンしやすくて良い

Async Functions

async/awaitキーワード

MobX vs Redux: Comparing the Opposing Paradigms (Preethi Kasireddy)

概要

  • MobxとReduxを比較しながら、それぞれの使い所を解説する内容
  • Mobxに関してかなり弱気な雰囲気だった

メモ

  • ReduxもMobxもstate managementのライブラリ
    • ReduxはFluxアーキテクチャの実装、storeはピュアなJS Objectで、Reduerで分割する
    • MobxはStoreがRxで、Viewの該当要素をobserveしている
  • 学習コストの低さ、凝縮性(ドメインクラスが作れるから)はMobxの方が優れている
  • スケーラビリティと保守性の良さ、テスタビリティなどはReduxの方が優れている
  • シンプルなもの、スモールチームでの開発、プロトタイプにはMobxがオススメ
  • 複雑なものにはReduxが良い

Type Systems Will Make You a Better JavaScript Developer (Jared Forsyth)

概要

  • Khan Academyのエンジニアによる、“Flowはいいぞ"という話
  • ReactのProptypesをランタイムの型定義として捉えているのが新しい視点で新鮮だった

メモ

  • JSでデバッグしていて、何でエラーになってるのかわからない時や、逆に何で動いているのかが分からないときがままある
  • もっと型エラーが出て欲しい
  • ツールとしては以下のような分類だが、Static type checkingがオススメ
    • linters
    • チェックツールを作る
    • 実行時の型チェック(ReactのProptypesもこれに含む)
    • Static type checking (Flow)
  • 特にstateに型を書くと不正な状態を防げるので、stateは型を先に書くのがオススメ

React Native in the “Brown Field” (Leland Richardson)

概要

  • Airbnbでは2015年からReact Nativeを試して、2016年からProductionでも利用を開始した
  • Airbnbで開発し、OSS化したnative-navigationを使ったコード例を示しながら、クロスプラットフォームのアプリケーションの実装例を解説していた
  • タイトルのBrown FieldはGreen Fieldの対義として使っているようで、既存のネイティブアプリケーションとReact Nativeを同居させるイメージだと思われる

メモ

  • 2015年の発表後、すぐにReact Nativeを個人的に使い始めた
  • 2016年にはAirbnbとしてもReact Natibeに取り組み始めて、Productionにもリリースした
  • アプリ内ではSwift / Javaのネイティブアプリケーション用のコードと共存しているが、まだJSの割合は少ない
  • ナビゲーションバーやタブ、トランジションなどはプラットフォーム固有の部分が多く共通化するのが難しい
    • 既存のライブラリもたくさんあるが、自社で独自に開発してOSS化した

Moving Beyond Animations to User Interactions at 60 FPS in React Native (Tal Kol)

概要

  • React Nativeはラスト1マイルをこえられるのか?が大きなテーマだ
  • React Nativeにとってのラスト1マイル = 60FPSを常に出せるなめらかなアニメーションの実現で、ネイティブらしいmimic realityを演出するのに必須な要素である
  • react-native-interactable にサンプルがある

メモ

  • React Nativeはラスト1マイルをこえられるのか?
    • 手軽に素早く作れるのは分かるが、ネイティブを本当に置き換えられるのか?
    • そのためには以下2点が必須
      • 60FPSでぬるぬる動くアニメーション
      • mimic realityを与える、ダイナミックなインタラクション
        • inboxの行スライドや、Tinderライクなswipeなどを例にだしていた
    • これらをJSでつくれるのか?
      • 実際的には多少のNativeのスキルセットも必要になる
  • Declarative API(宣言的なAPI)がラスト1マイルを渡りきる鍵になる
    • ユーザインタラクションにとっての宣言的なAPIとはどのようなものか?
    • horizontal / verticalなどの例を示しながら、宣言的なAPIについて解説
    • native driverを書けば初期化の時に宣言的にすれば、ユーザインタラクションでいちいちブリッジしてやりとりする必用がなくなりパフォーマンスが出る
  • Enrich API
    • 豊かな動きを演出する重力や磁石などの効果のAPI設計について解説

ライブエクスペリエンス事業部では一緒にReactで開発してくれる仲間を募集しています!!!