From Paper to Fabric

[chrisglein]

We're making progress on API parity of component props for the Fabric implementation of React Native for Windows that is built on top of Windows Composition. As of this month, the API completion looks like this:

Priority	Component	Available	Properties
0	View	✅	83%
0	Text	✅	76%
0	Image	✅	77%
0	TextInput	✅	69%
1	ScrollView	✅	76%
1	Modal	🟥	49%
2	ActivityIndicator	✅	76%
2	Switch	✅	80%
2	RefreshControl	🟥	26%

However, there are other big challenges to solve that don't directly map to API parity, and I want to move towards capturing and tracking them. I'm not creating this topic as an issue yet because this is very much a rough draft. But the goal is that these all do map to tracked issue work over time. So I'm going to try something new and drop it in discussion form. Feedback of format welcome :)

Here are the areas that come to mind for me:

• Composition Modules: How does someone create a sharable Composition-based component? Examples: WebView, Lottie, SVG, or just some hand-authored control out of Comp nodes instead of XAML.
• HWND Island Modules: Could someone create a sharable component hosting XAML using HWND-based islands? Examples: Picker, DateTimePicker
• Modal/Flyout/Popup: Reconcile what our strategy should be for popups. Paper RNW never implemented Modal and instead provided XAML-centric Flyout/Popup. Do we for Fabric implement Modal but not Flyout/Popup (creating a conversion barrier for those coming from RNW Paper) or implement Flyout/Popup (which no longer have XAML equivalents we would map to)
• New Greenfield Project: Create a min app from the CLI and get coding RNW Fabric from scratch.
• Migration Guide/Tools: How does someone move from their 0.71 Paper RNW app to a 0.7X Fabric RNW app? What are the behavioral breaking changes that will result from migrating from Paper to Fabric that are specific to RNW? How do we message them? What's the "platform select" for logic that needs to be different from Paper to Fabric for when you need to straddle the two?
• Fabric in a UWP App: How does someone with a UWP app adopt Fabric? Assume that they want to stay a UWP app and not change their root app frame. This is anyone who created an app from the default template on RNW Paper, so we need a story here.
• Native Animations: Does this code come over mostly unchanged from the UWP-based implementation?
• Prototype code to Production code: What are the shortcuts that have been taken along the way to get a version working quickly that we will want to address?
• Polyfills and OS Compatibility: Is the code robust to differences in OS behavior?
• Split Documentation: How does our documentation handle differences between Paper and Fabric
• Packaged vs. Unpackaged: Do we need to support unpackaged? What system APIs (and thus their modules) will work in a non-UWP packaged environment, and which need classic Win32 replacements?
• Theming: How should we get light/dark/contrast colors? Do we ingest design tokens from Fluent to achieve a shared source of truth?

What else?

[chrisglein]

Met to discuss the list, here are my notes:

• Composition Modules
  • This should work today, and we'll test it with SVG first most likely. However, the specifics of the hosting is still in flux and should be considered experimental (we wouldn't want to merge these into primary module OSS yet - forks until then). As we explore XAML hosting that will likely affect the API.
• HWND Island Modules
  • We need someone to try this and report back on the experience. Is the HWND isn't the interface? As in does XAML create the HWND but you don't have to create it (or handle it at all)? Is it an invisible HWND.
• Modal/Flyout/Popup
  • We didn't do Modal because XAML's modal is very particular (e.g. ContentDialog one at at time). We will still need a lighter weight flyout that can still extend beyond window bounds. Note that this is a Desktop-centric scenario, not a Mobile-centric scenario, and may be more appropriate outside of RNW core.
  • We should find out what Messenger has done here. Office certainly has this scenario, but also has its own popup manager. We could try come up with a shared interface that meets the needs of these deep desktop apps and lets established needs like those of Office plug into an interface.
  • Unclear on what the core RN Modal mean as far as disabling non-RN UI for the app. Is it solving those hard problems? Modal · React Native. True input modality is hard.
• New Greenfield Project
  • We don't want to add a use-fabric option, would prefer a different RN Init template.
  • Should the template set you up for XAML or not? Probably yes, but also have a lean template for no XAML but without too much drift between the two.
  • Does the template depend on binaries or source? Prefer binaries for best experience.
  • Can the XAML hosting stuff move into react-native-xaml entirely (not sure if possible)? CoreApp template was nice with a super approachable app template.
• Migration Guide/Tools:
  • JS should be pretty close to the same. Reportedly some have banned writing "if Fabric" in the JS.
  • Do we fix the places we were broken in Paper (e.g. TextInput border/backgrounds) to prepare for the upgrade? Should there be a "compat mode" during the transition?
  • Does the store let you jump from a UWP to not a UWP cleanly?
• Fabric in a UWP App
  • For a simplest app that didn't touch the template, replace with the new template. But if they modified the template...
  • Do we need a root XAML control that you can shove in a XAML app to host RN? Seems useful anyway
• Native Animations
  • Most of this already works!
• Prototype code to Production code
  • Clarification: Not worried about code not yet written - trying to track "written but not correct"
  • Example of something that needs revisiting: Timing loop (request animation frame) is wrong - need to mirror the XAML behavior - animations won't do the right thing.
  • Likely need to reorganize code as we've built a sense of what should be where. Want to wait until we complete SVG as it'll inform some of that organization as well with shadow nodes.
• Polyfills and OS Compatibility
  • We have places where we're different if XAML is already loaded - will want to review those (similar to section above)
• Split Documentation
  • Will need to note in things like Flyout that it doesn't work in Fabric.
  • Core had a different section for the new architecture during the transition phase. This is where we'd capture breaking changes.
• Packaged vs. Unpackaged
  • Say that we support packaged and for unpackaged you're on your own.
  • Believe that some apps do unpackaged to have their own updater but are packaged in the store.
• Theming
  • Part of this is underway. Still need to resolve which color constants are the right ones.
  • Office already has desire to get theming outside of XAML.

[VOM7HC]

Hi @chrisglein,
Can we use Fabric in UWP, or do we need to migrate to WindowsAppSDK? I prefer to stay with UWP because it has features that meet my needs. Additionally, there's an open issue #12042 mentioning that Win32 is now the default instead of UWP.

[chrisglein]

Our current plan is to align to WinAppSDK and the new React Native architecture (including Fabric) at the same time. WinAppSDK is where investment is happening on Windows these days, and we have dependencies on some of that work (from the WinAppSDK Scene Graph in particular) to land the right implementation of the new rendering architecture. So they are tied, yes. However, we have no immediate plans to halt support of the Paper renderer on UWP. That's where most the folks using RNW today are doing, so until there's a clear viable path forward, it continues. You're not alone in having reasons UWP makes sense for you and we work to represent those needs to the WinAppSDK team to make sure they're understood. Feel free to help us with that by providing your reasons here.

[chrisglein]

API Parity for July

Priority	Component	Available	Properties
0	View	✅	83%
0	Text	✅	77%
0	Image	✅	78%
0	TextInput	✅	70%
1	ScrollView	✅	76%
1	Modal	🟥	50%
2	ActivityIndicator	✅	77%
2	Switch	✅	81%
2	RefreshControl	🟥	26%

Main areas of Fabric investment coming up

• rn-init clean up with simple default config ("golden path")
• New app template
• Hermes as the default
• Hosting of XAML controls
• Automated UI testing
• Accessibility fundamentals
• General API parity (see chart above)
• Modal (vs. Flyout/Popup)
• Samples converted

Future milestones

• Create a new Fabric app from CLI
• Fabric version of an app in the store (potentially Artificial Chat)
• Fabric version of Gallery (just core components, community components temporarily removed)
• Fabric version of Gallery, accessibility parity gets passing grade
• Production brownfield app ships a single experience on Fabric

[chrisglein]

To make better use of tasklists and such, I've created a root issue for this: #12042