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

Clarify New Architecture Terminology - Take 2 #3316

Merged
merged 2 commits into from
Sep 9, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 1 addition & 1 deletion docs/new-architecture-app-intro.md
Original file line number Diff line number Diff line change
Expand Up @@ -188,7 +188,7 @@ React Native also supports a local version of this file `.xcode.env.local`. This

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

TurboModules can be written using Objective-C or C++. In order to support both cases, any source files that include C++ code should use the `.mm` file extension. This extension corresponds to Objective-C++, a language variant that allows for the use of a combination of C++ and Objective-C in source files.
Turbo Native Modules can be written using Objective-C or C++. In order to support both cases, any source files that include C++ code should use the `.mm` file extension. This extension corresponds to Objective-C++, a language variant that allows for the use of a combination of C++ and Objective-C in source files.

:::important

Expand Down
10 changes: 5 additions & 5 deletions docs/new-architecture-app-modules-android.md
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ yarn react-native run-android

## 2. Java/Kotlin - Provide a `ReactPackageTurboModuleManagerDelegate`

Now is time to actually use the TurboModule.
Now is time to actually use the Turbo Native Module.
First, we will need to create a `ReactPackageTurboModuleManagerDelegate` subclass, like the following:

<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
Expand Down Expand Up @@ -193,7 +193,7 @@ protected constructor(

Please note that the `SoLoader.loadLibrary` parameter (in this case `"myapplication_appmodules")` should be the same as the one specified for `project()` inside the `CMakeLists.txt` file you created before.

This class will then be responsible of loading the TurboModules and will take care of loading the native library build with the NDK at runtime.
This class will then be responsible of loading the Turbo Native Modules and will take care of loading the native library build with the NDK at runtime.

## 3. Adapt your `ReactNativeHost` to use the `ReactPackageTurboModuleManagerDelegate`

Expand Down Expand Up @@ -259,7 +259,7 @@ class MyApplication : Application(), ReactApplication {

## 4. Extend the `getPackages()` from your `ReactNativeHost` to use the TurboModule

Still on the `ReactNativeHost` , we need to extend the the `getPackages()` method to include the newly created TurboModule. Update the method to include the following:
Still on the `ReactNativeHost` , we need to extend the the `getPackages()` method to include the newly created Turbo Native Module. Update the method to include the following:

<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
<TabItem value="java">
Expand Down Expand Up @@ -493,7 +493,7 @@ std::shared_ptr<TurboModule> MyApplicationModuleProvider(const std::string modul
Please adapt the `samplelibrary.h` import to match the same library name you provided when building the apps.
This is the C++ generated file that is created by the codegen.

Here you can also specify more than one provider, should you have more than one TurboModule. Specifically in this example we look for a TurboModule from `samplelibrary` (the one we specified) and we fallback to the `rncore` Module Provider (containing all the Core modules).
Here you can also specify more than one provider, should you have more than one Turbo Native Module. Specifically in this example we look for a Turbo Native Module from `samplelibrary` (the one we specified) and we fallback to the `rncore` Module Provider (containing all the Core modules).

```cpp
#include "MyApplicationModuleProvider.h"
Expand Down Expand Up @@ -532,7 +532,7 @@ JNIEXPORT jint JNICALL JNI_OnLoad(JavaVM *vm, void *) {

## 6. Enable the `useTurboModules` flag in your Application `onCreate`

Now you can finally enable the `TurboModule `support in your Application. To do so, you need to turn on the `useTurboModule` flag inside your Application `onCreate` method.
Now you can finally enable the `Turbo Native Module` support in your Application. To do so, you need to turn on the `useTurboModule` flag inside your Application `onCreate` method.

<Tabs groupId="android-language" defaultValue={constants.defaultAndroidLanguage} values={constants.androidLanguages}>
<TabItem value="java">
Expand Down
2 changes: 1 addition & 1 deletion docs/new-architecture-app-renderer-android.md
Original file line number Diff line number Diff line change
Expand Up @@ -113,7 +113,7 @@ LOG Running "App" with {"fabric":true,"initialProps":{},"rootTag":1}

## Migrating Android ViewManagers

First, make sure you followed the instructions to [Enabling the New Renderer (Fabric) in Your Android Application](#enabling-the-new-renderer-fabric-in-your-android-application). Plus we will also assume that you followed the instructions from [Enabling the New NativeModule System (TurboModule) in Your Android Application](#enabling-the-new-nativemodule-system-turbomodule-in-your-android-application) as the native builds setup steps are presented over there and won’t be repeated here.
First, make sure you followed the instructions to [Enabling the New Renderer (Fabric) in Your Android Application](#enabling-the-new-renderer-fabric-in-your-android-application). Plus we will also assume that you followed the instructions from [Enabling the New NativeModule System (Turbo Module) in Your Android Application](#enabling-the-new-nativemodule-system-turbomodule-in-your-android-application) as the native builds setup steps are presented over there and won’t be repeated here.

### JavaScript changes

Expand Down
17 changes: 13 additions & 4 deletions docs/new-architecture-appendix.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,16 @@ import NewArchitectureWarning from './\_markdown-new-architecture-warning.mdx';

<NewArchitectureWarning/>

## I. Flow Type to Native Type Mapping
## I. Terminology

The whole New Architecture related guides will stick to the following **terminology**:

- **Legacy Native Components** - To refer to Components which are running on the old React Native architecture.
- **Legacy Native Modules** - To refer to Modules which are running on the old React Native architecture.
- **Fabric Native Components** - To refer to Components which have been adapted to work well with the New Architecture, namely the new renderer. For brevity you might find them referred as **Fabric Components**.
- **Turbo Native Modules** - To refer to Modules which have been adapted to work well with the New Architecture, namely the new Native Module System. For brevity you might find them referred as **Turbo Modules**

## II. Flow Type to Native Type Mapping

You may use the following table as a reference for which types are supported and what they map to in each platform:

Expand Down Expand Up @@ -85,7 +94,7 @@ Callback functions are not type checked, and are generalized as `Object`s.
You may also find it useful to refer to the JavaScript specifications for the core modules in React Native. These are located inside the `Libraries/` directory in the React Native repository.
:::

## II. TypeScript to Native Type Mapping
## III. TypeScript to Native Type Mapping

You may use the following table as a reference for which types are supported and what they map to in each platform:

Expand All @@ -105,7 +114,7 @@ You may use the following table as a reference for which types are supported and

You may also find it useful to refer to the JavaScript specifications for the core modules in React Native. These are located inside the `Libraries/` directory in the React Native repository.

## III. Invoking the code-gen during development
## IV. Invoking the code-gen during development

> This section contains information specific to v0.66 of React Native.

Expand Down Expand Up @@ -182,7 +191,7 @@ node node_modules/react-native/scripts/generate-specs-cli.js \

In the above example, the code-gen script will generate several files: `MyLibSpecs.h` and `MyLibSpecs-generated.mm`, as well as a handful of `.h` and `.cpp` files, all located in the `ios` directory.

## IV. Note on Existing Apps
## V. Note on Existing Apps

This guide provides instructions for migrating an application that is based on the default app template that is provided by React Native. If your app has deviated from the template, or you are working with an application that was never based off the template, then the following sections might help.

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

# Getting Started with the New Architecture

This migration guide is designed for React Native **library authors** and **application developers**. It outlines the steps you need to follow to roll out the new Architecture, composed by the **new NativeModule system (TurboModule) and the new Renderer (Fabric)** to your **Android** and **iOS** libraries and apps.
This migration guide is designed for React Native **library authors** and **application developers**. It outlines the steps you need to follow to roll out the new Architecture, composed by the **New Native Module system (Turbo Module) and the new Renderer (Fabric)** to your **Android** and **iOS** libraries and apps.

## Table of Contents

Expand All @@ -23,7 +23,7 @@ The guide is divided into five sections:
- **Supporting the New Architecture in your App**
- [Prerequisites for Supporting the New Architecture in your App](new-architecture-app-intro)
- Android
- [Enabling the New NativeModule System (TurboModule) in your App](new-architecture-app-modules-android)
- [Enabling the New Native Module System (Turbo Module) in your App](new-architecture-app-modules-android)
- [Enabling the New Renderer (Fabric) in your App](new-architecture-app-renderer-android)
- [**React 18 & React Native**](react-18-and-react-native)
- [**Troubleshooting**](new-architecture-troubleshooting)
Expand Down
6 changes: 3 additions & 3 deletions docs/new-architecture-library-intro.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ Currently, this guide is written under the assumption that you will be using [Fl

To adopt the New Architecture, you start by creating these specs for your native modules and native components. You can do this prior to actually migrating to the New Architecture: the specs will be used later on to generate native interface code for all the supported platforms as a way to enforce uniform APIs across platforms.

#### Turbomodules
#### Turbo Native Modules

JavaScript spec files **must** be named `Native<MODULE_NAME>.js` and they export a `TurboModuleRegistry` `Spec` object. The name convention is important because the Codegen process looks for modules whose `js` (`jsx`, `ts`, or `tsx`) spec file starts with the keyword `Native`.

Expand Down Expand Up @@ -70,7 +70,7 @@ export default TurboModuleRegistry.get<Spec>('<MODULE_NAME>');
</TabItem>
</Tabs>

#### Fabric Components
#### Fabric Native Components

JavaScript spec files **must** be named `<FABRIC COMPONENT>NativeComponent.js` (for TypeScript use extension `.ts` or `.tsx`) and they export a `HostComponent` object. The name convention is important: the Codegen process looks for components whose spec file (either JavaScript or TypeScript) ends with the suffix `NativeComponent`.

Expand Down Expand Up @@ -214,7 +214,7 @@ Codegen can be configured in the `package.json` file of your Library. Add the fo

- The `codegenConfig` is the key used by the Codegen to verify that there is some code to generate.
- The `name` field is the name of the library.
- The `type` field is used to identify the type of module we want to create. Our suggestion is to keep `all` to support libraries that contain both TurboModule and Fabric Components.
- The `type` field is used to identify the type of module we want to create. Our suggestion is to keep `all` to support libraries that contain both Turbo Native Module and Fabric Native Components.
- The `jsSrcsDir` is the directory where the codegen will start looking for JavaScript specs.
- The `android.javaPackageName` is the name of the package where the generated code wil end up.

Expand Down
2 changes: 1 addition & 1 deletion docs/new-architecture-library-ios.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ Pod::Spec.new do |s|
}

s.dependency "React-Core"
s.dependency "React-RCTFabric" # This is for Fabric Component
s.dependency "React-RCTFabric" # This is for Fabric Native Component
s.dependency "React-Codegen"
s.dependency "RCT-Folly"
s.dependency "RCTRequired"
Expand Down
2 changes: 1 addition & 1 deletion docs/react-18-and-react-native.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ The concurrent features in React 18 are built on top of the new concurrent rende

Previous versions of React Native built on the old architecture **cannot** support concurrent rendering or concurrent features. This is because the old architecture relied on mutating the native trees, which doesn’t allow for React to prepare multiple versions of the tree at the same time.

Fortunately, the New Architecture was written bottom-up with concurrent rendering in mind, and is fully compatible with React 18. This means, in order to upgrade to React 18 in your React Native app, your application needs to be migrated to the React Native's New Architecture including Fabric and TurboModules.
Fortunately, the New Architecture was written bottom-up with concurrent rendering in mind, and is fully compatible with React 18. This means, in order to upgrade to React 18 in your React Native app, your application needs to be migrated to the React Native's New Architecture including Fabric Native Components and Turbo Native Modules.

## React 18 enabled by default

Expand Down
2 changes: 1 addition & 1 deletion docs/the-new-architecture/_markdown_native_deprecation.mdx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
:::info
Native Module and Native Components are our stable technologies used by the legacy architecture.
They will be deprecated in the future when the New Architecture will be stable. The New Architecture uses [TurboModule](./the-new-architecture/pillars-turbomodules) and [Fabric Components](./the-new-architecture/pillars-fabric-components) to achieve similar results.
They will be deprecated in the future when the New Architecture will be stable. The New Architecture uses [Turbo Native Module](./the-new-architecture/pillars-turbomodules) and [Fabric Native Components](./the-new-architecture/pillars-fabric-components) to achieve similar results.
:::
Loading