React Conf 2017

React Conf 2017 === - [Day 1](http://conf.reactjs.org/schedule/day1) - [Day 2](http://conf.reactjs.org/schedule/day2) - [Videos](https://www.youtube.com/playlist?list=PLb0IAmt7-GS3fZ46IGFirdqKTIxlws7e0) --- 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](https://beta.facebook.com/) 使用看看 Fiber 的 Facebook - [Fiber 99% ready](http://isfiberreadyyet.com/) --- > 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 ![](https://i.imgur.com/vb63avL.png) --- ##### 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](https://github.com/facebook/react/blob/master/src/renderers/shared/fiber/ReactPriorityLevel.js) --- ### Scheduling - 依靠 `requestAnimationFrame`, `requestIdleCallback` 來達成 - [Fiber 有實作了 requestIdleCallback 的 polyfill](https://github.com/facebook/react/blob/master/src/renderers/dom/fiber/ReactDOMFrameScheduling.js) --- ### Note - component 可以 return array, number, string - component will update 可能會被 call 不只一次 - 未來 ```js setState({}); ``` 可能會被拿掉，用 functional setState: ```js this.setState((state, props) => { return {}; }); ``` --- ### Reference - [Lin Clark - A Cartoon Intro to Fiber](https://www.youtube.com/watch?v=ZCuYPiUIONs) - [Andrew Clark: What's Next for React](https://www.youtube.com/watch?v=aV1271hd9ew) - [react-fiber-architecture](https://github.com/acdlite/react-fiber-architecture) - [react-fiber-resources](https://github.com/koba04/react-fiber-resources) - [How React Fiber Works](https://www.facebook.com/groups/2003630259862046/permalink/2054053404819731/) - [Fiber Principles: Contributing To Fiber](https://github.com/facebook/react/issues/7942) --- ## Navigation - as a [hard react native problem](https://github.com/brentvatne/hard-react-native-problems/issues/12) --- ### Native vs JS based navigation <iframe width="896" height="504" src="https://www.youtube.com/embed/tWitQoPgs8w?start=717" frameborder="0" allowfullscreen></iframe> --- ### 內建 - NavigatorIOS (只支援 iOS，所以不太有用) - Navigator (效果差，State 不好處理) - NavigationExperimental (deprecated) --- ### 第一戰 - [react-native-router-flux](react-native-router-flux) - 原本基於 Navigator，後來基於 NavigationExperimental - [ex-navigator](https://github.com/exponent/ex-navigator) - 基於 Navigator - [ex-navigation](https://github.com/exponent/ex-navigation) - 基於 NavigationExperimental --- ### 接著戰 - 一堆大咖 - [react-community/react-navigation](https://github.com/react-community/react-navigation) - [wix/react-native-navigation](https://github.com/wix/react-native-navigation) - [airbnb/native-navigation](https://github.com/airbnb/native-navigation) - [ReactTraining/react-router-native](https://github.com/ReactTraining/react-router/tree/master/packages/react-router-native) --- ## Polling & Live Query && Subscription --- ### Polling ![](https://i.imgur.com/RV5eJlI.png) --- ### Polling - pull - easy to maintain (simple, stateless) - latency --- ### Polling Frequently ![](https://i.imgur.com/qJ8is2b.png) --- ### Polling Frequently - not efficient --- ### Live Query ![](https://i.imgur.com/aYSPwEM.png) --- ### Live Query - push - listen every state change - you dont know why state changed - facebook 有在公司內部實驗 [`@live` directive](https://dev-blog.apollodata.com/new-features-in-graphql-batch-defer-stream-live-and-subscribe-7585d0c28b07#.mipscj1xu) --- ### Subscription ![](https://i.imgur.com/NiD6AQp.png) --- ### Subscription - push - event based subscription - you know why state changed exactly --- ### GraphQL Subscription - [The next step for realtime data in GraphQL](https://dev-blog.apollodata.com/the-next-step-for-realtime-data-in-graphql-b564b72eb07b#.7zbccm2rv) - [Merged: [RFC] GraphQL Subscriptions](https://github.com/facebook/graphql/pull/267/files/7de8c1d0ed59bd52b34afd84cd44bb7796716523) --- #### 相關實作 - [graphql-subscriptions](https://github.com/apollographql/graphql-subscriptions) - implements GraphQL subscriptions for Node.js - [subscriptions-transport-ws](https://github.com/apollographql/subscriptions-transport-ws) - Websocket transport and server --- #### 相關實作 (Relay) - [graphql-relay-subscription](https://github.com/taion/graphql-relay-subscription) - Relay subscription helpers for GraphQL.js - [relay-subscriptions](https://github.com/edvinerikson/relay-subscriptions) - Subscription support for Relay --- ## react-storybook - [airbnb/react-dates](http://airbnb.io/react-dates/?selectedKind=DateRangePicker%20%28DRP%29&selectedStory=default&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel) --- - [addon 介紹](https://getstorybook.io/docs/react-storybook/addons/introduction) --- - [storybook-addon-knobs](https://github.com/storybooks/storybook-addon-knobs) - 動態調整 props - [storybook-addon-links](https://github.com/storybooks/storybook-addon-links) - 連結到另一個 story - [storybook-addon-specifications](https://github.com/mthuret/storybook-addon-specifications) - 在 story 旁寫測試並顯示結果到 UI - [storyshots](https://github.com/storybooks/storyshots) - 用 story 產生 jest snapshot --- ### storybook-addon-knobs ![](https://i.imgur.com/9GAx496.png) --- ### storybook-addon-specifications ![](https://i.imgur.com/8cBDcRg.png) --- ### storyshots ![](https://i.imgur.com/tRfWSzG.png) --- ## create-react-native-app --- [Introducing Create React Native App](https://facebook.github.io/react-native/blog/2017/03/13/introducing-create-react-native-app.html) > 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](https://expo.io) 開啟： ![](https://i.imgur.com/E0he0ZK.png) --- ### Exponent 改名 Expo - Facebook 以外最大的 React Native 專業團隊 - [Expo SDK](https://docs.expo.io/versions/v15.0.0/sdk/index.html)，包括 `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](https://github.com/ReactTraining/react-router) - [Egghead - Add routing to React apps using React Router v4](https://egghead.io/courses/add-routing-to-react-apps-using-react-router-v4?utm_source=drip&utm_medium=email&utm_content=react-router-v4) - [Example](https://reacttraining.com/react-router/examples/basic) - [API Docs](https://reacttraining.com/react-router/api) --- ## React VR - Phone & Gear VR headset - style with CSS-in-JS approach - [UX](https://youtu.be/CtVo3z_o9Rw?t=16m20s) - [Official Docs](https://facebookincubator.github.io/react-vr/) - 重點應該在今年 [F8](https://www.fbf8.com/schedule) 有 8 個 VR topic --- ## Reason - dessign a new meta language - 參考了 Elm, F#, Clojure - 可以解決語言層面才能解決的問題 - 不需要 linter, prettier - early stage - 25% of messenger now built with reason --- ![](https://i.imgur.com/PvygbXM.png) --- ![](https://i.imgur.com/y7Aq47b.png) 稍微調一下還是能寫 jsx --- ![](https://i.imgur.com/gQKW2Kz.png) --- ![](https://i.imgur.com/07zgdCn.png) --- ![](https://i.imgur.com/OecQWLY.png) --- ![](https://i.imgur.com/extyWwn.png) --- - 用 npm 安裝 [reason](https://github.com/facebook/reason) ``` git clone https://github.com/reasonml/ReasonProject.git cd ReasonProject npm install ``` --- - [reason-react 的文件](https://github.com/reasonml/reason-react/blob/master/documentation.md) - 或是廢話不多說直接看範例：[reason-react-example](https://github.com/chenglou/reason-react-example) --- ## prettier --- [PR for React](https://github.com/facebook/react/pull/9101) ![](https://i.imgur.com/b7HxmJu.png) --- 這個就不說了，現在不裝都不想寫 code 了 --- ## End

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.