Skip to content

Commit 7c1091c

Browse files
arati-1Riccardolindboecipolleschi
authored
The New Architecture section editorial review (facebook#3288)
* [Do Not Merge] Refactoring The New Architecture (facebook#3029) * [Guide - The New Architecture] What Backward Compatibility Is (facebook#3038) * Guide to creating a New Architecture app from template (facebook#3056) * Start new template guide This is a first iteration. I want to get feedback on a few aspects, so starting from here as a baseline. * Update title * Use tabs for target OS Set up matching the style of "Getting Started", except I kept the headers inside the tabs for now as it makes for a useful right-hand TOC. * Capitalize New Architecture, simplify * Preliminary section for Hermes Add section for recommending enabling Hermes. Not sure of contents yet, and still have to test. * Reword to emphasize importance of Hermes usage * Show new arch in use * Add build speed article link * Add pro tip for pod install alias * Restructure, repeat less Favor linking to original setup guide instead of repeating content. * Note about Expo * Include command on uninstalling global CLI * How to learn more * Remove headers in tabs They don't work correctly with the righthand TOC. * Make header more clear * Use quote block less often There was way too much yellow. * Opt for instructions using XCode Because `xcodebuild clean` already failed me once when XCode GUI clean worked. * Fix lint issue * Improve wording * Use product name * Fix line wraps * Reword based on feedback * Note use of bundle install * Pod removal instructions Also standardize on using yarn scripts from template for commands, it's a little confusing to see the mix of `npx` and `yarn` once we start referring to `yarn pod-install` * Convert quotes to admonitions * Convert Note: to admonitions * Feedback: Change admonitions to caution * PR feedback * New Architecture landing page (facebook#3072) * First draft of landing page * Add migration and backwards compatibility links * lint fix * Restructure slightly, leaning more on context from Why a New Architecture * Don't need md in links * Suggested rewording * Rephrase pillar summaries * [Guide - The New Architecture] Why A New Architecture (facebook#3043) * [Guide - The New Architecture] Pillars (facebook#3046) * [Guide - The New Architecture] TurboModules as Native Modules (facebook#3039) * [Guide - The New Architecture] Fabric Components as Native Components (facebook#3040) * [FEAT][TNA] Fabric Component Guide (facebook#3132) * [Feat] Add intro for Fabric Components * feat: add guide to create a Fabric Component * Add page on codegen (facebook#3155) * [FEAT] TurboModules guide (facebook#3168) * [Feat] Add intro for Fabric Components * feat: add guide to create a Fabric Component * Beginning of guide/folder structure * WIP JS Spec * specification section * Configuration * native code intro * Must be named Spec * Best stab at iOS native code, but I don't know how to describe what's going on in the code very well. Extrapolated what I could. * Android instructions iOS isn't working for me. Builds, but can't load module. Writing up Android auto-linking next because the steps I tested did work. * Include linking instructions from RNNArch repo * Add example JavaScript * native modules link * Address quick feedback items * Remove, fix for rebased branch * fix TM parameter on Android * Revert to 'Codegen' casing * Revert folly version change 2021.07.22 is for current version on main * fix typo * getTurboModule explainer * Sentence edits - Fix acronym bolding - Change wording to "recommended" because "standard" has other connotations of possibly being required - Parentheses unnecessary, distracting * Remove TODO for now Getting inconsistent results here, not sure if this is wrong or not; removing TODO for now so it doesn't block anything * ABI rephrase, more in line with new Fabric guide wording * Explain shared C++ code more * feat: add guide to create a Fabric Component * feat: add guide to create a Fabric Component * package.json description * Lint fixes * fix: Move JS constants to reduce changes * fix: Remove newline * feat: add required step for Android Codegen * fix: use the proper links Co-authored-by: Riccardo Cipolleschi <[email protected]> * wip: migration guide review (facebook#3200) * Fix for some typos and other editorial related changes * Update docs/the-new-architecture/pillars-fabric-components.md correcting the article Co-authored-by: Riccardo <[email protected]> * Update pillars-fabric-components.md Co-authored-by: Riccardo <[email protected]> Co-authored-by: Lizzi Lindboe <[email protected]> Co-authored-by: Riccardo <[email protected]>
1 parent 9e6e311 commit 7c1091c

13 files changed

+158
-158
lines changed

docs/new-architecture-app-intro.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,11 @@ import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx';
99

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

12-
## Use a React Native >= 0.68 release
12+
## Use a React Native >= 0.68 Release
1313

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

16-
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.
16+
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.
1717

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

@@ -27,7 +27,7 @@ Starting from React Native `0.69.0`, you may also need to update the version of
2727
2828
```
2929

30-
### Android specifics
30+
### Android Specifics
3131

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

@@ -139,9 +139,9 @@ task copyDownloadableDepsToLibs(type: Copy) {
139139
+ }
140140
```
141141

142-
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.
142+
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.
143143

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

146146
```diff
147147
dependencies {
@@ -151,15 +151,15 @@ dependencies {
151151

152152
## Use Hermes
153153

154-
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.
154+
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.
155155

156156
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.
157157

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

160160
:::caution
161161

162-
**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.
162+
**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.
163163

164164
:::
165165

@@ -201,7 +201,7 @@ cd android
201201
./gradlew clean
202202
```
203203

204-
## iOS: Make the project build
204+
## iOS: Build the Project
205205

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

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

230230
If you need it, you can also open the file and replace the `$(command -v node)` with the path to the node executable.
231-
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.
231+
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.
232232

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

@@ -261,7 +261,7 @@ Then, declare your app delegate as a `RCTCxxBridgeDelegate` provider:
261261
@end
262262
```
263263

264-
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.
264+
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.
265265

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

docs/new-architecture-library-android.md

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,11 @@ import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx';
77

88
<NewArchitectureWarning/>
99

10-
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.
10+
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.
1111

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

14-
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**.
14+
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**.
1515

1616
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.
1717

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

2424
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.
2525

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

2828
```
2929
app/build/generated/source/codegen
@@ -51,9 +51,9 @@ app/build/generated/source/codegen
5151
└── schema.json
5252
```
5353

54-
### Extends the abstract class provided by the codegen
54+
### Extends the Abstract Class Provided by the Codegen
5555

56-
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).
56+
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).
5757

5858
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:
5959

@@ -115,4 +115,4 @@ class NativeAwesomeManager(reactContext: ReactApplicationContext) :
115115
</TabItem>
116116
</Tabs>
117117

118-
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.
118+
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.

0 commit comments

Comments
 (0)