Yoga M1 Goals #1248

New Issue

2023-04-19T13:48:03-07:00

NickGerleman commented

2023-04-19 13:48:03 -07:00

(Migrated from github.com)

Yoga M1 Goals

We would like to evolve Yoga to offer a feature-set and level of conformance which is more competitive and compatible with web browsers. This document describes several work-streams to move in that direction, with a goal of creating a new formal release of Yoga at the end of June 2023 (referred to here as milestone 1 or M1). These changes will use React Native as a vehicle to validate and implement these changes,

Where are we so far?

We have started laying the groundwork for making new changes to Yoga with greater confidence, understanding the issues Yoga's users are having with it, and modernizing the foundations used to delver it. This includes:

Flex gap and the testing from RN users of it
Newly working and optimized ASM/WASM bindings of Yoga.
Newly updated toolchains for C++, JavaScript, Gradle and potentially C#
Test coverage for OSS contributors
Initial cataloging of conformance issues and gaps
Structures for the React Native team to respond to new issues created inside of Yoga

Overall goals

We would like to get to a place where we can make larger changes to Yoga, without fear of disruption. We must at the same time exercise caution in impacting the existing users of Yoga. Enabling future changes, and making new versions of Yoga usable in industry are the main themes of this milestone.

Errata Handling

We would like to introduce new APIs and a concrete policy for handling future changes which alter layout behavior in ways which may be breaking. See RFC: Yoga Errata Policy for more details on what this looks like.

Task	Priority
Concrete errata policy	⭐️⭐️⭐️
YGEratta API changes	⭐️⭐️⭐️
Import already made conformance fixes	⭐️⭐️
Mirror behavior changes made by Chromium	⭐️⭐️
Internal telemetry for errata hit rate	⭐️⭐️
UseWebDefaults becomes default	⭐️

Enabling Industry Users

Yoga is widely used outside of React Native. While we have started to modernize the build, we have not created a formal release of Yoga since we have started making changes, and there are a variety of official Yoga distributions for different toolchains in various states. To enable broad OSS usage of Yoga (and encourage contribution) we should create a new formal and documented release of its bits.

We should use this as an opportunity to clean-house of Yoga projects which have accumulated, but are unsupported, and are not likely to see new contribution. This includes projects like the “yoga-layout” Android ViewGroup which is not used by Meta, and is not at production quality.

Task	Priority
Cut Yoga 2.0 (Beta)	⭐️⭐️⭐️
Working and tested iOS Build logic	⭐️⭐️⭐️
Working tests for Android	⭐️⭐️⭐️
Publish infra for npm	⭐️⭐️⭐️
Publish infra for Maven Central	⭐️⭐️⭐️
Publish infra for Cocoapods	⭐️⭐️⭐️
Better repo infra (e.g. stalebot for PRs)	⭐️⭐️
Automated version cutting infra	⭐️⭐️
Deprecate old/unused projects	⭐️⭐️
Sample apps for Gradle/Cocoapods	⭐️⭐️
Update static website to Docusaurus	⭐️
Better Yoga documentation	⭐️
GitHub first	⭐️

StrictLayout Component and Warnings

StrictLayout (and corresponding ClassicLayout) is React Native’s expression of Yoga errata. A goal of M1 is to implement unstable_StrictLayout to the point where it may be used inside of internal production scenarios, to start proving it out.

A goal was to move existing React Native code to StrictLayout, via the use of hints when an errata is encountered. This requires changes to how React Native stores references to styles which lead to that applied to a Yoga Node. Because this is not needed to enable code sharing with web, it is a lower priority than other parts of the proposal.

Task	Priority
Undeprecate Per-node Yoga Config	⭐️⭐️⭐️
StrictLayout JS Component	⭐️⭐️⭐️
StrictLayout ShadowNode	⭐️⭐️⭐️
StrictLayout is used in a real scenario	⭐️⭐️⭐️
ClasicLayout JS Component	⭐️⭐️
ClasicLayout ShadowNode	⭐️⭐️
Traceable styles	⭐️
Migration hints	⭐️

Cataloging conformance/portability issues

We have quite a few known conformance issues of Yoga documented as open PRs or issues, but haven’t attempted to systematically discover more. There are many WPT tests over flexbox which we can leverage, some directly translatable to fixtures usable by Yoga. This will eventually allow us to implement new features (and existing fixes) with greater confidence, but there is already a backlog of conformance issues with known fixes.

Apart from the literal translation of the tests, we must evolve our infrastructure to support known failing tests, and fix other quirks of how the test generator reads fixtures which disallow certain patterns. This also would allow us to better handle cases where reference behavior changes (e.g. our tests right now may break when Chromium changes behavior).

Task	Priority
Test generator can handle known failures	⭐️⭐️⭐️
Test fixtures better align to HTML	⭐️⭐️
Simple WPT exampels ported to fixtures	⭐️⭐️

Capabilities

We would like to add new capabilities to Yoga. This is for the most part not a direct focus of the milestone, but there are foundational aspects (such as the WPT tests above). E.g. we currently scale memory usage badly with new fields added to styles, and the newly added flex gap still has some unimplemented bits.

Task	Priority
Flex gap percentage values	⭐️
YGStyle storage improvements	⭐️

# Yoga M1 Goals We would like to evolve Yoga to offer a feature-set and level of conformance which is more competitive and compatible with web browsers. This document describes several work-streams to move in that direction, with a goal of creating a new formal release of Yoga at the end of June 2023 (referred to here as milestone 1 or M1). These changes will use React Native as a vehicle to validate and implement these changes, ## Where are we so far? We have started laying the groundwork for making new changes to Yoga with greater confidence, understanding the issues Yoga's users are having with it, and modernizing the foundations used to delver it. This includes: 1. Flex gap and the testing from RN users of it 2. Newly working and optimized ASM/WASM bindings of Yoga. 3. Newly updated toolchains for C++, JavaScript, Gradle and potentially [C#](https://github.com/facebook/yoga/pull/1207) 4. Test coverage for OSS contributors 5. Initial cataloging of conformance issues and gaps 6. Structures for the React Native team to respond to new issues created inside of Yoga ## Overall goals We would like to get to a place where we can make larger changes to Yoga, without fear of disruption. We must at the same time exercise caution in impacting the existing users of Yoga. Enabling future changes, and making new versions of Yoga usable in industry are the main themes of this milestone. ## Errata Handling We would like to introduce new APIs and a concrete policy for handling future changes which alter layout behavior in ways which may be breaking. See [RFC: Yoga Errata Policy](https://fb.quip.com/cSLAAqVXpsAV) for more details on what this looks like. |Task |Priority | |--- |--- | |Concrete errata policy |⭐️⭐️⭐️ | |YGEratta API changes |⭐️⭐️⭐️ | |Import already made conformance fixes |⭐️⭐️ | |Mirror behavior changes made by Chromium |⭐️⭐️ | |Internal telemetry for errata hit rate |⭐️⭐️ | |UseWebDefaults becomes default |⭐️ | ## Enabling Industry Users Yoga is widely used outside of React Native. While we have started to modernize the build, we have not created a formal release of Yoga since we have started making changes, and there are a variety of official Yoga distributions for different toolchains in various states. To enable broad OSS usage of Yoga (and encourage contribution) we should create a new formal and documented release of its bits. We should use this as an opportunity to clean-house of Yoga projects which have accumulated, but are unsupported, and are not likely to see new contribution. This includes projects like the “yoga-layout” Android ViewGroup which is not used by Meta, and is not at production quality. |Task |Priority | |--- |--- | |Cut Yoga 2.0 (Beta) |⭐️⭐️⭐️ | |Working and tested iOS Build logic |⭐️⭐️⭐️ | |Working tests for Android |⭐️⭐️⭐️ | |Publish infra for npm |⭐️⭐️⭐️ | |Publish infra for Maven Central |⭐️⭐️⭐️ | |Publish infra for Cocoapods |⭐️⭐️⭐️ | |Better repo infra (e.g. stalebot for PRs) |⭐️⭐️ | |Automated version cutting infra |⭐️⭐️ | |Deprecate old/unused projects |⭐️⭐️ | |Sample apps for Gradle/Cocoapods |⭐️⭐️ | |Update static website to Docusaurus |⭐️ | |Better Yoga documentation |⭐️ | |GitHub first |⭐️ | ## StrictLayout Component and Warnings [`StrictLayout`](https://github.com/react-native-community/discussions-and-proposals/blob/2ba2018027f3b9934fefda053ee135209ac3a640/proposals/0540-vision-for-layout-conformance-parity.md#strict-layout) (and corresponding ClassicLayout) is React Native’s expression of Yoga errata. A goal of M1 is to implement `unstable_StrictLayout` to the point where it may be used inside of internal production scenarios, to start proving it out. A goal was to move existing React Native code to StrictLayout, via the use of hints when an errata is encountered. This requires changes to how React Native stores references to styles which lead to that applied to a Yoga Node. Because this is not needed to enable code sharing with web, it is a lower priority than other parts of the proposal. |Task |Priority | |--- |--- | |Undeprecate Per-node Yoga Config |⭐️⭐️⭐️ | |StrictLayout JS Component |⭐️⭐️⭐️ | |StrictLayout ShadowNode |⭐️⭐️⭐️ | |StrictLayout is used in a real scenario |⭐️⭐️⭐️ | |ClasicLayout JS Component |⭐️⭐️ | |ClasicLayout ShadowNode |⭐️⭐️ | |Traceable styles |⭐️ | |Migration hints |⭐️ | ## Cataloging conformance/portability issues We have quite a few known conformance issues of Yoga documented as open PRs or issues, but haven’t attempted to systematically discover more. There are many WPT tests over flexbox which we can leverage, some directly translatable to fixtures usable by Yoga. This will eventually allow us to implement new features (and existing fixes) with greater confidence, but there is already a backlog of conformance issues with known fixes. Apart from the literal translation of the tests, we must evolve our infrastructure to support known failing tests, and fix other quirks of how the test generator reads fixtures which disallow certain patterns. This also would allow us to better handle cases where reference behavior changes (e.g. our tests right now may break when Chromium changes behavior). |Task |Priority | |--- |--- | |Test generator can handle known failures |⭐️⭐️⭐️ | |Test fixtures better align to HTML |⭐️⭐️ | |Simple WPT exampels ported to fixtures |⭐️⭐️ | ## Capabilities We would like to add new capabilities to Yoga. This is for the most part not a direct focus of the milestone, but there are foundational aspects (such as the WPT tests above). E.g. we currently scale memory usage badly with new fields added to styles, and the newly added flex gap still has some unimplemented bits. |Task |Priority | |--- |--- | |Flex gap percentage values |⭐️ | |YGStyle storage improvements |⭐️ |

👍 1

NickGerleman commented

2023-06-30 17:48:17 -07:00

(Migrated from github.com)

Closing this out since the milestone period has ended. A good amount of the two and three star efforts were shipped, and we are looking at what we are going to do next. Simple calc() expressions, content-sizing, and Exposing errata to React Native as StrictLayout are tentative themes for the next half.

Closing this out since the milestone period has ended. A good amount of the two and three star efforts were shipped, and we are looking at what we are going to do next. Simple `calc()` expressions, `content-sizing`, and Exposing errata to React Native as `StrictLayout` are tentative themes for the next half.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: DaddyFrosty/yoga#1248