React Conf 2017

1. fiber
2. native-navigation
3. subscription & live-query
4. react-storybook
5. create-react-native-app
6. react-router v4
7. react-vr
8. reason
9. prettier

One React Community

Fiber

前情提要

• 源自於 2014 年開始的研究，已超過兩年以上
• React v16 會搭載 Fiber
• 可以在 beta.facebook.com 使用看看 Fiber 的 Facebook
• Fiber 99% ready

The goal of React Fiber is to increase its suitability for areas like animation, layout, and gestures. Its headline feature is incremental rendering: the ability to split rendering work into chunks and spread it out over multiple frames.

• 雖然幾乎是核心重寫，但 reconciliation 的 high level 演算法本身差異不大，重點在於 render 的 stack 與 scheduling

We need to be able to

• pause work and come back to it later.
• assign priority to different types of work.
• reuse previously completed work.
• abort work if it's no longer needed.

A Fiber

• A virtual stack frame
• A unit of "work"
• Pausable / Prioritizable / Memoizable / Abortable

Stack Frame vs Fiber

priorities

• SynchronousPriority: 1, // For controlled text inputs. Synchronous side-effects.
• TaskPriority: 2, // current tick.
• AnimationPriority: 3, // before the next frame.
• HighPriority: 4, // Interaction that needs to complete pretty soon to feel responsive.
• LowPriority: 5, // Data fetching, or result from updating stores.
• OffscreenPriority: 6, // Won't be visible but do the work in case it becomes visible.

From renderers/shared/fiber/ReactPriorityLevel.js

Scheduling

• 依靠 requestAnimationFrame, requestIdleCallback 來達成
• Fiber 有實作了 requestIdleCallback 的 polyfill

Note

• component 可以 return array, number, string
• component will update 可能會被 call 不只一次
• 未來

setState({});

可能會被拿掉，用 functional setState:

this.setState((state, props) => { return {}; });

Reference

• Lin Clark - A Cartoon Intro to Fiber
• Andrew Clark: What's Next for React
• react-fiber-architecture
• react-fiber-resources
• How React Fiber Works
• Fiber Principles: Contributing To Fiber

Navigation

• as a hard react native problem

Native vs JS based navigation

內建

• NavigatorIOS (只支援 iOS，所以不太有用)
• Navigator (效果差，State 不好處理)
• NavigationExperimental (deprecated)

第一戰

• react-native-router-flux - 原本基於 Navigator，後來基於 NavigationExperimental
• ex-navigator - 基於 Navigator
• ex-navigation - 基於 NavigationExperimental

接著戰

• 一堆大咖
• react-community/react-navigation
• wix/react-native-navigation
• airbnb/native-navigation
• ReactTraining/react-router-native

Polling & Live Query && Subscription

Polling

Polling

• pull
• easy to maintain (simple, stateless)
• latency

Polling Frequently

Polling Frequently

• not efficient

Live Query

Live Query

• push
• listen every state change
• you dont know why state changed
• facebook 有在公司內部實驗 @live directive

Subscription

Subscription

• push
• event based subscription
• you know why state changed exactly

GraphQL Subscription

• The next step for realtime data in GraphQL
• Merged: [RFC] GraphQL Subscriptions

相關實作

• graphql-subscriptions - implements GraphQL subscriptions for Node.js
• subscriptions-transport-ws - Websocket transport and server

相關實作 (Relay)

• graphql-relay-subscription - Relay subscription helpers for GraphQL.js
• relay-subscriptions - Subscription support for Relay

react-storybook

• airbnb/react-dates

• addon 介紹

• storybook-addon-knobs - 動態調整 props
• storybook-addon-links - 連結到另一個 story
• storybook-addon-specifications - 在 story 旁寫測試並顯示結果到 UI
• storyshots - 用 story 產生 jest snapshot

storybook-addon-knobs

storybook-addon-specifications

storyshots

create-react-native-app

Introducing Create React Native App

With Create React Native App, there’s no need to use Xcode or Android Studio, and you can develop for your iOS device using Linux or Windows. This is accomplished using the Expo app, which loads and runs CRNA projects written in pure JavaScript without compiling any native code.

create-react-native-app project

沒什麼特別意外的指令：

yarn run ios
yarn run android
yarn test

yarn start

不需要 iOS、Android 開發環境，只要 Mobile Device

掃描 QR Code 直接在 Expo Client 開啟：

Exponent 改名 Expo

• Facebook 以外最大的 React Native 專業團隊
• Expo SDK，包括 Accelerometer, Amplitude, AppLoading, Art, Asset, Audio, BarCodeScanner, BlurView, Constants, Contacts, Facebook, Font, GLView, Google, Gyroscope, ImagePicker, KeepAwake, LinearGradient, Location, MapView, Notifications, Permissions, Segment, Svg, takeSnapshotAsync, Util, Video 等 API

需要安裝或修改 Native ?

yarn run eject

React Router v4

• Monorepo with Lerna v2
• Can use in Anywhere includes VR (MemoryRouter)
• README
• Egghead - Add routing to React apps using React Router v4
• Example
• API Docs

React VR

• Phone & Gear VR headset
• style with CSS-in-JS approach
• UX
• Official Docs
• 重點應該在今年 F8 有 8 個 VR topic

Reason

• dessign a new meta language
• 參考了 Elm, F#, Clojure
• 可以解決語言層面才能解決的問題
• 不需要 linter, prettier
• early stage
• 25% of messenger now built with reason

稍微調一下還是能寫 jsx

• 用 npm 安裝 reason

git clone https://github.com/reasonml/ReasonProject.git
cd ReasonProject
npm install

• reason-react 的文件
• 或是廢話不多說直接看範例：reason-react-example

prettier

PR for React

這個就不說了，現在不裝都不想寫 code 了

End