During development or the product design or project, you like to avoid external dependencies as much as possible to keep your code secure, reliant and consistent. With these baselines, I want to cover some aspects of Fluent UI that you should consider before adopting it. To be more specific the reason when considering Fluent UI are related to the web version.

Reason No. 1 – Fluent UI is not the new Office UI Fabric

Fluent UI is not the new Office UI Fabric. It is the upcoming and continually evolving design system for Microsoft 365. Currently, there is an ongoing merge in the process to have one consistent UI Framework across the Microsoft ecosystem.

It is also worth mention that it seems Fluent UI is the answer to Googles Material Design, Saleforce Lightning Design and many more design systems on the interweb specific to products by international vendors.

Like, it aims to have a holistic approach to design address across platforms and Microsoft applications including IOs, Android, Windows, macOS and the web.

Google’s Material Design started the same process in 2014 and continuously improved their design language throughout the years. A process that Microsoft just has begun.

The harmonisation for Google to provide a consistent user experience through their applications such as Gmail, YouTube, Google Drive, Google Docs, Sheets and Slide and even Google Maps took until 2019 and is still in progress and not yet finished.

Using Fluent now you need to know that you subscribe to a process or a journey rather than a robust ready-made framework. There are many changes up ahead.

Read more on How Fluent UI Unlocks the Next Generation of Microsoft 365 Experiences

Reason No. 2 – There is no constancy in Microsoft Application stack

Unlike you might think that everything used Office UI Fabric or soon the predecessor Fluent UI. There is no consistency at the moment, but it is one of their goals.

Consistency at some point exists in the SharePoint and OneDrive space which first created Office UI Fabric. Even there, it was not always the case and still not is.

When first the modern experience got introduced the technology stack, as well as the branding in the background, was different. The very first version of the modern experience for document library used KnockoutJS. The rest of the modern experience used ReactJS. There even more design elements throughout SharePoint that never made it into Office UI Fabric.

Microsoft Teams might mimic some of the Office UI Fluent / Fluent UI, but instead of being written in ReactJS, this application uses Angular in the background.

Another such application that neglect the existence of Office UI Fabric / Fluent UI is, for example, is PowerBI, which is written in Angular too.

PowerPlatform as far as I found out use to some extend some simpler Office UI Fabric components but extends the platform with a lot of custom elements apart from Office UI Fabric / Fluent UI.

To implement application even such as SharePoint using Fluent UI alone is impossible at the moment. You can use it for Panels, Buttons, Drop Down Boxes, but in the end; you will end up with 80 to 90% custom HTML and CSS anyway because Fluent UI does not support the right user experience for your application and solution. It only covers a baseline.

Reason No. 3 – Fluent UI is not for web development

Unlike the web site states that it is for web, it is at the moment a false claim and narrative because it is a React exclusive club at the moment.

The fact that it uses CSS-In-Javascript makes it impossible to apply Fluent UI to any other framework rather than React. No additional frameworks are yet supported. No Angular, which Microsoft uses for some application, no VueJS, and even simple tools such as Handlebars, or native HTML and CSS, won’t work together with Fluent UI.

I wouldn’t be surprised if CSS-In-Javascript gets dropped soon by Fluent UI. It is against their proclaimed openness makes it impossible to transfer styles beyond React to any new upcoming or existing framework. At the same time, the javascript developer and application developer love this tool, many designers and web developer don’t like their design and styles merged into a JavaScript especially there are many downsides for example in performance to it.

What would it mean to add support for those frameworks? At the moment Office UI Fabric was only renamed to Fluent UI but have not yet significant changes included. Well, there are some UI adjustments such as round border on buttons, but overall it is still the same ReactJS only framework, excluding many developers from the party.

I think there is no other alternative than to start from scratch and move one step back to have a reliable HTML and CSS based implementation all other frameworks can build on. This transformation won’t happen overnight, but it could be that gradually many components get rearchitected over time.
Otherwise, it will be a “niche” framework just for React customisations.

Reason No 4. Breaking Changes – Changing Design

As already mentioned in reason two and reason three, Microsoft kicked off a process, not a framework. Beside Office UI Fabric for SharePoint and Office 365 customisation, Stardust was another UI Framework, especially for Microsoft Teams. Right now, it was a simple merge of these frameworks under one unique label, and now the real work starts.

Marry these two frameworks, and others that are not publicly available (PowerBi and other Microsoft 365 stack applications) is a vast undergoing because they use entirely different technologies you will experience many breaking changes in future.

There is even a third player in the Microsoft Eco System which will for now only mimic instead of implementing Fluent UI. The Microsoft Graph team provides a set of future orient components named Microsoft Graph tool Kit. Instead of relying on a web development framework, they use a web standard called web components. Modern browsers natively support these web components. Like mentioned before, they cannot use Fluent UI at the moment and won’t use it until the Fluent UI framework got rewritten for the native web use.

In all fairness that there will be breaking changes twice a year in Fluent UI React and Stardust aka Fluent UI Northstar is already mentioned on the Fluent UI FAQ. Good to know, but this means that Fluent UI is unstable at the moment because of the ongoing process.

If you are looking for a more reliant solution, you might be better of to limit at least the components you use or mimic your elements the way Fluent UI look and feel or choose something different.

A while back, I wrote a blog post on how to use Bootstrap in SharePoint Framework this blog post is the rising star this year.

Reason No. 5. IE11 is dead, long live IE11

Fluent UI Fabric, by time writing, still supports IE11. Internet Explorer 11, since first release 2013, use a complete outdated technology stack. It makes it challenging to implement many design ideas on Fluent UI based on this technology stack.

The logical consequence at some point is that the support for IE 11 gets removed, to move forward. Which again has an impact on how the Fluent UI components get built. Breaking changes included.

On the other hand, Microsoft owns now three fundamentally different browsers, which are IE11, Edge, and Chromium Edge. To maintain these three versions is costly and cannot last forever. I think the support for IE 11 gets soon dropped to drive adoption and improve performance in the Microsoft 365 applications. Some newer applications such as Microsoft Teams already lost the support for IE 11, and many others will follow over time.
Especially in the light of the transition to Fluent UI, the support for IE11 gets dropped rather sooner than later.

Then again, the framework will change we face new breaking changes and component will evolve.

Personal verdict

Microsoft put a lot of effort in Fluent UI not even in the developer community but also on design related sites like the following:

• Abduzeedo: Microsoft Introduce Fluent Design System
• Abduzeedo: Microsoft Design opens Fluent UI, a collection of frameworks for next-gent experiences.
• Verge: MICROSOFT WANTS EVERYONE TO FOLLOW ITS LEAD WITH ITS NEW MOBILE DESIGN

I see a problem with that kind of marketing because Microsoft is not able yet to deliver on the promises. Too many things are in fluent, pun intended, and not graspable.

Microsoft kicked off the redesign process, but there are considerable gaps in design and development. We will see what the future will bring. This process is not a sprint; it is a Marathon that maybe take three to five years. On the way, there are many stepping stones we come across.
Fluent UI is not down, yet we are just the beginning.

Google’s Material Design took five years to implement and improve across their applications, but now they have a complete design theory and technological implementations.

I love Microsoft to succeed with Fluent UI. Many of their visions are tremendous and look promising. For now, many things are just visions in beautiful animated Marketing videos. The reality paints a different picture at the moment with just a merge of two different frameworks.

So should you use Fluent UI now? I think using Fluent UI at the moment is to subscribe to a beta program. You need to keep in mind that not only you need to adopt the current existing components but also Microsoft need to invest a considerable effort bringing their first-party elements to Fluent UI.
Precisely this first-party components will shape and change the future of Fluent UI.

The change to Fluent UI won’t happen overnight. Even if some things look like Fluent UI in SharePoint already, they are not yet Fluent UI. Technically Office Fabric version 6.0 with Fluent UI Fabric theme.

What we have at the moment are pattern libraries and some design assets. I miss many of the design ideas around Fluent UI the design theory. I think there is too many still in the dark and using Fluent UI Web feels like a gamble with uncertain outcome to be used in a production project.

Comparing Fluent UI to Googles Material design is unfair because Microsoft is just at the beginning to lead their experiences in the next-generation design.

The last time Microsoft introduced something like Fluent UI was Metro UI. Initially designed for mobile was then directly put on Windows 8 without further improvements and adaptation to different user experiences. We all know how this ended.

Through the failing of Metro UI, a lot of trusts got destroyed on Microsoft in the design community. A lot of designers first well-received Microsoft efforts. People in general now are cautious, and I will be too in case of design and development using Fluent UI.

As always let me know what your thoughts are?

---

Also published on Medium.