Skip to content

Commit

Permalink
Apply suggestions from code review
Browse files Browse the repository at this point in the history
Co-authored-by: Jon Thysell <[email protected]>
  • Loading branch information
TatianaKapos and jonthysell authored Nov 8, 2024
1 parent 235582f commit 07d9467
Show file tree
Hide file tree
Showing 3 changed files with 50 additions and 6 deletions.
52 changes: 48 additions & 4 deletions docs/NewArch.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,25 @@
---
id: new-arch
id: new-architecture
title: New vs. Old Architecture
---

React Native's [new architecture](https://reactnative.dev/docs/0.75/the-new-architecture/landing-page) has become the default with [version 0.76](https://reactnative.dev/blog/2024/10/23/the-new-architecture-is-here), bringing many framework improvements including the advanced rendering system [Fabric](https://reactnative.dev/architecture/fabric-renderer). While React Native for Windows isn't quite yet ready to make the new architecture the default, we've been hard at work and are excited to offer a sneak peek into how you can start adopting the new architecture for Windows.
React Native's [New Architecture](https://reactnative.dev/architecture/landing-page) has become the default with [version 0.76](https://reactnative.dev/blog/2024/10/23/the-new-architecture-is-here), bringing many framework improvements including the advanced rendering system [Fabric](https://reactnative.dev/architecture/fabric-renderer). While React Native for Windows isn't quite yet ready to make the New Architecture the default, we've been hard at work and are excited to offer a sneak peek into adopting it on Windows.

On Windows, the implementation of the "Paper" rendering architecture was based on UWP and WinUI. To meet the requirements of the new "Fabric" rendering architecture, the Windows implementation now uses the modern [Windows App SDK Scene Graph](https://learn.microsoft.com/en-us/windows/apps/windows-app-sdk/composition). This evolution aims to unify rendering logic cross-platform in C++ and aligns more closely with the Windows App SDK and WinUI3 that favor Win32 applications. This means that apps built with the new architecture will default to Win32 rather than UWP, a change made to enhance compatibility with Windows’ latest frameworks. Apps will also be able to take advantage of the modern WinUI3 control set from the Windows App SDK.
> **Important:** At this stage, React Native for Windows' New Architecture support comes with some important caveats, and is best suited for early adopters comfortable with a work-in-progress experience with incomplete documentation. For those willing to dive in, the New Architecture offers a glimpse into the exciting future of React Native Windows development.
For developers using RNW based on UWP, **UWP Paper applications remain fully supported** and there are no immediate plans to remove support. However, **UWP and Fabric together are currently not supported**. We will provide clear migration guidance for UWP Paper apps once Fabric support is fully established. At this stage, Fabric on Windows is best suited for early adopters comfortable with a work-in-progress experience, and the documentation may not yet be as comprehensive. For those willing to dive in, the new architecture offers a glimpse into the future of React Native Windows development.
## From UWP to WinAppSDK

On Windows, the implementation of the (Old Architecture) Paper render used the [Universal Windows Platform](https://learn.microsoft.com/en-us/windows/uwp/). To meet the requirements of the new Fabric renderer, the Windows implementation now uses the modern [Windows App SDK](https://learn.microsoft.com/en-us/windows/apps/windows-app-sdk/). This evolution aims to unify rendering logic cross-platform in C++

This also means that all React Native for Windows New Architecture apps will now be Win32, WinAppSDK-based applications. This aligns with the current recommendations for Windows app development, providing React Native for Windows developers with greater access to the latest Windows' frameworks.

All React Native for Windows Old Architecture apps will remain UWP applications. It is still possible and supported to create and maintain apps that target the Old Architecture and UWP.

However, understand that while there are no immediate plans to deprecate support for Old Architecture applications, almost all future investments are focused on the New Architecture, and as React Native eventually deprecates Old Architecture support, so too will React Native for Windows. We will provide clear migration guidance for apps once New Architecture support is better established.

> **Important:** There are no plans to support New Architecture on UWP nor Old Architecture on WinAppSDK. Previous experimental features that enabled either scenario are not officially supported.
For more information about the reasoning behind the change from UWP to WinAppSDK, see the (FAQ)(#faq) below.

## Creating a new Architecture Application

Expand Down Expand Up @@ -68,3 +80,35 @@ Each component below links to the corresponding issue label in our GitHub repo t
- [Flyout](https://github.com/microsoft/react-native-windows/issues/11921)
- [Popup](https://github.com/microsoft/react-native-windows/issues/11921)
- [Glyph](https://github.com/microsoft/react-native-windows/issues/11961)

## FAQ

### Why the change from UWP to Windows App SDK?

For years, React Native for Windows has built Windows apps using the [Universal Windows Platform](https://learn.microsoft.com/en-us/windows/uwp/) and its [XAML](https://learn.microsoft.com/en-us/windows/uwp/xaml-platform/xaml-overview) technologies.

However, this implementation has never been perfect. UWP XAML has its own expectations and limitations with rendering UI, which has often come into conflict with React Native's expectations. This has always generated a certain class of issues that simply couldn't be solved by React Native for Windows.

Furthermore, many requirements of the New Architecture, particularly the faster, more polished UI enabled by the Fabric renderer, would not be possible without extensive, fundamental changes to UWP XAML.

Now, the current recommendation for new Windows apps is to build using the [Windows App SDK](https://learn.microsoft.com/en-us/windows/apps/windows-app-sdk/). There are many benefits for Windows developers to migrate their apps off UWP and onto the Windows App SDK. Most importantly for React Native for Windows, the Windows App SDK gives us the tools to implement the New Architecture properly.

### Why the change from XAML to Composition?

It is not always possible to adapt the XAML framework, let alone specific controls, to meet the API requirements and expectations of React Native. However, thanks to the Windows App SDK, we're now able to "drop down" and use the layer of UI primitives under XAML, aka Composition, or the [Windows App SDK Scene Graph](https://learn.microsoft.com/en-us/windows/apps/windows-app-sdk/composition).

So now, instead of trying to implement React Native components with XAML controls (and perhaps fight their default behavior) we're now able to implement those components more directly in Composition, giving us the power to align with React Native's expectations rather than XAML's.

## What if I still need/want XAML controls?

We understand that customers may still want to use XAML controls (whether it's any of the rich controls included with Windows App SDK's WinUI 3, or any of their own existing custom controls) within their React Native for Windows app's UI.

We are actively working on enabling this, but it's not quite production ready yet. We fully expect to support that developers, especially community module developers, will be able to implement New Architecture `ComponentView`s by loading XAML controls, rather than requiring them to implement the controls "from scratch" using the base Composition APIs.

## What about C# support?

We are actively working on adding support for C# app and module developers. The transition from UWP C# to modern .NET C# requires some more extensive project changes than was required for supporting C++.

## Will the Old Architecture ever support targeting Windows App SDK?

No. Then plan is, Old Architecture targets UWP, New Architecture targets Windows App SDK.
2 changes: 1 addition & 1 deletion docs/getting-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ Make sure you have installed all of the [development dependencies](rnw-dependenc

For information around how to set up React Native, see the [React Native Getting Started Guide](https://reactnative.dev/docs/getting-started).

> **Interested in exploring the new architecture?** We are "soft-launching" our implementation of the new architecture. If you’d like to be an early adopter, check out the instructions in the [New Architecture Guide](NewArch.md) and discover new templates available in [init-windows-cli](init-windows-cli.md#templates).
> **Interested in migrating to [React Native's New Architecture](https://reactnative.dev/architecture/landing-page)?** New Architecture support in React Native for Windows is now available to preview in 0.76. Note there are several key changes, so if you’d like to be an early adopter, check out the information in the [New Architecture Guide](new-architecture.md).
## Create a new React Native project

Expand Down
2 changes: 1 addition & 1 deletion website/sidebars.json
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@
"metro-config-out-tree-platforms"
],
"Experimental" : [
"new-arch",
"new-architecture",
"hermes",
"NuGet"
]
Expand Down

0 comments on commit 07d9467

Please sign in to comment.