📚 [Guide] Create a backward compatible Turbomodule #3023

cipolleschi · 2022-03-21T10:20:25Z

This PR contains a first draft of a Guide to create a TurboModule which is backward compatible with the new architecture.

This guide is intended to be used as a reference to understand better how the backward compatibility can be achieved and what are the differences between a Native Module and a Turbomodule, from a developer perspective.

netlify · 2022-03-21T10:22:40Z

✅ Deploy Preview for react-native ready!

🔨 Explore the source changes: 95db79d

🔍 Inspect the deploy log: https://app.netlify.com/sites/react-native/deploys/6239a2c0899af50008deb46e

😎 Browse the preview: https://deploy-preview-3023--react-native.netlify.app

Simek

Hello @cipolleschi, thank you for the great work on fixing and extending the documentation lately! 👍

It looks like the page is not linked in any sidebar, which makes the page only accessible via URL. You probably want to add this page somewhere in there:

https://github.com/facebook/react-native-website/blob/main/website/sidebars.json#L83-L111

Other that that, I have left two, small suggestions according to the new page content.

docs/new-architecture-backward-turbomodule.md

cipolleschi · 2022-03-21T11:56:02Z

Hi @Simek! Thanks for the suggestions. I'll go through applying them now.

About the sidebar thing, I left the article out on purpose for two reasons:

It is not complete (missing the android parts) so I didn't want it to be found by final users.
I'd like to discuss the structure of the New Architecture section because I think it could be organidsed in a more linear way.

What do you think?

docs/new-architecture-backward-turbomodule.md

cipolleschi · 2022-03-21T12:05:39Z

I should have fixed all the comments! :D

Simek · 2022-03-21T12:30:28Z

docs/new-architecture-backward-turbomodule.md

+
+To create a turbomodule with the React Native CLI, run the following command:
+
+```sh title=""


Suggested change

```sh title=""

```sh

Just a small fix suggestion.

Simek

Thank you for the quick updates! For the formatting and website perspective this LGTM.

Let's have a @cortinico look at the technical side of this. 🙂

There are few more small formatting (capitalization of Metro, JavaScript, TypeScript etc.) and punctuation issues (mostly missing dots at the end of sentences), but since this still a draft we can correct this in the future.

cipolleschi · 2022-03-21T14:07:40Z

Great, thanks!
I should have fixed also the capitalizations and the punctuation issues that I could find.

docs/new-architecture-backward-turbomodule.md

cortinico · 2022-03-21T15:58:35Z

docs/new-architecture-backward-turbomodule.md

+  ],
+  "keywords": ["react-native", "ios", "android"],
+  "repository": "https://github.com/<your_github_handle>/example-library",
+  "author": "<Your Name> <your_email@your_provide.com> (https://github.com/<your_github_handle>)",


Suggested change

"author": "<Your Name> <your_email@your_provide.com> (https://github.com/<your_github_handle>)",

"author": "<Your Name> <your_email@your_provider.com> (https://github.com/<your_github_handle>)",

docs/new-architecture-backward-turbomodule.md

cortinico · 2022-03-21T15:59:50Z

docs/new-architecture-backward-turbomodule.md

+
+This section and the following are a practical guides to create a module that is backward compatible. We are not diving deep into what can be done with Native Modules. For more informations on that topic, have a look [here](native-modules-intro).
+
+If you are interested in creating a Turbomodule, you can skip this part and directly go [here](#create-the-turbomodule). Consider that most of the code of a Native Module is needed for a Turbomodule.


I think that the "Consider that most of the code of a Native Module is needed for a Turbomodule" is confusing for the reader.

If a reader is looking into creating a TurboModule without dealing with backward compat, probably is not even reading this page right?

I agree. I moved the sentence to the previous paragraph, adding some more context.

docs/new-architecture-backward-turbomodule.md

cortinico · 2022-03-21T16:23:44Z

Great stuff 👍

A couple of things that are worth mentioning:

We should potentially mention that the New Architecture approach would work for apps that have the TM system enabled.
For that reason, we could link users to this page: https://reactnative.dev/docs/next/new-architecture-app-modules-ios
We should clarify what happens if you import the New Arch file but you have the TM system disabled (i.e. you're on the old arch).

cipolleschi · 2022-03-22T10:18:12Z

Thanks!

For your points 1 and 2, I added a sentence at line 426.

It's not clear to me what do you mean for your point 3, though. The whole point of the article is that we can install the module in both the architecture. Some problem arises if:

A user in the old architecture runs RCT_NEW_ARCH_ENABLED=1 pod install
A user in the new architecture runs pod install

But I think that these are clearly explained throughout the guide and also with the summary. I think that the user can expect some error if it forget about these steps. What do you think?

cortinico · 2022-03-22T15:32:08Z

It's not clear to me what do you mean for your point 3, though. The whole point of the article is that we can install the module in both the architecture. Some problem arises if:

Discussed offline but following up here for the sake of transparency.

I think we will adjust the guide a bit to adopt the approach followed by some of the Software Mansion library:

https://github.com/software-mansion/react-native-gesture-handler/blob/a144c0ebaba3b544d3455c7eced084d66dff5d7e/src/components/GestureHandlerButton.tsx#L6-L10

Ideally we would like to don't ask the user to update the import but just have an abstraction that will expose the correct object given the underlying infrastructure.

cortinico · 2022-07-20T09:16:30Z

Closing as this is stale and merged in #3037

facebook-github-bot added CLA Signed p: Facebook Partner labels Mar 21, 2022

cipolleschi force-pushed the docs/create_backward_compatible_turbomodule branch 3 times, most recently from 78e1d3a to 0698e45 Compare March 21, 2022 11:16

Simek requested changes Mar 21, 2022

View reviewed changes

docs/new-architecture-backward-turbomodule.md Outdated Show resolved Hide resolved

docs/new-architecture-backward-turbomodule.md Outdated Show resolved Hide resolved

Simek reviewed Mar 21, 2022

View reviewed changes

docs/new-architecture-backward-turbomodule.md Outdated Show resolved Hide resolved

Simek reviewed Mar 21, 2022

View reviewed changes

docs/new-architecture-backward-turbomodule.md Outdated Show resolved Hide resolved

Simek reviewed Mar 21, 2022

View reviewed changes

docs/new-architecture-backward-turbomodule.md Outdated Show resolved Hide resolved

Simek reviewed Mar 21, 2022

View reviewed changes

docs/new-architecture-backward-turbomodule.md Outdated Show resolved Hide resolved

cipolleschi force-pushed the docs/create_backward_compatible_turbomodule branch from 0698e45 to 3b07322 Compare March 21, 2022 12:05

Simek reviewed Mar 21, 2022

View reviewed changes

Simek approved these changes Mar 21, 2022

View reviewed changes

Simek requested a review from cortinico March 21, 2022 12:35

cipolleschi force-pushed the docs/create_backward_compatible_turbomodule branch from 3b07322 to e9c53d6 Compare March 21, 2022 14:07

cortinico reviewed Mar 21, 2022

View reviewed changes

cipolleschi force-pushed the docs/create_backward_compatible_turbomodule branch from e9c53d6 to df09aba Compare March 22, 2022 10:12

[Guide] Create a backward compatible Turbomodule

95db79d

cipolleschi force-pushed the docs/create_backward_compatible_turbomodule branch from df09aba to 95db79d Compare March 22, 2022 10:19

cortinico closed this Jul 20, 2022


		To create a turbomodule with the React Native CLI, run the following command:

		```sh title=""

	"author": "<Your Name> <your_email@your_provide.com> (https://github.com/<your_github_handle>)",
	"author": "<Your Name> <your_email@your_provider.com> (https://github.com/<your_github_handle>)",


		This section and the following are a practical guides to create a module that is backward compatible. We are not diving deep into what can be done with Native Modules. For more informations on that topic, have a look [here](native-modules-intro).

		If you are interested in creating a Turbomodule, you can skip this part and directly go [here](#create-the-turbomodule). Consider that most of the code of a Native Module is needed for a Turbomodule.

📚 [Guide] Create a backward compatible Turbomodule #3023

📚 [Guide] Create a backward compatible Turbomodule #3023

Uh oh!

Conversation

cipolleschi commented Mar 21, 2022

Uh oh!

netlify bot commented Mar 21, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Simek left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cipolleschi commented Mar 21, 2022

Uh oh!

Uh oh!

cipolleschi commented Mar 21, 2022

Uh oh!

Simek Mar 21, 2022

Choose a reason for hiding this comment

Uh oh!

Simek left a comment

Choose a reason for hiding this comment

Uh oh!

cipolleschi commented Mar 21, 2022

Uh oh!

Uh oh!

Uh oh!

cortinico Mar 21, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

cortinico Mar 21, 2022

Choose a reason for hiding this comment

Uh oh!

cipolleschi Mar 22, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

cortinico commented Mar 21, 2022

Uh oh!

cipolleschi commented Mar 22, 2022

Uh oh!

cortinico commented Mar 22, 2022

Uh oh!

cortinico commented Jul 20, 2022

Uh oh!

Uh oh!

netlify bot commented Mar 21, 2022 •

edited

Loading