Skip to content

Commit

Permalink
[Do Not Merge] Refactoring The New Architecture (#3029)
Browse files Browse the repository at this point in the history
  • Loading branch information
Riccardo committed Mar 29, 2022
1 parent 5f28c24 commit 9d37c2a
Show file tree
Hide file tree
Showing 12 changed files with 167 additions and 13 deletions.
Original file line number Diff line number Diff line change
@@ -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
Original file line number Diff line number Diff line change
@@ -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.
12 changes: 12 additions & 0 deletions docs/the-new-architecture/backward-compatibility-turbomodules.md
Original file line number Diff line number Diff line change
@@ -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
8 changes: 8 additions & 0 deletions docs/the-new-architecture/backward-compatibility.md
Original file line number Diff line number Diff line change
@@ -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.
13 changes: 13 additions & 0 deletions docs/the-new-architecture/landing-page.md
Original file line number Diff line number Diff line change
@@ -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)
7 changes: 7 additions & 0 deletions docs/the-new-architecture/pillars-codegen.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
id: pillars-codegen
title: CodeGen
---

This section contains a refactoring of the [Appendix](../new-architecture-appendix) focused on the codegen details.
Further sections that needs to refer to the codegen should refer to this page, instead.
19 changes: 19 additions & 0 deletions docs/the-new-architecture/pillars-fabric-components.md
Original file line number Diff line number Diff line change
@@ -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)
18 changes: 18 additions & 0 deletions docs/the-new-architecture/pillars-turbomodule.md
Original file line number Diff line number Diff line change
@@ -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)
10 changes: 10 additions & 0 deletions docs/the-new-architecture/pillars.md
Original file line number Diff line number Diff line change
@@ -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.
7 changes: 7 additions & 0 deletions docs/the-new-architecture/use-app-template.md
Original file line number Diff line number Diff line change
@@ -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.
7 changes: 7 additions & 0 deletions docs/the-new-architecture/why.md
Original file line number Diff line number Diff line change
@@ -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.
61 changes: 48 additions & 13 deletions website/sidebars.json
Original file line number Diff line number Diff line change
Expand Up @@ -81,33 +81,68 @@
"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",
"the-new-architecture/pillars-codegen"
]
},
{
"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"
]
},
"new-architecture-troubleshooting",
"new-architecture-appendix"
{
"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-appendix"
]
}
],
"Android and iOS guides": [
{
Expand Down

0 comments on commit 9d37c2a

Please sign in to comment.