Aurelia: MS UI Fabric support

[LarsKemmann]

🙋 Feature Request

Please provide a solution for using the latest and greatest Microsoft (née "Office") UI Fabric packages in Aurelia 2, ideally when you launch.

🤔 Expected Behavior

I'd like to see the following, ideally:

• an npm package that allows use of UI Fabric components in an Aurelia application and is maintained by the Aurelia team
• a documentation article (not just a community member blog post that may not remain current) with guidance on using that package
• an example of a simple Aurelia app built out of UI Fabric components showcased in the blog post announcing the Aurelia 2 launch! :)

😯 Current Behavior

This feature is currently absent.

💁 Possible Solution

There have been some discussions in the Discourse forum for how this could be achieved in Aurelia v1, those may provide a starting point.

🔦 Context

I can't remember how many times I've seen requests for (or myself asked about) support for UI Fabric in Aurelia. It seems like one of those things that a substantial majority of the initial target developer audience for Aurelia v1 (enterprise developers) _really_ want, without needing to think about a bunch of adapter patterns and intermediate steps.

[fkleuver]

I agree this would be great.
However, an official plugin only makes sense if we can ensure long-term support. So not just initial implementation, but also perpetually making incremental improvements, keeping up-to-date with the external library, fixing issues, and other maintenance concerns that take time which is then not spent on Aurelia's core.

We have discussed this internally when we were talking about official plugins for bootstrap/materialize, etc, and I agree with @EisenbergEffect that we should have some kind of partnership with the UI framework in question before we actually commit to an official plugin.

That partnership should somehow directly (via sponsoring) and/or indirectly (via an official endorsement) contribute to our resources and thus our bandwidth, allowing us to ensure aforementioned long-term support.
If that is not possible, we could help with an initial implementation (whenever we have time) but it would not be officially supported; the community would have to maintain it.

However, Microsoft seems to "endorse" the React variant of this, so there could be possibilities here:

What do you think @EisenbergEffect ? Worth a try to reach out to them?

[EisenbergEffect]

I think it's likely that we'll do something like this with Aurelia 2. I'm talking to some people and seeing where it leads. Hang tight and I'll know more as we approach au2 release.

[CuddleBunny]

I actually started to port this to v1, decided to pause due to MS refactoring everything for Fluent, Aurelia 2 being on the horizon, and getting a new job. Once there are some RC bits available for au2 and maybe some plugin scaffolding I'll resume the effort.

https://github.com/CuddleBunny/aurelia-office-ui-fabric

Edit: I won't hold my breath for official support from MS. They've already dropped support for the dotnet new template. Unless au2 becomes the new hotness and everyone forgets about React I think MS is going to focus on that and maybe Blazor.

[sspilleman]

There are so many good/popular UI / Component frameworks out there. Why is specifically this one being considered? I can understand the financial reasons if one's hoping for external investments in the framework. But I've not heard of it... before this post (I don't claim to be an expert and I may not be the biggest MSFT fanboy either agreed). But still it sounds weird, as I do ongoing research on good & popular UI libraries and this isn't on any lists... just google for "most popular css frameworks 2020", not saying it's got to be bootstrap but....

[EisenbergEffect]

Closing this out as UI Fabric isn't the best fit for Aurelia 2. There are other options coming for those that want to use components expressing Microsoft's design language.

[EisenbergEffect]

On a related note "Fabric" can be a confusing term. You may also hear "Fluid" and "Fluent". When it comes down to it, Microsoft has a hierarchy of design languages. There's a main language and then a few variants of that depending on product (Office, Windows, XBox, Teams), and then there are various implementations. The Fabric stuff is more of an Office variant but also carries with it the fact that it's a React implementation. So, it's not great for anyone who isn't using React.

I'm working at Microsoft now as a technical leader in the Edge organization, focused on web standards, web platform, dev experience, etc. My laser focus right now is web components and related standards, libraries, and frameworks. With that in mind, you can imagine how someone like me would probably be pushing hard internally to move the company away from React and more toward a standards-compliant, interoperable web through web components that would enable components to work out-of-the-box with any framework.

[LarsKemmann]

@EisenbergEffect Very exciting to hear about your new role!! I hope you're able to achieve that goal and will be paying close attention for sure!

And on that note -- what are the "other options coming" that you mentioned? (Edit: Is this announcement what you're referring to? That seems to just be a rebranding at this point...)

[LarsKemmann]

Also, as I understand it, the "Office" UI Fabric system has been adopted by, at the very least, parts of Azure DevOps -- so it's not totally focused on Office even though that group has been its main driver.

We've been using UI Fabric in a number of production systems for the past few years now. It did contribute to our move away from Aurelia to React as well, which is why I keep bringing up the issue. I think, to @sspilleman's question above, there is a large swath of born-and-raised Microsoft enterprise developers out there who just prefer to have everything come from one organization with first-party support (all other things being roughly equal, and I struggle to see how Material/Bootstrap/etc. are drastically "better" than Microsoft's UI Fabric, adoption aside).

[CuddleBunny]

At any rate I don't think Aurelia should have "official" support for any component library which is why these projects should be community led. I am invested in UI Fabric and fluent already from a few personal projects which is why I won't hesitate to port the React components as soon as Aurelia 2 has a stable plugin template.

[EisenbergEffect]

@LarsKemmann The post you refer to isn't the work I'm doing. I do speak with the technical leads from those teams weekly though, and we are working on a unification strategy. Full unification and standardization will take time for a company like Microsoft. However, the work we have underway will be usable by everyone long before the entire company can get on board. Stay tuned for some announcements, hopefully in the next couple of months 😉

[magnusdanielson]

@LarsKemmann , I have a working plugin for Fluent UI with demo here: https://magnusdanielson.github.io/au-fluent-ui/

I have also had a look at the work I think @EisenbergEffect is referring to here https://fast.design/docs/introduction

They have used that to create https://www.npmjs.com/package/@fluentui/web-components which I have tried in Aurelia and it works as well. There are a lot more components in Fluent UI React and likewise in au-fluent-ui though. I assume more components will be added over time to Fast.

For now we use https://www.npmjs.com/package/@dunite/au-fluent-ui for all our customer projects.

In terms of maintainability I just need to update the npm package version number to Fluent UI React to get all new good stuff. If they add or remove public properties to a component that needs to be changed too, but it is really not a lot of work to keep up with Microsoft releasing updates.

I will try to record a video on how to use Fast, Fluent UI Webcomponents and au-fluent-ui for Aurelia.

[EisenbergEffect]

@magnusdanielson is correct 😄 The team I'm working on is building FAST: https://fast.design/ It's a collection of libraries and tools focused around standards-based web components and adaptive design systems. We've got two design systems, one of which is the official web components for Fluent UI. Our work is still early in terms of the component offering. So, we haven't implemented the breadth of components available in the React implementation yet. However, we're working to close that gap over the coming months.