Skip to content

Commit e2f2e34

Browse files
author
Riccardo
committed
[Do Not Merge] Refactoring The New Architecture (#3029)
1 parent 5f28c24 commit e2f2e34

13 files changed

+171
-12
lines changed

‎docs/the-new-architecture/backward-compatibility-fabric-components.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
id: backward-compatibility-fabric-components
3+
title: Fabric Components as Native Components
4+
---
5+
6+
This section describes the required steps to ensure that a Fabric Component can be used as a Native Component.
7+
8+
The section should explain:
9+
10+
- How to avoid installing dependencies when they are not needed
11+
- The usage of compilation pragmas to avoid compiling code that requires types from the codegen
12+
- API uniformity in JS, so that they don’t have to import different files

‎docs/the-new-architecture/backward-compatibility-troubleshooting.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
id: backward-compatibility-troubleshooting
3+
title: Troubleshooting
4+
---
5+
6+
This section contains solutions to common problems that can happen when developing a backward compatible module or component.

‎docs/the-new-architecture/backward-compatibility-turbomodules.md

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
---
2+
id: backward-compatibility-turbomodules
3+
title: TurboModules as Native Modules
4+
---
5+
6+
This section describes the required steps to ensure that a TurboModule can be used as a Native Module.
7+
8+
The section explains:
9+
10+
- How to avoid installing dependencies when they are not needed
11+
- The usage of compilation pragmas to avoid compiling code that requires types from the codegen
12+
- API uniformity in JS, so that they don’t have to import different files

‎docs/the-new-architecture/backward-compatibility.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
id: backward-compatibility
3+
title: What Backward Compatibility Is
4+
---
5+
6+
This section contains a brief paragraph explaining why library developers should be mindful about backward compatibility.
7+
8+
It could contains shared section between the backward compatibility for TurboModules and Native Components.

‎docs/the-new-architecture/landing-page.md

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
---
2+
id: landing-page
3+
title: Introduction
4+
---
5+
6+
This section is the entry point for the new guide’s documentation.
7+
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.
8+
9+
This section should also contains a sort of Driving guide based on the user use-cases:
10+
11+
- New user: link to how to use the new [app template](use-app-template)
12+
- New Library developer: link to the [pillars](pillars)
13+
- Old library developer/app developer: link to [the migration guide](../new-architecture-intro)

‎docs/the-new-architecture/pillars-codegen.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
id: pillars-codegen
3+
title: CodeGen
4+
---
5+
6+
This section contains a refactoring of the [Appendix](../new-architecture-appendix) focused on the codegen details.
7+
Further sections that needs to refer to the codegen should refer to this page, instead.

‎docs/the-new-architecture/pillars-fabric-components.md

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
id: pillars-fabric-components
3+
title: Fabric Components
4+
---
5+
6+
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.
7+
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.
8+
9+
This section must have a warning that it works only with the new architecture enabled. It points to the [migration section](../new-architecture-intro).
10+
11+
## How to Create a Fabric Components
12+
13+
This section is a step-by-step guide to create a Fabric component from scratch. The list of subsections is roughly:
14+
15+
- JS spec (with all the supported features)
16+
- Configuration (package.json, cocoapods, gradle, …) and CodeGen
17+
- Native code (one section for iOS and one for Android)
18+
- Integration in an App (`yarn add` and how to connect the JS specs to the app itself)
19+
- Troubleshooting (common issues and how to solve them)

‎docs/the-new-architecture/pillars-turbomodule.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
id: pillars-turbomodules
3+
title: TurboModules
4+
---
5+
6+
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.
7+
8+
This section must have a warning that it works only with the new architecture enabled. It points to the [migration section](../new-architecture-intro).
9+
10+
## How to create a Turbomodule
11+
12+
This section is a step-by-step guide to create a TurboModule from scratch. The list of subsections is roughly:
13+
14+
- JS spec (with all the supported features)
15+
- Configuration (package.json, cocoapods, gradle, …) and CodeGen
16+
- Native code (one section for iOS and one for Android)
17+
- Integration in an App (`yarn add` and how to connect the JS specs to the app itself)
18+
- Troubleshooting (common issues and how to solve them)

‎docs/the-new-architecture/pillars.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
---
2+
id: pillars
3+
title: What Compose the New Architecture
4+
---
5+
6+
This section recalls the main pillars from the new-architecture-intro section.
7+
8+
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.
9+
10+
It describes how the following sections are organized.

‎docs/the-new-architecture/use-app-template.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
id: use-app-template
3+
title: Using the New App Template
4+
---
5+
6+
This section describes the new app template generated by the React Native CLI and how to use it properly.
7+
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.

‎docs/the-new-architecture/why.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
id: why
3+
title: Why A New Architecture
4+
---
5+
6+
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.
7+
It points to the [Architecture](https://reactnative.dev/architecture/overview) tab of the website for a deep dive into the ‘why’s.

‎website/sidebars.json

Lines changed: 46 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -81,32 +81,66 @@
8181
"direct-manipulation"
8282
],
8383
"The New Architecture": [
84-
"new-architecture-intro",
84+
"the-new-architecture/landing-page",
85+
"the-new-architecture/why",
86+
"the-new-architecture/use-app-template",
8587
{
8688
"type": "category",
87-
"label": "Supporting in your Library",
89+
"label": "Pillars",
8890
"collapsible": false,
8991
"collapsed": false,
9092
"items": [
91-
"new-architecture-library-intro",
92-
"new-architecture-library-android",
93-
"new-architecture-library-ios"
93+
"the-new-architecture/pillars",
94+
"the-new-architecture/pillars-turbomodules",
95+
"the-new-architecture/pillars-fabric-components"
9496
]
9597
},
9698
{
9799
"type": "category",
98-
"label": "Supporting in your App",
100+
"label": "Backward Compatibility",
99101
"collapsible": false,
100102
"collapsed": false,
101103
"items": [
102-
"new-architecture-app-intro",
103-
"new-architecture-app-modules-android",
104-
"new-architecture-app-modules-ios",
105-
"new-architecture-app-renderer-android",
106-
"new-architecture-app-renderer-ios"
104+
"the-new-architecture/backward-compatibility",
105+
"the-new-architecture/backward-compatibility-turbomodules",
106+
"the-new-architecture/backward-compatibility-fabric-components",
107+
"the-new-architecture/backward-compatibility-troubleshooting"
108+
]
109+
},
110+
{
111+
"type": "category",
112+
"label": "Migration",
113+
"collapsible": false,
114+
"collapsed": false,
115+
"items": [
116+
"new-architecture-intro",
117+
{
118+
"type": "category",
119+
"label": "Supporting in your Library",
120+
"collapsible": false,
121+
"collapsed": false,
122+
"items": [
123+
"new-architecture-library-intro",
124+
"new-architecture-library-android",
125+
"new-architecture-library-ios"
126+
]
127+
},
128+
{
129+
"type": "category",
130+
"label": "Supporting in your App",
131+
"collapsible": false,
132+
"collapsed": false,
133+
"items": [
134+
"new-architecture-app-intro",
135+
"new-architecture-app-modules-android",
136+
"new-architecture-app-modules-ios",
137+
"new-architecture-app-renderer-android",
138+
"new-architecture-app-renderer-ios"
139+
]
140+
},
141+
"new-architecture-troubleshooting"
107142
]
108143
},
109-
"new-architecture-troubleshooting",
110144
"new-architecture-appendix"
111145
],
112146
"Android and iOS guides": [

‎website/static/_redirects

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,3 +37,9 @@
3737
/docs/0.66/view-flattening /architecture/view-flattening
3838
/docs/0.66/threading-model /architecture/threading-model
3939
/docs/0.66/architecture-glossary /architecture/glossary
40+
41+
# New Architecture Refactoring
42+
/docs/next/the-new-architecture/landing-page /docs/the-new-architecture/landing-page
43+
/docs/next/the-new-architecture/pillars /docs/the-new-architecture/pillars
44+
/docs/next/new-architecture-intro /docs/new-architecture-intro
45+
/docs/next/new-architecture-appendix /docs/new-architecture-appendix

0 commit comments

Comments
 (0)