diff --git a/docs/the-new-architecture/backward-compatibility-fabric-components.md b/docs/the-new-architecture/backward-compatibility-fabric-components.md new file mode 100644 index 00000000000..a496d5391f0 --- /dev/null +++ b/docs/the-new-architecture/backward-compatibility-fabric-components.md @@ -0,0 +1,12 @@ +--- +id: backward-compatibility-fabric-components +title: Fabric Components as Native Components +--- + +This section describes the required steps to ensure that a Fabric Component can be used as a Native Component. + +The section should explain: + +- How to avoid installing dependencies when they are not needed +- The usage of compilation pragmas to avoid compiling code that requires types from the codegen +- API uniformity in JS, so that they don’t have to import different files diff --git a/docs/the-new-architecture/backward-compatibility-troubleshooting.md b/docs/the-new-architecture/backward-compatibility-troubleshooting.md new file mode 100644 index 00000000000..d2091da5d91 --- /dev/null +++ b/docs/the-new-architecture/backward-compatibility-troubleshooting.md @@ -0,0 +1,6 @@ +--- +id: backward-compatibility-troubleshooting +title: Troubleshooting +--- + +This section contains solutions to common problems that can happen when developing a backward compatible module or component. diff --git a/docs/the-new-architecture/backward-compatibility-turbomodules.md b/docs/the-new-architecture/backward-compatibility-turbomodules.md new file mode 100644 index 00000000000..3fd61393243 --- /dev/null +++ b/docs/the-new-architecture/backward-compatibility-turbomodules.md @@ -0,0 +1,12 @@ +--- +id: backward-compatibility-turbomodules +title: TurboModules as Native Modules +--- + +This section describes the required steps to ensure that a TurboModule can be used as a Native Module. + +The section explains: + +- How to avoid installing dependencies when they are not needed +- The usage of compilation pragmas to avoid compiling code that requires types from the codegen +- API uniformity in JS, so that they don’t have to import different files diff --git a/docs/the-new-architecture/backward-compatibility.md b/docs/the-new-architecture/backward-compatibility.md new file mode 100644 index 00000000000..426094a7297 --- /dev/null +++ b/docs/the-new-architecture/backward-compatibility.md @@ -0,0 +1,8 @@ +--- +id: backward-compatibility +title: What Backward Compatibility Is +--- + +This section contains a brief paragraph explaining why library developers should be mindful about backward compatibility. + +It could contains shared section between the backward compatibility for TurboModules and Native Components. diff --git a/docs/the-new-architecture/landing-page.md b/docs/the-new-architecture/landing-page.md new file mode 100644 index 00000000000..dc83d361c85 --- /dev/null +++ b/docs/the-new-architecture/landing-page.md @@ -0,0 +1,13 @@ +--- +id: landing-page +title: Introduction +--- + +This section is the entry point for the new guide’s documentation. +It contains some basic information about the New Architecture: its pillars, the version from which it has been made available and other very high-level information. Then, it should present the guide’s structure itself. + +This section should also contains a sort of Driving guide based on the user use-cases: + +- New user: link to how to use the new [app template](use-app-template) +- New Library developer: link to the [pillars](pillars) +- Old library developer/app developer: link to [the migration guide](../new-architecture-intro) diff --git a/docs/the-new-architecture/pillars-fabric-components.md b/docs/the-new-architecture/pillars-fabric-components.md new file mode 100644 index 00000000000..72892522d16 --- /dev/null +++ b/docs/the-new-architecture/pillars-fabric-components.md @@ -0,0 +1,19 @@ +--- +id: pillars-fabric-components +title: Fabric Components +--- + +This section contains a high-level introduction to Fabric components. It provides enough context to understand when a Fabric component is needed and how it roughly works. +It points to the [Renderer](https://reactnative.dev/architecture/fabric-renderer) section of the [Architecture](https://reactnative.dev/architecture/overview) tab for a deep dive into the technical details. + +This section must have a warning that it works only with the new architecture enabled. It points to the [migration section](../new-architecture-intro). + +## How to Create a Fabric Components + +This section is a step-by-step guide to create a Fabric component from scratch. The list of subsections is roughly: + +- JS spec (with all the supported features) +- Configuration (package.json, cocoapods, gradle, …) and CodeGen +- Native code (one section for iOS and one for Android) +- Integration in an App (`yarn add` and how to connect the JS specs to the app itself) +- Troubleshooting (common issues and how to solve them) diff --git a/docs/the-new-architecture/pillars-turbomodule.md b/docs/the-new-architecture/pillars-turbomodule.md new file mode 100644 index 00000000000..ee305ee1656 --- /dev/null +++ b/docs/the-new-architecture/pillars-turbomodule.md @@ -0,0 +1,18 @@ +--- +id: pillars-turbomodules +title: TurboModules +--- + +This section contains a high-level introduction to TurboModules. It provides enough context to understand when a TurboModule is needed and how it roughly works. + +This section must have a warning that it works only with the new architecture enabled. It points to the [migration section](../new-architecture-intro). + +## How to create a Turbomodule + +This section is a step-by-step guide to create a TurboModule from scratch. The list of subsections is roughly: + +- JS spec (with all the supported features) +- Configuration (package.json, cocoapods, gradle, …) and CodeGen +- Native code (one section for iOS and one for Android) +- Integration in an App (`yarn add` and how to connect the JS specs to the app itself) +- Troubleshooting (common issues and how to solve them) diff --git a/docs/the-new-architecture/pillars.md b/docs/the-new-architecture/pillars.md new file mode 100644 index 00000000000..d86eed0c527 --- /dev/null +++ b/docs/the-new-architecture/pillars.md @@ -0,0 +1,10 @@ +--- +id: pillars +title: What Compose the New Architecture +--- + +This section recalls the main pillars from the new-architecture-intro section. + +It contains a pointer to the `Migration` section and it specifies that these pillars work only when the new architecture is enabled. It also points to the prerequisites. + +It describes how the following sections are organized. diff --git a/docs/the-new-architecture/use-app-template.md b/docs/the-new-architecture/use-app-template.md new file mode 100644 index 00000000000..d575081f322 --- /dev/null +++ b/docs/the-new-architecture/use-app-template.md @@ -0,0 +1,7 @@ +--- +id: use-app-template +title: Using the New App Template +--- + +This section describes the new app template generated by the React Native CLI and how to use it properly. +It should explain how to create a new app, which command should be issued to install the dependencies and to run it on the different platforms. diff --git a/docs/the-new-architecture/why.md b/docs/the-new-architecture/why.md new file mode 100644 index 00000000000..81450add22c --- /dev/null +++ b/docs/the-new-architecture/why.md @@ -0,0 +1,7 @@ +--- +id: why +title: Why A New Architecture +--- + +This section briefly explains why we decided to move away from the old architecture, and it describes succinctly the main benefits of adopting the new architecture. +It points to the [Architecture](https://reactnative.dev/architecture/overview) tab of the website for a deep dive into the ‘why’s. diff --git a/website/sidebars.json b/website/sidebars.json index d8f98b37187..be8630c690b 100644 --- a/website/sidebars.json +++ b/website/sidebars.json @@ -81,32 +81,66 @@ "direct-manipulation" ], "The New Architecture": [ - "new-architecture-intro", + "the-new-architecture/landing-page", + "the-new-architecture/why", + "the-new-architecture/use-app-template", { "type": "category", - "label": "Supporting in your Library", + "label": "Pillars", "collapsible": false, "collapsed": false, "items": [ - "new-architecture-library-intro", - "new-architecture-library-android", - "new-architecture-library-ios" + "the-new-architecture/pillars", + "the-new-architecture/pillars-turbomodules", + "the-new-architecture/pillars-fabric-components" ] }, { "type": "category", - "label": "Supporting in your App", + "label": "Backward Compatibility", "collapsible": false, "collapsed": false, "items": [ - "new-architecture-app-intro", - "new-architecture-app-modules-android", - "new-architecture-app-modules-ios", - "new-architecture-app-renderer-android", - "new-architecture-app-renderer-ios" + "the-new-architecture/backward-compatibility", + "the-new-architecture/backward-compatibility-turbomodules", + "the-new-architecture/backward-compatibility-fabric-components", + "the-new-architecture/backward-compatibility-troubleshooting" + ] + }, + { + "type": "category", + "label": "Migration", + "collapsible": false, + "collapsed": false, + "items": [ + "new-architecture-intro", + { + "type": "category", + "label": "Supporting in your Library", + "collapsible": false, + "collapsed": false, + "items": [ + "new-architecture-library-intro", + "new-architecture-library-android", + "new-architecture-library-ios" + ] + }, + { + "type": "category", + "label": "Supporting in your App", + "collapsible": false, + "collapsed": false, + "items": [ + "new-architecture-app-intro", + "new-architecture-app-modules-android", + "new-architecture-app-modules-ios", + "new-architecture-app-renderer-android", + "new-architecture-app-renderer-ios" + ] + }, + "new-architecture-troubleshooting" ] }, - "new-architecture-troubleshooting", "new-architecture-appendix" ], "Android and iOS guides": [