FluentUI v9 and virtual

[srx_nstratton]

v8 gives us the performance benefit of virtual controls. FluentUI v9 is here but represents breaking changes in controls and layout from v8. I am pulled to use v9 because it's the future and v8 because it's virtual.

What are thoughts on the roadmap and timing of v9 being supported in virtual (if it can be)?

[cchannon]

Yeah, the platform group does seem pretty disorganized on this front, I will agree with you.

V8 is downright ancient in React terms, especially considering the rest of the MSFT world has long since moved past that to v9, and past that to Fluent 2. BUT... there is only so fast this ship will steer and we have to trust they're going slowly because they must and that virtual components will eventually modernize (unlike plugins which are still stuck in C# 4.6.2) 

Now, ranting aside, there is some clear embrace of v9 already in PCFs, just not where you'd expect. The Theming API object is built specifically for v9, and is a peek at the future when someday Dataverse will offer user theme choices. Until that day, or until there is broader v9 support, it is a nice way to--I guess you could say--'downgrade' the look of v9 so it looks more Dataverse-y. And that is useful, even if it is a bit disappointing.

[DianaBirkelbach · Accepted solution]

Hi @srx_nstratton , 

@cchannon pointed out the right direction. The only documentation about using Fluent v9 is made for theming.

I would like to add, that there we see how we can use the virtual components with Fluent v9 (v9.4.0): 

https://learn.microsoft.com/en-us/power-apps/developer/component-framework/fluent-modern-theming?WT....

On the other side only the Fluent 8 is documented, where the platform library are listed: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/react-controls-platform-l...

So it is possible to use Fluent 9 in virtual components, but I guess we should consider that as a preview for now.
On the other side, you can always switch to a supported way in case you have issues with Fluent 9, by removing the Fluent from the platform-library. That way you have a virtual component using React, but you bring your own Fluent version. 

I know, React version in combination with Fluent 9 could also be an issue; I guess then we would need to switch to standard PCFs. But the change in code between standard and virtual component is not that big.. so it could be a strategy to start with Fluent 9 virtual, because we have a fallback with a small change, in case there are issue.

But of course, it depends on the project, if we can risk to work with "preview" features.

If you have already the component build with Fluent 8, you don't have to migrate for now. You could only apply the theming from Fluent. Have a look to the "Modern theming API" sample: there are examples of using Fluent 9 (virtual), but also how to theme a Fluent v8 component: https://learn.microsoft.com/en-us/power-apps/developer/component-framework/sample-controls/modern-th...

Hope it helps 😊

[cchannon]

Nice one, @DianaBirkelbach! I didn't know that one, but I will be using it from now on!

[DianaBirkelbach]

Thank you, @cchannon ! Happy to hear that! 😊 

[cchannon]

Aaah, so we can use Fluent 9.4, but it is older than current so it only has a handful of components (current release is 9.46):

So I guess if you need a datagrid, or a messagebar, or any of a bunch of other common controls the answer is to hybridize 8 and 9? That seems messy, and prone to issues... But then, Dataverse MDAs do it, so maybe not as much of a problem as I think... I'll give it a shot!

[DianaBirkelbach]

Hi @cchannon , 

I have a virtual PCF based ob Fluent 9 DataGrid. It works, but I wouldn't use it in production for now.
But still, maybe you want to have a look: https://github.com/brasov2de/ToDosDataGridFluent9

[cchannon]

That's really excellent, @DianaBirkelbach  - I especially love your handling of theming: making it easy for other devs to build out custom themes quickly (never seen tinycolor2 before, but that lighten/darken bit is really slick!).

Inspired by this thread, I've got one in progress right now for user notification preferences: "for events A-Z, does the user want Email, In-App, or Push notifications?" I'm using 9.4 for the Accordion and 8 for checkboxes and stacks--it's working out nicely so far!

I'll ask if my customer is OK with me open sourcing parts of it. 🤞

[srx_nstratton]

@DianaBirkelbach your ToDos's references spec 9.4.0 (does this allow control-type='virtual'?).

      <platform-library name="React" version="16.8.6" />      
      <platform-library name="Fluent" version="9.4.0" />

and you pull in @fluentui-contrib/react-data-grid-react-window, which use the @fluentui/react-components, but it states a min version of 9.25.1

"peerDependencies": {
"@fluentui/react-components": ">=9.25.1 <10.0.0",
"react": ">=16.8.0 <19.0.0"
}

 What happens when you use it?

[DianaBirkelbach]

Thank you @cchannon 😍
It looks very nice  😎!