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

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

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

イベント

ライブエクスペリエンス事業部 エンジニアの高松(@shimpeiws)です。

React Conf 2017 現地レポート (1日目)に引き続き、React Conf 2017 2日目の様子をサンノゼの会場から直接お届けします!!!

1日目のセッションの録画がYouTubeにアップされていました!

1日分が1本の動画(8時間25分!)なので見るのに気合がいりますが、 昨日のレポートやスケジュールを見ながら、気になるセッションをぜひチェックしてみてください!

http://conf.reactjs.org/schedule

食事

朝食 + 昼食 + コーヒー・軽食完備です。

ホスピタリティが高い!!!

f:id:shimpeiws:20170315121856j:plain

f:id:shimpeiws:20170315121925j:plain

f:id:shimpeiws:20170315121915j:plain

2日目の感想

ReactVRのセッションから始まったこともあり、1日目と比較すると、よりこれから先の技術にフォーカスされていた印象がありました。

Graph QLでのリアルタイムAPIの構築や、React Storybookによるドキュメンテーションなど、解決しようとしている問題の方向性は違いますが、Reactを使ったプロダクトやチーム開発を一歩先に進めようとする動きだと感じます。

2日間を通して、Reactの開発の中心から、コミュニティの様子・周辺ビジネスまでを肌で感じられた事が、現地にきた一番の収穫でした。

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

Goodbye Flatland! An introduction to ReactVR and what it means for web developers (Michaela Lehr)

概要

  • VRのコンセプトや仕組み
  • ReactVRの概要とコード例
  • UXデザイナーの観点からVRの可能性やその時に考慮すべき事柄について述べられていた
    • “VRはとても魅力的だけど、十分にユーザをケアしてあげなければならない"という観点が終始一貫していた

メモ

  • VRはテクノロジーとの関わり方を変えます
    • Stereoscopic Imagesと、ユーザの回転や移動のセンサリングを合わせることにより、VRは実現される
  • モバイル端末では枠があるが、VRではコンテンツの中にユーザがいる感じ
    • Goodbye, UX metaphor
      • 例えば画像ギャラリーを作るとしても、UX的な抽象は不要で、実際的なギャラリーをVR空間の中に作ることができる
  • ReactVRの概要
    • 光源やUI(ボタンなど)がReactのコンポーネントとして提供されている
    • Flex Boxのレイアウトが使える (flexDirection: 'row' のように)
    • Animated APIがあり、アニメーションがある
  • VRにおけるUXデザイン
    • ユーザの恐怖心をあおってはいけない
    • 正しいスケールを使うこと
    • フレームレートは高く保つこと
    • 固定的をなフォーカス位置を設けること
    • リアル指向よりも抽象的なデザインが良い

Realtime React Apps with GraphQL (Robert Zhu)

概要

メモ

  • 例えばFacebook Messangerやマップなど、変更があった場合にはただちに画面を更新したい
  • リアルタイムなAPIにはPullとPushがある
    • Pull -> ポーリング
    • Push -> Live Query
  • 例えばメールアプリで未読のメッセージをカウントしたい時
    • ポーリング
      • 無駄な通信が多くなってイマイチ
      • 単純でstatelessでプロトタイプやフォールバック用には有用
    • statefullにしてpushすれば最適化できる
      • 重要なメールを受け取った時だけ、メッセージ数をカウントなども可能
  • リアルタイムAPIの設計
    • API Contract
      • なぜpushされたのか、クライアントがセマンティクスを知っていないといけない
    • Subscription Payloads
      • 何をAPIにのせるべきか?
  • GraphQL
    • GraphQLは"Wish Driven Design"
    • クライアントからはレスポンスのキーだけをリクエストする、というのがGraphQLのクエリのイメージ
      • GraphQLが値をセットして返してくれる
  • Demo
    • GraphQLのSubscriptionを使って実装した、メールボックスアプリのデモ
    • コードのイメージとしては以下のような感じだった
const listen = () => {
  const sub = new Subscription();
  sub.subscribe(myCallBack);
}

const myCallBack = (Payloads) => {
  console.info('Callback', Payloads);
}

Jest Snapshots and Beyond (Neehar Venugopal)

概要

  • Dockerのフロントエンドエンジニア
  • JestでSnapshotsを使ってテストをしよう

メモ

  • テストの手法を考えるのが好き
    • 少ない労力でもっとたくさんテストしたいと思っている
    • 2016年からJestを使っている、シンプルで良い
  • Jestで足し算関数のテストを書いてみる
    • watchモードがある
  • Emoji Cinema(inputの入力文字がDBにヒットすると、Emojiの一覧を返すアプリケーション)をどうやってテストする?
    • console.logでemojiを出力してテストコードにコピペするとテストは通るけど…
      • 手動のプロセスが多い
      • 変化に柔軟ではない
      • メンテナンスが辛い
    • そこでSnapshot Testing
      • 足し算関数の例ならば、テストが以下のように書き換わる
        • Before: expect(sum(1,2)).toEq(3)
        • After: expect(sum(1,2)).toMatchSnapShot()
      • ある時点の実行結果をsnapshot(ファイルとして出力される)しておいて、それと同じ結果を得られているかを見る
      • 以下のメリットがある
        • 自動化されたプロセス
        • 変化に強い
        • メンテナンスしやすい
      • Serializeすることもできる
        • expectの形そのままではなく、一定のSerializeのルールに従って変形しておく
      • Componentのテスト
        • react-test-rendererでrenderする
          • expect(component).toMatchSnapshot()
        • Enzyme使えないの? ヒントはSerializers
          • enzyme-to-json/serializer
  • Jestはテストプラットフォーム
  • webpackのconfigをsnapshotでテストする構想がある?

A Beginner’s Guide to Code Splitting Your React App (Neehar Venugopal)

概要

  • モバイルファーストの時代にはパフォーマンスのためにCode Splittingが必用
  • 様々なレイヤー、様々なツールでCode Splittingのアプローチをしていく
  • webpack、React Router、 Dynamic Importなどのツール・技術や、コンポーネントの実装方法など、豊富なアプローチで実践的な手段を提供してくれたが、情報量が多すぎて一度聞いただけでは理解できなかった

メモ

  • なぜCode Splittingするか?
    • システムが巨大になって、Javascriptが大きくなりがち
      • 今はモバイルファーストの時代で特に気をつけるべき
  • Long Term Caching
    • app.jsとvendor.jsで分ける
      • ファイル名のハッシュ
      • max-age: inifinity
  • Reactでどう扱うか?
    • LazyLoadコンポーネントを実装する
      • 実装方法としては…
        • Higher Order Component(+ Generator)
        • storeでキャッシュを解決する
        • staticでキャッシュを解決する
        • パラレルにchildrenをlazy loadする?
    • どのレイヤーでコードsplitする?
      • route level splitting
        • 出力されるコードの重複に気をつけよう
      • Component level splitting
    • Responsive Componentsを作る場合は、以下に気をつける
      • モバイルファーストなデザインであること
      • モバイルファーストのCSSであること
      • モバイルファーストのJSであること
      • PCとSPでのテンプレートの切り分けは3つの方法が考えられる
  • API通信するコンポーネントを作ったら、必ずlazy loadにすべき、というのが持論

Web-Like Development and Release Agility for React Native (Parashuram N)

概要

  • マイクロソフトのエンジニア
  • Mobile CenterとCode Pushの製品を利用して、WebアプリケーションのようにReact NativeのアプリケーションをCI、デリバリーする
  • 途中でわざとアプリケーションをクラッシュさせたり、デモが上手くて製品の魅力が理解しやすかった

メモ

  • React Nativeは JavaScriptのコードをJavaScipt Coreが解釈し、NativeUIを動かし、イベントを受け取る
  • React Nativeのアプリケーションを配布するにはBuild -> Test -> Sign -> Distributeのプロセスを踏む必用がある
    • Mobile Centerはこれらを統合して提供して提供するクラウド環境
      • ビルド
        • プラットフォームを選択肢、言語やフレームワークを選択する(Androidの例だったので、Java/React Native/Xamarin)
        • 新しいアプリケーションの作成も簡単
      • テスト
        • クラウド上でターゲットデバイスを選択して実行できる
        • Native UIからのイベントをPlugin Registryで受け取って、Event Emitterでクラウド上の各種ターゲットデバイスにブロードキャストしている
        • テストをrecordして実行できる、seleniumのように
      • クラッシュレポーティングもある
      • デバッグはnode.js(node-chakracore)で、VS Codeならばデバッガも利用可能
    • Code Push (Mobile Centerにインテグレートされる予定)
      • 端末への更新の仕組み
      • 今後ABテストもここでできるようになる
    • VS Code for React Native
      • TSサポート
      • ReactNative用の各種エクステンション
      • Deployをエディタから可能、デバッガ利用可能
      • タイムトラベルDebuggingもできる

React-Storybook: Design, Develop, Document and Debug your React UI components (Marie-Laure Thuret)

概要

  • React Storybookによるlive documentationの作り方
  • 開発フローの全ての段階をStorybookは有効に機能する

メモ

  • UIコンポーネントはstateによりかかりがちなもの、どうやったらドキュメンテーションできるのか?
  • React Storybookの概要
    • コードの編集が即座にStorybookに適用される
    • onClick={action('onClick')} Storybook側のロガーに出力も出来る
    • currentPage={number('currentPage', 1)}のように書くとStorybook側のKNOBの項目にinputが追加される
    • Descriptionを書くこともできる
  • API First
  • 壊れないドキュメントを作るには?
  • 保守性はどうなの?
    • デバッグと拡張
      • 新しいフィーチャーを書く時にエンドポイントを足していく
      • デバッグしやすい小さな環境
      • 実際のコンポーネントの振る舞いそのままなので、Storybookの段階でバグを発見できることもある
  • 開発フローの全ての段階をStorybookでカバーすることができる
  • Add-OnのためのAPIもある

Extensible React (Cameron Westland)

概要

  • Autodeskのエンジニア
  • Reactを使った拡張可能な(Extensible)アーキテクチャを作りたい
    • ネストしたコンポーネントで、下から上の階層にイベントを伝搬していく仕組みが拡張性を低くしていると考えた
    • react-slot-fill を開発してこの問題を解決しようとしている

メモ

  • Autodeskのエンジニア、AutoCADなどの製品がある
    • UIが非常に複雑
    • 似たようなコンポーネントだがバリエーションの違うものがたくさんある
  • Goal of Extensibility
    • プロダクトを改善できる開発者の数を増やす
  • Slot & Fillを作った話
    • ReactはRootからコンポーネントを階層的にネストさせていく
    • ユーザインタラクションがあったらイベントを上に伝搬させていく、辛いし、拡張しづらくなる
      • 共通の祖先をもっていることが根本の原因
    • Slot & Fillという概念を追加した
      • Slot.Item = <Fill /> みたいに書ける
        • Usage にサンプルあり
      • これによって、Rootからネストする構造を薄く保ち、slotの中に差異を閉じ込めることができる

Taming the Meta-Language (Cheng Lou)

概要

  • Facebookのエンジニア、Reason の開発チーム
  • ReasonのReactバインドの発表(reasonml/reason-react)
  • (かなり控えめに言って)JSの生産性や文法に問題意識をもっていて、Meta-Languageで解決しようという意識を強く感じた

メモ

  • Reasonを開発している
    • Friendly Syntax & Toolchain Powered by OCaml
    • ElmとF#、Clojureから影響を受けている
    • messenger.com の60%はReasonで書かれている
  • ReasonのReactバインドのreason-reactを開発した
    • JavaScriptでの記述との差異をコード例を示しながら解説
      • propTypes -> types
      • JSX -> function
      • classes -> modules
      • cloneElement -> currying
      • setState -> option state
<MyBanner
  name="hello"
  count=5>
  ...
</MyBanner>
MyBanner.createElement
  name::'hello'
  count::5
  children::[...] ()
/* か、ここに同じJSXを書く */
  • コードを書く以外にもmeetupやチュートリアルの整備など、やることがたくさんあった

パネル・QA

  • Reactの開発者2人(片方はSebastian)、React Nativeの開発者、React Nativeの発表をしていたLeland(Airbnb)、Fiberの発表をしていたLin(mozila)の5人でのパネルディスカッション
    • あらかじめ会場から集めておいた質問にパネラーが答える形式
    • スライドなし口頭のセッションだったので、聞き取れない部分が多く、質問のサマリだけです、すみません!
  • Airbnb製のnative-navigationはreact-navigationとどう違うの?
  • Fiberの今後
  • React Nativeの今後
  • Reactコンポーネントは全部Pure Componentで書くべきなの?
  • CSS in JSの今後

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