Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

The New Architecture section editorial review #3288

Merged
merged 24 commits into from
Sep 8, 2022
Merged
Show file tree
Hide file tree
Changes from 20 commits
Commits
Show all changes
24 commits
Select commit Hold shift + click to select a range
5a9622f
[Do Not Merge] Refactoring The New Architecture (#3029)
Mar 29, 2022
b106cd6
[Guide - The New Architecture] What Backward Compatibility Is (#3038)
Apr 8, 2022
38eb7f2
Guide to creating a New Architecture app from template (#3056)
lindboe Apr 20, 2022
5684e88
New Architecture landing page (#3072)
lindboe Apr 20, 2022
a869a53
[Guide - The New Architecture] Why A New Architecture (#3043)
Apr 20, 2022
5597845
[Guide - The New Architecture] Pillars (#3046)
Apr 21, 2022
61cd230
[Guide - The New Architecture] TurboModules as Native Modules (#3039)
Jul 5, 2022
8a9b70f
[Guide - The New Architecture] Fabric Components as Native Components…
Jul 5, 2022
8ad2465
[FEAT][TNA] Fabric Component Guide (#3132)
Jul 20, 2022
449c3ea
Add page on codegen (#3155)
Jul 20, 2022
444ec53
[FEAT] TurboModules guide (#3168)
lindboe Jul 20, 2022
18041b0
wip: migration guide review (#3200)
Aug 1, 2022
8dcff86
Merge branch 'main' into feat/new-architecture-guide-refactoring
Aug 1, 2022
28d7847
Merge branch 'main' into Documentation-review
arati-1 Aug 8, 2022
c8b20bb
Merge branch 'main' into Documentation-review
arati-1 Aug 11, 2022
9d079e9
Merge branch 'main' into Documentation-review
arati-1 Aug 17, 2022
dac9956
Merge branch 'main' into Documentation-review
arati-1 Aug 22, 2022
3a9f149
Fix for some typos and other editorial related changes
arati-1 Aug 24, 2022
082a2b1
Merge branch 'main' into Documentation-review
arati-1 Aug 25, 2022
9abc29d
Merge branch 'facebook:main' into Documentation-review
arati-1 Aug 30, 2022
5250e20
Update docs/the-new-architecture/pillars-fabric-components.md
arati-1 Sep 1, 2022
6a59634
Update pillars-fabric-components.md
arati-1 Sep 1, 2022
86fd541
Merge branch 'main' into Documentation-review
arati-1 Sep 7, 2022
93514b4
Merge branch 'main' into Documentation-review
arati-1 Sep 8, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions docs/new-architecture-app-intro.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,11 @@ import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx';

There are a few prerequisites that should be addressed before the New Architecture is enabled in your application.

## Use a React Native >= 0.68 release
## Use a React Native >= 0.68 Release

React Native released the support for the New Architecture with the release `0.68.0`.

This guide is written with the expectation that you’re using the latest React Native release. At the moment of writing, this is `0.70.0`. Other than this guide, you can leverage the [upgrade helper](https://react-native-community.github.io/upgrade-helper/) to determine what other changes may be required for your project.
This guide is written with the expectation that you’re using the latest React Native release. At the moment of writing, this is `0.70.0`. Besides this guide, you can leverage the [upgrade helper](https://react-native-community.github.io/upgrade-helper/) to determine what other changes may be required for your project.

To update to the most recent version of React Native, you can run this command:

Expand All @@ -27,7 +27,7 @@ Starting from React Native `0.69.0`, you may also need to update the version of
yarn add react@18.0.0
```

### Android specifics
### Android Specifics

Using the New Architecture on Android has some prerequisites that you need to meet:

Expand Down Expand Up @@ -139,9 +139,9 @@ task copyDownloadableDepsToLibs(type: Copy) {
+ }
```

Finally, it’s time to update your project to use the `react-native` dependency from source, rather than using a precompiled artifact from the NPM package. This is needed as the later setup will rely on building the native code from source.
Finally, it’s time to update your project to use the `react-native` dependency from the source rather than using a precompiled artifact from the NPM package. This is needed as the later setup will rely on building the native code from the source.

Let’s edit your **module-level** `build.gradle` (the one inside `app/` folder) and change the following line:
Let’s edit your **module-level** `build.gradle` (the one inside the `app/` folder) and change the following line:

```diff
dependencies {
Expand All @@ -151,15 +151,15 @@ dependencies {

## Use Hermes

Hermes is an open-source JavaScript engine optimized for React Native. Hermes is enabled by default and you have to explicitly disable it if you want to use JSC.
Hermes is an open-source JavaScript engine optimized for React Native. Hermes is enabled by default, and you have to explicitly disable it if you want to use JSC.

We highly recommend using Hermes in your application. With Hermes enabled, you will be able to use the JavaScript debugger in Flipper to directly debug your JavaScript code.

Please [follow the instructions on the React Native website](hermes) to learn how to enable/disable Hermes.

:::caution

**iOS:** If you opt out of using Hermes, you will need to replace `HermesExecutorFactory` with `JSCExecutorFactory` in any examples used throughout the rest of this guide.
**iOS:** If you opt-out of using Hermes, you will need to replace `HermesExecutorFactory` with `JSCExecutorFactory` in any examples used throughout the rest of this guide.

:::

Expand Down Expand Up @@ -201,7 +201,7 @@ cd android
./gradlew clean
```

## iOS: Make the project build
## iOS: Build the Project

After upgrading the project, there are a few changes you need to apply:

Expand All @@ -228,7 +228,7 @@ echo 'export NODE_BINARY=$(command -v node)' > .xcode.env
```

If you need it, you can also open the file and replace the `$(command -v node)` with the path to the node executable.
React Native supports also a local version of this file `.xcode.env.local`. This file is not synced with the repository to let you customize your local setup, if it differs from the Continuous Integration or the team one.
React Native also supports a local version of this file `.xcode.env.local`. This file is not synced with the repository to let you customize your local setup, if it differs from the Continuous Integration or the team one.

## iOS: Use Objective-C++ (`.mm` extension)

Expand Down Expand Up @@ -261,7 +261,7 @@ Then, declare your app delegate as a `RCTCxxBridgeDelegate` provider:
@end
```

To conform to the `RCTCxxBridgeDelegate` protocol, you will need to implement the `jsExecutorFactoryForBridge:` method. Typically, this is where you would return a `JSCExecutorFactory` or `HermesExecutorFactory`, and we will use it to install our TurboModules bindings later on.
To conform to the `RCTCxxBridgeDelegate` protocol, you must implement the `jsExecutorFactoryForBridge:` method. Typically, this is where you would return a `JSCExecutorFactory` or `HermesExecutorFactory`, and we will use it to install our TurboModules bindings later on.

You can implement the `jsExecutorFactoryForBridge:` method like this:

Expand Down
14 changes: 7 additions & 7 deletions docs/new-architecture-library-android.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,11 @@ import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx';

<NewArchitectureWarning/>

Once you have defined the JavaScript specs for your native modules as part of the [prerequisites](new-architecture-library-intro), setup the configuration of the Codegen, and followed the Android/Gradle setup, you are now ready to migrate your library to the new architecture. Here are the steps you can follow to accomplish this.
Once you have defined the JavaScript specs for your native modules as part of the [prerequisites](new-architecture-library-intro), set up the configuration of the Codegen, and follow the Android/Gradle setup, you are now ready to migrate your library to the new architecture. Here are the steps you can follow to accomplish this.

## 1. Extend or implement the code-generated native interfaces
## 1. Extend or Implement the Code-generated Native Interfaces

The JavaScript spec for your native module or component will be used to generate native interface code for each supported platform (i.e. Android and iOS). These native interface files will be generated **when a React Native application that depends on your library is built**.
The JavaScript spec for your native module or component will be used to generate native interface code for each supported platform (i.e., Android and iOS). These native interface files will be generated **when a React Native application that depends on your library is built**.

While this generated native interface code **will not ship as part of your library**, you do need to make sure your Java/Kotlin code conforms to the protocols provided by these native interface files.

Expand All @@ -23,7 +23,7 @@ You can invoke the `generateCodegenArtifactsFromSchema` Gradle task to generate

The files that are output can be found inside `build/generated/source/codegen` and **should not be committed**, but you’ll need to refer to them to determine what changes you need to make to your native modules in order for them to provide an implementation for each generated interface.

The output of the codegen for a module called `NativeAwesomeManager` will look like this:
The output of the Codegen for a module called `NativeAwesomeManager` will look like this:

```
app/build/generated/source/codegen
Expand All @@ -50,9 +50,9 @@ app/build/generated/source/codegen
└── schema.json
```

### Extends the abstract class provided by the codegen
### Extends the Abstract Class Provided by the Codegen

Update your native module or component to ensure it **extends the abstract class** that has been code-generated from your JavaScript specs (i.e. the `NativeAwesomeManagerSpec.java` file from the previous example).
Update your native module or component to ensure it **extends the abstract class** that has been code-generated from your JavaScript specs (i.e., the `NativeAwesomeManagerSpec.java` file from the previous example).

Following the example set forth in the previous section, your library might import `NativeAwesomeManagerSpec`, implement the relevant native interface and the necessary methods for it:

Expand Down Expand Up @@ -114,4 +114,4 @@ class NativeAwesomeManager(reactContext: ReactApplicationContext) :
</TabItem>
</Tabs>

Please note that the **generated abstract class** that you’re now extending (`MyAwesomeSpec` in this example), is itself extending `ReactContextBaseJavaModule`. Therefore you should not use access to any of the method/fields you were previously using (e.g. the `ReactApplicationContext` and so on). Moreover the generated class will now also implement the `TurboModule` interface for you.
Please note that the **generated abstract class** that you’re now extending (`MyAwesomeSpec` in this example) is itself extending `ReactContextBaseJavaModule`. Therefore you should not use access to any of the method/fields you were previously using (e.g., the `ReactApplicationContext` and so on). Moreover, the generated class will now also implement the `TurboModule` interface for you.
Loading