React NativeのレイアウトエンジンYOGAの仕組み[追体験編] - React Native Meetup #9

次の記事のスピンオフプレゼンです！

React NativeのレイアウトエンジンYogaの仕組み [前編] https://blog.engineer.adways.net/entry/2018/08/24/202254
React NativeのレイアウトエンジンYogaの仕組み [後編]
https://blog.engineer.adways.net/entry/2018/08/31/180000
React NativeのレイアウトエンジンYogaの仕組み [続編]
https://blog.engineer.adways.net/entry/2018/09/07/193000

React Native Meetup というReact Nativeマンが集うイベントで使ったプレゼン資料です。
https://react-native-meetup.connpass.com/event/97634/

Transcript

1. REACT NATIVE のレイアウトエンジンYOGA の仕組み [ 追体験編]
2. 1. React Native OSS ペアプロ会について 2. React Native のレイアウトエンジンYoga の仕組み
3. 1. React Native OSS ペアプロ会とは 土日の9:00~14:00 数チームに分かれて、ペア or モブプロ facebook/react-native に貢献
4. なぜReact Native OSS ペアプロ会をするのか
5. アジャイルに近づくため
6. 実際にやってみてどうなったか
7. 共にコードを書いたことがあるつながりが増えた、 React Native OSS 会楽しそうって声を書けてもらえるようになった、 インターン 生が「この一ヶ月の成長やばかっですね！」って言ってくれた、 React Native のソースコードのどこに何が書いてあるかだいたい分 かるようになった、 「とても楽しかったです！」って言ってもらえ た、 土日をめちゃくちゃ気持ちよく過ごせた、 デバッガーを使うの がうまくなった、...
8. いいこと起きすぎて書ききれない。
9. 一番は良かったことは、正真正銘「デバッグ力」が上がった。
10. どう上がったのか
11. 1. 問題の検討がつくようになった
12. 例えばSpannableString の話
13. 2. 確実に問題を突き止める自信がついた
14. ペアプロでソースコードを読む時はどういう目的で何をしているか 説明しなければならない 建設的な思考をするようになる 行き当たりばったりの思考をしなくなる OSS を読み始めるときも、見当もつかない大きな問題を細分化して いかなければならない どんな問題も細分化していけばいつか解決する
15. 1. React Native OSS ペアプロ会について 2. React Native のレイアウトエンジンYoga の仕組み
16. ペアプロ会の参加者の@binaryta さん が 「React Native のレイアウトエンジンYoga の仕組み」 という記事を公開しました
17. 前編、後編、続編からなる三部作のリンクがこちらです。 マニアックな内容の割にバズっていたので、既に読んだ方もいるかも。 React Native のレイアウトエンジンYoga の仕組み [ 前編] React Native のレイアウトエンジンYoga の仕組み [ 後編] React Native のレイアウトエンジンYoga の仕組み [ 続編]
18. @binaryta さんの 「React Native のレイアウトエンジンYoga の仕組み」を元に ペアプロを追体験してYoga の実装に潜る
19. Yoga とは クロスプラットフォームレイアウトエンジン Flexbox を再現する
20. facebook/react-native のissue に潜る
21. 以下のことにはふれません デバッグ環境の作り方 イシューの作り方 ディレクトリ構造等のソースコードの説明 プルリクの送り方
22. https://github.com/facebook/react-native/issues/20627 Assigning percentage strings to padding, it works incorrect. #20627 「padding を% 指定した時に, paddingTop とpaddingBottom の大 きさが違う」というissue
23. 本来はこうなるべき
24. 実際にはこうなってしまう
25. 問題の再現性の確認
26. 再現する Android + v0.57.0 Android + v0.56.0 Android + Expo v29(v0.55.4) iOS + v0.57.0 iOS + v0.56.0 iOS + Expo v29/0.55.4)
27. 再現しない padding にnumber を指定した場合
28. いろんなことを検証してみる DOM 構造を変えてみる '5%' の大きさを変えてみる exDirection を変えてみる height を固定してみる などなど..
29. innerHeight とinnerTop の2 つの問題を発見 問題1: innerHeight( 赤の四角の高さ) の計算がおかしい 問題2: innerTop( 青い四角に対する赤の四角の相対位置) の計算がおかしい
30. owner とavailable とinner のおかしな関係を見つける まずはコミュニケーションのためにBox の名前を定義
31. 問題1: innerHeight がownerHeight に依存している 誤: innerHeight(40) = availableHight(100) ­ ownerHeight(600) * padding(5%) * 2 正: innerHeight(90) = availableHight(100) ­ availableHeight(100) * padding(5%) * 2
32. 問題2: innerTop がownerWidth に依存している 誤: innerTop(15) = ownerWidth(300) * padding(5%) 正: innerTop(5) = availableHeight(100) * padding(5%)
33. デモの状態の再確認 owner は300x600 available は100x100 inner は高さが40
34. 問題1: innerHeight の計算での怪しいところ 1. Yoga のメインルーチンSTEP3 での伸長・伸縮のロジック 2. Yoga のメインルーチンSTEP2 でのavailableInner の計算 ※ 補足 いきなりYoga を疑ったのは、この手の計算をするのがYoga だと知っていたからで す。 知らなければheight が計算される瞬間を探し求めて、 JavaScript ファイル →Objective−C ファイル→Yoga.cpp と言った形で少しずつ潜っていったと思います。 Yoga.cpp 内で、FlexBox のルールに従って大きさやポジシヨンを計算する一連の処理 がメインルーチンと呼ばれています。 STEP1~STEP11 に分かれていて、複雑な計算をして います。
35. 1. Yoga のメインルーチンSTEP3 での伸長・伸縮のロジック STEP3 時点でのavailableInnerHeight を確認したい ↓ XCode で該当の行にブレイクポイントを仕込んで availableInnerHeight の値を見る ↓ 誤: availableInnerHeight が40 になっている 正: availableInnerHeight が90 以上であるべき
36. Yoga のメインルーチンSTEP3 で伸長・伸縮するまえに間違っている ↓ その手前からavailableInnerHeight の値が間違っている
37. 2. Yoga のメインルーチンSTEP2 でのavailableInner の計算 availableInnerHeight が確定するコードを見つける ↓ float availableInnerHeight = YGNodeCalculateAvailableInnerDim(node, YGFlexDirectionColumn, availableHeight, ownerHeight); ↓ ブレイクポイントを仕込んで中の値を見る ↓ 誤: availableInnerHeight が40 になっている 正: availableInnerHeight が90 以上であるべき
38. YGNodeCalculateAvailableInnerDim() の中を見る float availableInnerDim = availableDim ­ margin ­ paddingAndBorder; で40 を代入している ↓ paddingAndBorder が60 になっている 正しくは10 になるはず
39. node­>getLeadingPaddingAndBorder(axis, widthSize) が 30 になっている node­>getTrailingPaddingAndBorder(axis, widthSize) が30 になっている 正しくはいずれも5 になるはず ↓ widthSize が600 になっている 正しくは100 になるはず YGNodePaddingAndBorderForAxis() の3 番目の引数を渡してい るところを見に行く
40. YGNodePaddingAndBorderForAxis() の3 番目の引数を見る const float paddingAndBorder = YGNodePaddingAndBorderForAxis(node, direction, ownerDim); ownerDim じゃなくて、availableDim では？ ownerDim からpadding を計算するのはおかしい
41. ownerDim をavailableDim になおす ↓ innerHeight が治った！
42. innerHeight とinnerTop の問題に切り分けて考える 問題1: innerHeight の計算がおかしい ← 解決！ 問題2: innerTop の計算がおかしい
43. 問題2: innerTop の計算がおかしい は今回はやめておきます。 近々@binarita がプルリクを送るので楽しみにしていてください。
44. Yoga は、LINE Message API のFlex Message でも使われていま す。
45. つまりこのプルリクを通す頃には、LINE のUX も向上させることに なります。
46. 僕らは、LINE のUX を向上させました。
47. 今後のReact Native OSS 会 次回開催日は未定です モチベーションの高い人が一定数集まったら開催します 弊社メンバーを紹介するので声かけてください
48. 弊社メンバーの紹介
49. 技術書典5 出すにあたって、初心者向けExpo 勉強会も開きます。
50. 当日駆けつけてくれるメンター陣です! @AkiraTameto さんと@hmktsu さんは、共著メンバーでもありま す。
51. ご清聴ありがとうございました。 @ggtmtmgg