Skip to content

RFC: Browser Support Minbar for v9#22889

Merged
TristanWatanabe merged 11 commits intomicrosoft:masterfrom
TristanWatanabe:rfc-browser-minbar
Jun 6, 2022
Merged

RFC: Browser Support Minbar for v9#22889
TristanWatanabe merged 11 commits intomicrosoft:masterfrom
TristanWatanabe:rfc-browser-minbar

Conversation

@TristanWatanabe
Copy link
Member

@TristanWatanabe TristanWatanabe commented May 6, 2022

This RFC proposes a browser minbar support matrix for v9 to conform to. To get breakdown that led to this matrix, please read this document.

Preview👀

Current global browser coverage of proposed browser matrix: 88%

Related Issue(s)

Fixes #22273

@fabricteam
Copy link
Collaborator

fabricteam commented May 6, 2022

📊 Bundle size report

🤖 This report was generated against 9bdcf7a94d2a89e77533e2ec850ba247fa6ba68d

@codesandbox-ci
Copy link

codesandbox-ci bot commented May 6, 2022

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit fc05585:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@TristanWatanabe TristanWatanabe marked this pull request as ready for review May 6, 2022 21:40
@TristanWatanabe TristanWatanabe requested a review from a team May 6, 2022 21:40
@size-auditor
Copy link

size-auditor bot commented May 6, 2022

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 9bdcf7a94d2a89e77533e2ec850ba247fa6ba68d (build)

@ling1726
Copy link
Contributor

ling1726 commented May 9, 2022

Should we put in place some kind of audit process (i.e. every year/6 months) to review and update this browser support matrix ?

@spmonahan
Copy link
Contributor

Should we put in place some kind of audit process (i.e. every year/6 months) to review and update this browser support matrix ?

Maybe sync it with the Firefox ESR release calendar or Safari releases?

@TristanWatanabe
Copy link
Member Author

Should we put in place some kind of audit process (i.e. every year/6 months) to review and update this browser support matrix ?

Maybe sync it with the Firefox ESR release calendar or Safari releases?

Went with basing it on Safari major releases since that browser is the new IE

@Hotell
Copy link
Contributor

Hotell commented May 12, 2022

Should we put in place some kind of audit process (i.e. every year/6 months) to review and update this browser support matrix ?

I'd suggest to setup a support window matrix/roadmap. Good example of what Im referring to can be seen here https://github.com/DefinitelyTyped/DefinitelyTyped#support-window


## Summary

Fluent v9 is currently lacking a defined browser support matrix so this RFC proposes a set of major browser versions compatible with the library to act as the source of truth. As mentioned below, Fluent developers are expected to conform to these browsers and ensure no incompatible syntax, browser APIs or CSS features are introduced to the library. Consumers who require older browser support that aren't covered in this matrix are responsible for performing downlevel transpilations and/or using polyfills themselves.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

responsible for performing downlevel transpilations and/or using polyfills themselves.

is this saying we will not use polyfills ? I'd suggest to rephrase or remove this completely to avoid any statements out of topic

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This was intended to say that Fluent wont be providing polyfills for features that we expect our browser matrix to already support (i.e. ResizeObserver) - i'll rephrase it

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see, what I was trying to point out is that we cannot guarantee this as it cannot be baked by tooling to 100%. So we might end up shipping "some" polyfills.

To give you better context, based on this RFC our build process will look like following:

  1. browserlist config with browser matrix
  2. babel consuming browserlist and transpiling according to that

Now one can use ECMA features beyond 2019 and it will just work because babel will transpile that + provide according polyfill from corejs

What about TypeScript?

well we will still use target and lib specification - which will be used only for type declarations. Now for production code this might become problematic as target/lib cannot be matched to browser matrix in any way, so we'll end up by "approximate" target boundaries specification on type safety level.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Some rephrasing regarding this ebe76cd

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We're seeing some of these same things pop up in MADS (admin-controls) as well in terms of target and lib. I like the line drawn. We also use nullish coalescing so I think ES2020 is our line. Do you plan to look at that as well? It's very helpful to avoid pesky falsey bugs when looking for values.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@brandonthomas We definitely want to support ES2020 features like nulling coalescing which is why I ensured this browser matrix supports all ES2020 features so no downlevel transpilation need to occur when we do move our target to ES2020. So in essence, this does draw the line at ES2020 for now


### Browser Support Going Forward

With an eye towards being a modern library, Fluent will follow a yearly audit process to evaluate and update the current browser support matrix to keep pace with the ever evolving ecosystem of the web. This will allow the team to utilize modern tools and improve overall engineering efficiency while also providing consumers with performance and bundlesize improvements. Due to the nature of how Safari browser updates are tied to MacOS versions, Safari will be the browser that ultimately holds the library back from fully adopting modern browser versions across the board. Because of this, the proposed timeframe for when these audits occur should be whenever a Safari major release occurs. These tend to happen annually during the month of September so Fluent can target an annual audit around that time.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the proposed timeframe for when these audits occur should be whenever a Safari major release occurs.

not sure if this is the right metric. platform features are being added on feature releases as well, I'd suggest to rethink this process.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this auditing process will be heavily influenced by partner browser support needs so yearly audits seemed like a reasonable timeframe to evaluate, decide and give notice - totally open to suggestions here though!

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'd suggest to remove the "blaming" on safari and keep the wording as you mentioned - yearly audits etc. wdyt ?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sounds good - i’ll rephrase this too

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

change made 2130194

@TristanWatanabe
Copy link
Member Author

Updated the proposed browser matrix to flex gap (1f25ef7 and fc05585) to allow this RFC to get merged in since we agreed to address that issue post v9 stable release. Once ongoing partner convos are resolved and if we do end up having to remove flex gap usage from our components, our browser matrix can be updated again. It ultimately wont affect consumers if we lower our matrix since that just means we're supporting more browsers; the work in that case falls squarely on us to remove incompatible features from the library.

Copy link
Contributor

@Hotell Hotell left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

awesome work @TristanWatanabe 🙌

@TristanWatanabe TristanWatanabe merged commit f5ea084 into microsoft:master Jun 6, 2022
@TristanWatanabe TristanWatanabe deleted the rfc-browser-minbar branch June 6, 2022 15:05
@brandonthomas
Copy link
Contributor

@TristanWatanabe one other thing I forgot to mention that I think is important to consider here is CSS's logical properties. It makes positioning for things like RTL, BiDi, etc much easier to deal with and we no longer need to do things like flip positions/margins etc. I'm starting to use these in the MADS library now that support for them is quite high.

https://caniuse.com/css-logical-props

marwan38 pushed a commit to marwan38/fluentui that referenced this pull request Jun 13, 2022
@Hotell Hotell mentioned this pull request Nov 2, 2022
28 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Determine browser minbar for v9 from current master

10 participants