Commit Graph

12 Commits

Author SHA1 Message Date
Pieter De Baets 450fa4d1d3 Remove molly dep from react-native buck graph
Summary:
Folly's molly target combines a number of targets that are supposed to be useable on mobile. Since we're trying to move away from folly, we should instead list explicitly which parts of folly we're using so we can remove them over time, and track which targets no longer have any folly dependencies.

Changelog: [Internal]

Reviewed By: NickGerleman

Differential Revision: D38352060

fbshipit-source-id: 09d0d84793692f97f4d49390c99c38b23441df54
2022-08-11 04:53:34 -07:00
Joshua Gross 47280de85e New Props parsing infrastructure for perf improvements: visitor pattern vs random-map-access pattern (ViewProps, minus YogaLayoutableShadowNode)
Summary:
Perf numbers for this stack are given in terms of before-stack and after-stack, but the changes are split up for ease of review, and also to show that this migration CAN happen per-component and is 100% opt-in. Most existing C++ components do not /need/ to change at all.

# Problem Statement

During certain renders (select critical scenarios in specific products), UIManagerBinding::createNode time takes over 50% of JS thread CPU time. This could be higher or lower depending on the specific product and interaction, but overall createNode takes a lot of CPU time. The question is: can we improve this? What is the minimal overhead needed?

The vast, vast majority of time is taken up by prop parsing (specifically, converting JS values across the JSI into concrete values on the C++ props structs). Other methods like appendChild, etc, do not take up a significant amount of time; so we conclude that createNode is special, and the JSI itself, or calling into C++, is not the problem. Props parsing is the perf problem.

Can we improve it? (Spoiler: yes)

# How does props parsing work today?

Today, props parsing works as follows:

1. The ConcreteComponentDescriptor will construct a RawPropsParser (one per component /type/, per application: so one for View, one for Image, one for Text... etc)
2. Once per component type per application, ConcreteComponentDescriptor will call "prepare" on the RawPropsParser with an empty, default-constructed ConcreteProps struct. This ConcreteProps struct will cause RawProps.at(field) for every single field.
3. Based on the RawProps::at calls in part 2, RawPropsParser constructs a Map from props string names (width, height, position, etc) to a position within a "value index" array.
4. The above is what happens before any actual props are parsed; and the RawPropsParser is now ready to parse actual Props.
5. When props are actually being parsed from a JSI dictionary, we now have two phases:
  1. The RawPropsParser `preparse`s the RawProps, by iterating over the JSI map and filling in two additional data structures: a linear list of RawValues, and a mapping from the ValueIndex array (`keyIndexToValueIndex_`; see step 3) to a value's position in the values list (`value_` in RawPropsParser/RawProps);
  2. The ConcretePropT constructor is called, which is the same as in step 2/3, which calls `fieldValue = rawProps.at("fieldName")` repeatedly.
  3. For each `at` call, the RawProps will look up a prop name in the Map constructed in step 3, and either return an empty value, or map the key name to the `keyIndexToValueIndex_` array, which maps to a value in `values_`, which is then returned and further parsed.

So, a few things that become clear with the current architecture:

1. Complexity is a property of the number of /possible/ props that /can/ be parsed, not what is actually used in product code. This violates the "only pay for what you use" principal. If you have `<View opacity={0.5} />`, the ViewProps constructor will request ~170 properties, not 1!
2. There's a lot of pre-parsing which isn't free
3. The levels of indirection aren't free, and make cache misses more likely and pipelining is more challenging
4. The levels of indirection also require more memory - minor, but not free

# How can we improve it?

The goal is to improve props parsing with minimal or zero impact on backwards-compability. We should be able to migrate over components when it's clear there's a performance issue, without requiring everything gets migrated over at once. This both (1) helps us prove out the new architecture, (2) derisks the project, (3) gives us time, internally and externally, to perfect the APIs and gradually migrate everything over before deleting the old infrastructure code entirely.

Thus, the goal is to do something that introduces a zero-cost abstraction. This isn't entirely possible in practice, and in fact this method slightly regresses components that do not use the new architecture /at all/, while dramatically improving migrated components and causing the impact of the /old/ architecture to be minimal.

# Solution

1. We still keep the existing system in place entirely.
2. After Props are constructed (see ConcreteComponentDescriptor changes) we iterate over all the /values/ set from JS, and call PropsT::setProp. Incidentally, this allows us to easily reuse the same prop for multiple values for "free", which was expensive in the old system.
3. It's worth noting that this makes a Props struct "less immutable" than it was before, and essentially now we have a "builder pattern" for Props. (If we really wanted to, we could still require a single constructor for Props, and then actually use an intermediate PropsBuilder to accumulate values - but I don't think this overhead would be worth for the conceptual "immutability" win, and instead a "Construct/Set/Seal" model works fine, and we still have all the same guarantees of immutability after the parsing phase)

# Implementation Details
# How to properly construct a single Prop value

Minor detail: parsing a single prop is a 3-step process. We imagine two scenarios: (1) Creating a new ShadowNode/Props A from nothing/void, so the previous Props value is just the default constructor. (2) Cloning a ShadowNode A->B and therefore Props A must be copied to Props B before parsing.

We will denote this as a clone from A->B, where A may or may not be a previous node or a default-constructed Props node; and imagine in particular that we're setting the "opacity" value for PropsB.

We must first (1) copy a value over from the previous version of the Props struct, so B.opacity = A.opacity; (2) Determine if opacity has been set from JS. If so, and there is a value, B.opacity = parse(JSValue). (3) If JS has passed in a value for the prop, BUT the value is `null`, it means that JS is resetting or deleting the prop, so we must set it BACK to the default. In this case we set PropsB.opacity = DefaultConstructedProps.opacity.

We must take care in general to ensure that the correct behavior is achieved here, which should help to explain some of the code below.

## String comparisons vs hash comparisons

In the previous system, a RawPropsKey is three `const char*` strings, concatenated together repeatedly /at runtime/. In practice, the ONLY reason we have the prefix, name, suffix Key structure is for the templated prop parsing in ViewProps and YogaStyableProps - that's it. It's not used anywhere else. Further, the key {"margin", "Left", "Width"} is identical to the key {"marginLeftWidth", null, null} and we don't do anything fancy with matching prefixes before comparing the whole string, or similar. Before comparison, keys are concatenated into a single string and then we use `strcmp`. The performance of this isn't terrible, but it's nonzero overhead.

I think we can do better and it's sufficient to compare hashed string values; even better, we can construct most of these /at compile time/ using constexpr, and using `switch` statements guarantee no hash collisions within a single Props struct (it's possible there's a collision between Props.cpp and ViewProps.cpp, for example, since they're different switch statements). We may eventually want to be more robust against has collisions; I personally don't find the risk to be too great, hash collisions with these keys are exceedingly unlikely (or maybe I just like to live dangerously). Thus, at runtime, each setProp requires computing a single hash for the value coming from JS, and then int comparisons with a bunch of pre-compiled values.

If we want to be really paranoid, we could be robust to hash collisions by doing `switch COMPILED_HASH("opacity"): if (strcmp(strFromJs, "opacity") == 0)`. I'm happy to do this if there's enough concern.

## Macros

Yuck! I'm using lots of C preprocessor macros. In general I found this way, way easier in reducing code and (essentially) doing codegen for me vs templated code for the switch cases and hashing prop names at compile-time. Maybe there's a better way.

Changelog: [Added][Fabric] New API for efficient props construction

Reviewed By: javache

Differential Revision: D37050215

fbshipit-source-id: d2dcd351a93b9715cfeb5197eb0d6f9194ec6eb9
2022-06-15 23:37:34 -07:00
Tatiana Kapos 2d64d1d693 Fix RawPropsParser for Windows (#33432)
Summary:
Changes in https://github.com/facebook/react-native/compare/7cece3423...189c2c895 broke build for Windows because of a conversion from size_t to int. Adds a static cast to int to fix the error and restore windows build

Error Message
```
##[error]node_modules\react-native\ReactCommon\react\renderer\core\RawPropsParser.cpp(100,42): Error C2220: the following warning is treated as an error
     3>D:\a\_work\1\s\node_modules\react-native\ReactCommon\react\renderer\core\RawPropsParser.cpp(100,42): error C2220: the following warning is treated as an error [D:\a\_work\1\s\vnext\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj]
##[warning]node_modules\react-native\ReactCommon\react\renderer\core\RawPropsParser.cpp(100,42): **Warning C4267: '=': conversion from 'size_t' to 'int', possible loss of data**
     3>D:\a\_work\1\s\node_modules\react-native\ReactCommon\react\renderer\core\RawPropsParser.cpp(100,42): warning C4267: '=': conversion from 'size_t' to 'int', possible loss of data [D:\a\_work\1\s\vnext\Microsoft.ReactNative\Microsoft.ReactNative.vcxproj]
```

## Changelog

[General] [Fixed] - Restore Windows build with RawPropsParser.cpp

Pull Request resolved: https://github.com/facebook/react-native/pull/33432

Test Plan: Tested locally and changes pass in the react-native-windows pipeline, change is being merged into the main branch of react-native-windows.

Reviewed By: philIip

Differential Revision: D34907928

Pulled By: javache

fbshipit-source-id: 8b76cbef0b637f2d607a8aefd2998322c3245713
2022-03-17 03:58:57 -07:00
Pieter De Baets 4b1c8584e1 Remove size_ field from RawPropsParser
Summary:
`size_` will always match `keys_.size()` so we don't have to keep track of it.

Changelog: [Internal]

Reviewed By: sammy-SC

Differential Revision: D34391445

fbshipit-source-id: f6c9316c989137425abfb7b3d72b571d08240f34
2022-02-25 04:08:01 -08:00
Andres Suarez 8bd3edec88 Update copyright headers from Facebook to Meta
Reviewed By: aaronabramov

Differential Revision: D33367752

fbshipit-source-id: 4ce94d184485e5ee0a62cf67ad2d3ba16e285c8f
2021-12-30 15:11:21 -08:00
Andrew Coates 4d87d8c6b2 Fix various c++ warnings (#31399)
Summary:
react-native-windows runs with a more strict set of warnings as errors.  This fixes a bunch of warnings being hit while compiling core react-native code as part of react-native-windows.  In particular warnings about mismatched signed/unsigned comparisons, lossy conversions, and variable names that conflict with names in outer scopes (yoga has a global for `leading` and `trailing` that conflicts with some local variable names)

## Changelog

[Internal] [Fixed] - Fix various C++ warnings

Pull Request resolved: https://github.com/facebook/react-native/pull/31399

Test Plan: I've run these changes in react-native-windows. -- Shouldn't have any functionality difference.

Reviewed By: sammy-SC

Differential Revision: D28290188

Pulled By: rozele

fbshipit-source-id: 2f7cf87f58d73a3f43510ac888dbcb9ab177d134
2021-05-12 12:35:33 -07:00
Andrew Coates 81c895fb3f Fix various C++ warnings (#31002)
Summary:
Fix warnings about implicit type truncation.

## Changelog

[Internal] [Fixed] - Fix various C++ warnings

Pull Request resolved: https://github.com/facebook/react-native/pull/31002

Test Plan:
Almost all the changes here are simply making explicit conversions which are already occurring.  With the exception of a couple of constants being changed from doubles to floats.

With these changes I am able to remove a bunch of warning suppressions in react-native-windows.

Reviewed By: shergin

Differential Revision: D26900502

Pulled By: rozele

fbshipit-source-id: d5e415282815c2212a840a863713287bbf118c10
2021-03-10 12:39:12 -08:00
Joshua Gross a0d740a04a RN_DEBUG -> REACT_NATIVE_DEBUG
Summary:
Use REACT_NATIVE_DEBUG for consistent branding and to prevent potential collisions with other codebases.

Changelog: [Internal]

Reviewed By: mdvacca

Differential Revision: D26517424

fbshipit-source-id: c85740d4e5320cc14023eb6f521bb1a242ae56fe
2021-02-18 14:31:57 -08:00
Joshua Gross d93b7c3369 Rename rn_assert to react_native_assert
Summary:
Keep consistent branding of rn -> react_native

Changelog: [Internal]

Reviewed By: fkgozali, mdvacca

Differential Revision: D26517069

fbshipit-source-id: 32fd3e52ee91e7ae72b6022535cb99ffc5b12303
2021-02-18 14:31:57 -08:00
Joshua Gross 16cf45ac3d Migrate Differentiator and RawPropsParser to rn_assert
Summary:
This will allow these asserts to crash on Android debug builds.

We will migrate more sites as we confirm this is stable through testing.

Changelog: [Internal]

Reviewed By: mdvacca

Differential Revision: D26409354

fbshipit-source-id: fb35cd8de29890f7c2b761435eaa02de377bdd1e
2021-02-17 18:00:47 -08:00
Joshua Gross 77accf2380 Log more diagnostics when JSI values cannot be cast to Object
Summary:
There are a few places where we cast JSI values to objects without much validation and without proper error logging, and in some places the crashes aren't symbolicated well. To make debugging easier in the short-term, I'm adding some additional logs.

Changelog: [Internal]

Reviewed By: mdvacca, RSNara

Differential Revision: D23033222

fbshipit-source-id: 9343d693a441f0af728e560a0c245bcc4eb97869
2020-08-10 16:08:50 -07:00
David Vacca 1ae76bf0dd Remove inner folders of react/renderer/core
Summary:
This diff removes the inner folder of react/renderer/core, moving all its files into react/renderer/core

This is necessary to simplify the compilation of Fabric in OSS

More details: https://fb.quip.com/amaRA631DX3K

changelog: [internal] Internal

Reviewed By: fkgozali, JoshuaGross

Differential Revision: D22875854

fbshipit-source-id: e2d969c3ec67eab1bbdc9288e5a4285c740fa944
2020-08-01 13:31:03 -07:00