Choosing between RNW Paper and RNW Fabric for a new project

[fhilleriteau-fdi]

Hi !

Our team is currently considering porting one of our React Native application from Android and iOS to Windows and Mac OS, and we would like to use React Native Windows to achieve that.

Our application is a communication application, which relies on a constant UDP socket, which, if I understand correctly is not really possible to keep in background with the current RNW Paper architecture, due to the UWP application lifecycle.

I understand from the documentation that the new RNW Fabric architecture is based on Windows App SDK, which doesn't have the same background processing limitations as UWP. Which seems more appropriate for our use case, as well as the ability to deploy the application without the Microsoft Store. But that this new architecture is still in an early stage.

We are currently waging our options between the following options :

• starting the porting right now on the current RNW Paper architecture as a UWP application, with potentially decreased functionality and update the app to the new Fabric architecture as soon as it's becomes possible
• waiting for the new RNW Fabric architecture to be in a more mature stage to start porting the application to Windows (would be possible for us if we're talking in months, but tough if we're talking in years)
• starting the porting right now on the new RNW Fabric architecture, but I guess we would run into a lot of issues, especially with libraries native modules/components

In order to make up our mind we have a few questions :

• Will it be easy to migrate a RNW Paper UWP application with a few native modules/components to the new Fabric architecture ? Will it be equivalent to porting the application to Windows from scratch a second time ?
• Do you know if deploying the new RNW Fabric architecture version of the app over an old Paper UWP one will be possible as a simple update in the Microsoft Store / MSIX package ? Would we have issues reading the old version's user data ?
• Would we still be able to update our React Native project to the new React Native versions if we use the current RNW Paper architecture ? Or Would we be stuck on a specific RN version ?
• Could we activate the new React Native architecture on our mobile targets while having our Windows target still using the RNW Paper one ?
• Is the current RNW Paper architecture compatible with the new RN architecture way of declaring Native modules ? With the typescript declaration and Codegen. Would we have to declare our Android/iOS turbo native modules separately from our Windows native modules ?
• Do you have any time estimation about the new RNW Fabric architecture milestones that you can share ? (I can understand if you don't, no pressure)
• Once the new RNW Fabric architecture becomes production ready, will the RN libraries supporting Windows have to update their library to support it manually ? Adding more time to be able to use the new architecture.
• Will the new RNW Fabric architecture be production ready sooner for the C++ template than for the C# template ?

I'm sorry for the wall of questions, I'm new to this project and to the Windows ecosystem.
Thank you all for your work on the project !

[austinhallock]

I can chime in as someone who has been porting a RNW Paper app to Fabric. IMO you should start on Fabric. I think a lot of the issues you'd run into starting on Fabric now, you'd still run into when Fabric is "more ready".

Those issues mostly revolve around lack of 3rd party module support. You'll have to write some C++ and basically port what you need yourself, but it's not too bad. Most of the existing RNW 3rd party modules aren't really actively updated, so my guess is even when RNW new arch is promoted as ready, support for those modules will still lag behind.

Even if you were to start with Paper, the module ecosystem is pretty sparse compared to mobile, so you'd probably need to write some custom C++ anyways, then need to migrate that to Fabric eventually (that's what has taken the most time for me - rewriting the custom UWP code I had for Win32).

The new architecture on Windows is pretty fantastic. On mobile, old arch -> new arch isn't that big of a leap, but on Windows the performance seems to be significantly better, and not being restricted by UWP is a huge improvement.

Outside of 3rd party modules, there are some funky workarounds I've had to do for GestureHandler, custom fonts, etc... but they're not too bad.

With that said, since it sounds like you can wait a few months before starting, it might be worth waiting. I'd guess the module ecosystem won't change by then, but I imagine there will be better docs and more of the kinks will be worked out :)

To try to answer your questions:

• Will it be easy to migrate a RNW Paper UWP application with a few native modules/components to the new Fabric architecture ? Will it be equivalent to porting the application to Windows from scratch a second time ?

  • In my experience it's almost like porting to Windows from scratch a second time, because of lack of community modules for both Paper and Fabric. If you're only using really popular non-UI modules like AsyncStorage, Clipboard, etc... then porting from Paper to Fabric would be easy. But anything that uses UI will be more involved.

• Do you know if deploying the new RNW Fabric architecture version of the app over an old Paper UWP one will be possible as a simple update in the Microsoft Store / MSIX package ? Would we have issues reading the old version's user data ?

  • Unsure on this one.

• Would we still be able to update our React Native project to the new React Native versions if we use the current RNW Paper architecture ? Or Would we be stuck on a specific RN version ?

  • I'd guess you could still update as long as Paper/old arch is supported by RN, but not positive

• Could we activate the new React Native architecture on our mobile targets while having our Windows target still using the RNW Paper one ?

  • It might be worth setting up your project like this. Then you can even have your mobile on one version of RN and Windows / Mac on other versions. Sometimes RNMac is a bit behind on releases, so you can upgrade without having all platforms supporting a specific version

• Is the current RNW Paper architecture compatible with the new RN architecture way of declaring Native modules ? With the typescript declaration and Codegen. Would we have to declare our Android/iOS turbo native modules separately from our Windows native modules ?

  • It's the same TS declaration and Codegen. It'll just run codegen-windows and generate g.h files that your custom C++ code implements

• Do you have any time estimation about the new RNW Fabric architecture milestones that you can share ? (I can understand if you don't, no pressure)

  • I can't speak on future milestones, but it's in a very usable spot right now IMO

• Once the new RNW Fabric architecture becomes production ready, will the RN libraries supporting Windows have to update their library to support it manually ? Adding more time to be able to use the new architecture.

  • As far as I know, the migration for non-UI modules is pretty straightforward. But for anything with UI, AFAIK it'd need to be migrated from UWP to Win32/WinAppSDK.

• Will the new RNW Fabric architecture be production ready sooner for the C++ template than for the C# template ?

  • C++ is more or less ready (IMO as a user). I'm not sure if any progress has been made on C#, but if you want to start sooner, that probably means C++

I think the team has done a really great job with the new architecture. It's a lot more than just TurboModules and Fabric - it's migrating from UWP to composition-based Win32, which is a huge change for the better.

[austinhallock]

For now we just include our custom fonts as resources in VS and use AddFontResourceW in our main cpp file. With that we're able to use the font normally with React Native fontFamily style propertly

[AlkanV]

it worked!

thank you very much sir!

[AlkanV]

sorry to bother you again....

did you managed to use and render svgs inside new architecture?

seems like rn-svg is not compatible with rnw fabric new arch enabled.

[austinhallock]

I think SVGs were working by default in iirc (but I might be misremembering). We don't use SVGs because they tend to be much worse for performance. Eg for icons we just use a custom font. And for images we just use png

[AlkanV]

well in the end, what i did is convert the svgs into fonts using icomoon and use it with AddFontResourceW - with my custom FontLoader. it is working is expected now. thank you very much for your help!