chore: use yarn policies to enforce same yarn version on ci and local #17196

Hotell · 2021-02-26T12:32:09Z

Description of changes

Before:

1.

on CI:
- we download yarn (latest cached version) without pinig to exact version (minor is x)
- mitgard-yarn fork is used instead of default yarn
on LOCAL machine anyone can use any version of yarn, which leads to non deterministic behaviour/inconsistencies

2. confusing pre and post install hooks DX

using npm install
using yarn

After:

1. same `yarn` version used everywhere, no matter what yarn@1 version/fork is installed on developer machine globally

CLI DEMO:

How it works:

2. improved pre and post install hooks DX

using npm i
using yarn

Perf on local machine - `yarn install`

Before/ yarn@1: 137.32s
After/ midgard-yarn: 86.42s.

That's approx 63% speedup 🔥

The text was updated successfully, but these errors were encountered:

azure-pipelines.yml

.devops/templates/tools.yml

ling1726 · 2021-03-01T10:53:16Z

Why can't just pin the yarn version instead of adding binaries into the repo ?

Hotell · 2021-03-01T11:05:32Z

Why can't just pin the yarn version instead of adding binaries into the repo ?

To enforce same version being used everywhere.

I hope the image and both commit and PR description are self explanatory.

ecraig12345 · 2021-03-02T22:30:02Z

This is an interesting idea, but have you seen any problems related to different yarn versions in practice? It's not something I can remember running into.

ecraig12345 · 2021-03-02T22:53:29Z

Another option if you want to ensure CI uses a specific yarn version is that the yarn installer task accepts specific versions. (Also practically speaking, given that yarn is actively resisting changes to v1 at this point, new 1.x releases and especially breaking changes are not very likely.)

Hotell · 2021-03-03T09:48:55Z

This is an interesting idea, but have you seen any problems related to different yarn versions in practice? It's not something I can remember running into.

yup, lock files output differed all the time, for same install ofc (which was quite stable for the last changes). Still having same version everywhere tends to be a common best practice in the long run (same for node etc)

Hotell · 2021-03-03T12:34:12Z

Another option if you want to ensure CI uses a specific yarn version is that the yarn installer task accepts specific versions. (Also practically speaking, given that yarn is actively resisting changes to v1 at this point, new 1.x releases and especially breaking changes are not very likely.)

the goal is to have same version on both ci/local environment

ecraig12345 · 2021-03-03T18:05:29Z

This is an interesting idea, but have you seen any problems related to different yarn versions in practice? It's not something I can remember running into.

yup, lock files output differed all the time, for same install ofc (which was quite stable for the last changes). Still having same version everywhere tends to be a common best practice in the long run (same for node etc)

So you're seeing lock file output variation even when dependencies haven't been modified?

miroslavstastny · 2021-03-04T20:27:07Z

Still having same version everywhere tends to be a common best practice in the long run (same for node etc)

Completely agree with this, but I don't think commiting yarn cjs to the repo is common practice. Wouldn't enforcing the version through engines and installing correct version in CI be possible?

miroslavstastny · 2021-03-04T22:27:35Z

Wouldn't enforcing the version through engines and installing correct version in CI be possible?

But then, without something like yvm, it is PITA to have multiple projects enforcing different yarn version.

Hotell · 2021-03-05T16:42:36Z

Still having same version everywhere tends to be a common best practice in the long run (same for node etc)

Completely agree with this, but I don't think commiting yarn cjs to the repo is common practice. Wouldn't enforcing the version through engines and installing correct version in CI be possible?

it is common, and automatically done by yarn https://classic.yarnpkg.com/en/docs/cli/policies/

I co-authored an article about it as well https://medium.com/productboard-engineering/one-yarn-to-rule-them-all-2d950127ee6f

layershifter · 2021-08-03T09:37:56Z

midgard-yarn now also ships a bundled binary, VincentBailly/yarn#47 (comment). Currently, Teams are using midgard-yarn & .yarnrc as proposed in this PR.

Hotell · 2021-08-03T14:20:32Z

midgard-yarn now also ships a bundled binary, VincentBailly/yarn#47 (comment). Currently, Teams are using midgard-yarn & .yarnrc as proposed in this PR.

thats good to hear, time to reboot this PR :)

codesandbox · 2022-01-27T15:54:37Z

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 1c362a3:

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

fabricteam · 2022-01-27T16:02:48Z

📊 Bundle size report

Unchanged fixtures

Package & Exports	Size (minified/GZIP)
`react-accordion` Accordion (including children components)	`54.888 kB` `17.524 kB`
`react-avatar` Avatar	`44.266 kB` `12.603 kB`
`react-badge` Badge	`24.19 kB` `7.107 kB`
`react-badge` CounterBadge	`25.058 kB` `7.407 kB`
`react-badge` PresenceBadge	`22.507 kB` `6.587 kB`
`react-button` Button	`28.197 kB` `8.093 kB`
`react-button` CompoundButton	`33.494 kB` `9.054 kB`
`react-button` MenuButton	`30.118 kB` `8.728 kB`
`react-button` SplitButton	`36.193 kB` `9.798 kB`
`react-button` ToggleButton	`37.434 kB` `8.689 kB`
`react-card` Card - All	`48.488 kB` `14.347 kB`
`react-card` Card	`43.997 kB` `13.195 kB`
`react-card` CardFooter	`7.618 kB` `3.232 kB`
`react-card` CardHeader	`8.885 kB` `3.673 kB`
`react-card` CardPreview	`7.811 kB` `3.361 kB`
`react-components` react-components: Accordion, Button, FluentProvider, Image, Menu, Popover	`166.089 kB` `47.059 kB`
`react-components` react-components: FluentProvider & webLightTheme	`32.489 kB` `10.636 kB`
`react-divider` Divider	`15.269 kB` `5.523 kB`
`react-image` Image	`10.075 kB` `3.942 kB`
`react-input` Input	`21.474 kB` `7.118 kB`
`react-label` Label	`8.323 kB` `3.479 kB`
`react-link` Link	`11.072 kB` `4.496 kB`
`react-make-styles` makeStaticStyles (runtime)	`8.161 kB` `3.564 kB`
`react-make-styles` makeStyles + mergeClasses (runtime)	`19.554 kB` `7.446 kB`
`react-make-styles` makeStyles + mergeClasses (build time)	`2.793 kB` `1.267 kB`
`react-menu` Menu (including children components)	`103.149 kB` `31.833 kB`
`react-menu` Menu (including selectable components)	`105.4 kB` `32.191 kB`
`react-popover` Popover	`95.348 kB` `29.017 kB`
`react-portal` Portal	`6.249 kB` `2.163 kB`
`react-positioning` usePopper	`22.808 kB` `7.935 kB`
`react-provider` FluentProvider	`13.972 kB` `5.237 kB`
`react-slider` Slider	`22.936 kB` `7.751 kB`
`react-spinner` Spinner	`6.787 kB` `2.887 kB`
`react-switch` Switch	`25.397 kB` `8.208 kB`
`react-text` Text - Default	`10.769 kB` `4.224 kB`
`react-text` Text - Wrappers	`14.077 kB` `4.565 kB`
`react-theme` Single theme token import	`69 B` `89 B`
`react-theme` Teams: all themes	`29.426 kB` `6.551 kB`
`react-theme` Teams: Light theme	`18.42 kB` `5.27 kB`
`react-tooltip` Tooltip	`44.872 kB` `15.617 kB`
`react-utilities` SSRProvider	`189 B` `161 B`

_{🤖 This report was generated against 66a0f746030149fb565e1316d69b708805975b60}

size-auditor · 2022-01-27T16:16:53Z

Asset size changes

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

Baseline commit: bc7772a8f45b02b95dc527a6e7af2ee2651a474f (build)

fabricteam · 2022-01-27T16:32:28Z

Perf Analysis (`@fluentui/react`)

No significant results to display.

All results

Scenario	Render type	Master Ticks	PR Ticks	Iterations
Avatar	mount	832	838	5000
BaseButton	mount	827	805	5000
Breadcrumb	mount	2305	2297	1000
ButtonNext	mount	440	449	5000
Checkbox	mount	1363	1340	5000
CheckboxBase	mount	1149	1152	5000
ChoiceGroup	mount	4104	4101	5000
ComboBox	mount	862	863	1000
CommandBar	mount	8932	9047	1000
ContextualMenu	mount	7387	7408	1000
DefaultButton	mount	1000	989	5000
DetailsRow	mount	3266	3266	5000
DetailsRowFast	mount	3427	3271	5000
DetailsRowNoStyles	mount	3108	3080	5000
Dialog	mount	2194	2287	1000
DocumentCardTitle	mount	169	163	1000
Dropdown	mount	2726	2579	5000
FluentProviderNext	mount	1746	1717	5000
FluentProviderWithTheme	mount	147	160	10
FluentProviderWithTheme	virtual-rerender	104	108	10
FluentProviderWithTheme	virtual-rerender-with-unmount	187	186	10
FocusTrapZone	mount	1631	1623	5000
FocusZone	mount	1607	1577	5000
IconButton	mount	1493	1509	5000
Label	mount	322	321	5000
Layer	mount	2389	2585	5000
Link	mount	435	419	5000
MakeStyles	mount	1446	1471	50000
MenuButton	mount	1300	1259	5000
MessageBar	mount	1693	1690	5000
Nav	mount	2879	2862	1000
OverflowSet	mount	965	997	5000
Panel	mount	2232	2207	1000
Persona	mount	739	802	1000
Pivot	mount	1243	1261	1000
PrimaryButton	mount	1178	1142	5000
Rating	mount	6653	6665	5000
SearchBox	mount	1172	1190	5000
Shimmer	mount	2195	2282	5000
Slider	mount	1722	1739	5000
SpinButton	mount	4533	4326	5000
Spinner	mount	404	398	5000
SplitButton	mount	2784	2785	5000
Stack	mount	486	481	5000
StackWithIntrinsicChildren	mount	2033	2018	5000
StackWithTextChildren	mount	4536	4542	5000
SwatchColorPicker	mount	9982	9768	5000
TagPicker	mount	2274	2330	5000
TeachingBubble	mount	11412	11430	5000
Text	mount	397	403	5000
TextField	mount	1226	1202	5000
ThemeProvider	mount	1050	1038	5000
ThemeProvider	virtual-rerender	546	540	5000
ThemeProvider	virtual-rerender-with-unmount	1658	1613	5000
Toggle	mount	728	707	5000
buttonNative	mount	140	146	5000

Perf Analysis (`@fluentui/react-northstar`)

Perf tests with no regressions

Scenario	Current PR Ticks	Baseline Ticks	Ratio
GridMinimalPerf.default	907	300	3.02:1
CustomToolbarPrototype.default	4453	3546	1.26:1
PortalMinimalPerf.default	167	151	1.11:1
AttachmentMinimalPerf.default	138	125	1.1:1
ChatDuplicateMessagesPerf.default	278	254	1.09:1
DatepickerMinimalPerf.default	5350	4911	1.09:1
SkeletonMinimalPerf.default	325	298	1.09:1
TreeMinimalPerf.default	707	667	1.06:1
TreeWith60ListItems.default	162	153	1.06:1
BoxMinimalPerf.default	314	298	1.05:1
FlexMinimalPerf.default	262	250	1.05:1
ListWith60ListItems.default	565	542	1.04:1
ReactionMinimalPerf.default	333	321	1.04:1
AlertMinimalPerf.default	239	232	1.03:1
MenuMinimalPerf.default	725	702	1.03:1
ProviderMinimalPerf.default	991	966	1.03:1
RadioGroupMinimalPerf.default	399	387	1.03:1
SegmentMinimalPerf.default	300	291	1.03:1
StatusMinimalPerf.default	595	576	1.03:1
IconMinimalPerf.default	520	505	1.03:1
TextMinimalPerf.default	310	301	1.03:1
TextAreaMinimalPerf.default	432	418	1.03:1
AnimationMinimalPerf.default	472	463	1.02:1
AttachmentSlotsPerf.default	911	891	1.02:1
ButtonMinimalPerf.default	154	151	1.02:1
ButtonSlotsPerf.default	468	457	1.02:1
HeaderSlotsPerf.default	653	641	1.02:1
ImageMinimalPerf.default	330	323	1.02:1
TableMinimalPerf.default	358	350	1.02:1
CardMinimalPerf.default	477	474	1.01:1
CarouselMinimalPerf.default	413	409	1.01:1
DropdownManyItemsPerf.default	581	576	1.01:1
EmbedMinimalPerf.default	3518	3495	1.01:1
FormMinimalPerf.default	348	343	1.01:1
InputMinimalPerf.default	1107	1096	1.01:1
ItemLayoutMinimalPerf.default	1014	1001	1.01:1
ListMinimalPerf.default	444	438	1.01:1
MenuButtonMinimalPerf.default	1416	1406	1.01:1
ProviderMergeThemesPerf.default	1473	1460	1.01:1
TableManyItemsPerf.default	1593	1585	1.01:1
ToolbarMinimalPerf.default	815	803	1.01:1
TooltipMinimalPerf.default	880	871	1.01:1
ButtonOverridesMissPerf.default	1460	1453	1:1
ChatMinimalPerf.default	645	642	1:1
ChatWithPopoverPerf.default	335	335	1:1
DropdownMinimalPerf.default	2575	2570	1:1
LayoutMinimalPerf.default	307	306	1:1
SplitButtonMinimalPerf.default	3658	3643	1:1
CheckboxMinimalPerf.default	2245	2267	0.99:1
HeaderMinimalPerf.default	322	326	0.99:1
LabelMinimalPerf.default	330	333	0.99:1
RefMinimalPerf.default	204	207	0.99:1
AccordionMinimalPerf.default	137	140	0.98:1
ListNestedPerf.default	466	476	0.98:1
LoaderMinimalPerf.default	579	588	0.98:1
ListCommonPerf.default	532	549	0.97:1
AvatarMinimalPerf.default	164	170	0.96:1
DividerMinimalPerf.default	303	317	0.96:1
DialogMinimalPerf.default	649	685	0.95:1
RosterPerf.default	988	1045	0.95:1
PopupMinimalPerf.default	519	549	0.95:1
VideoMinimalPerf.default	518	545	0.95:1
SliderMinimalPerf.default	1405	1508	0.93:1

layershifter

🎉

ecraig12345 · 2022-01-28T03:08:53Z

.devops/templates/tools.yml

-      versionSpec: 1.22.x
-      checkLatest: false
-      includePrerelease: false
+  - script: |


What's the reasoning for switching the approach here?

simplification

not rely on 3rd party to do a fundamental operation like installing packages - in past we run into some outages which blocked all pipelines AFAIR

ecraig12345 · 2022-01-28T03:08:53Z

.yarnrc

+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1


Not super important but this doesn't look like a lockfile or autogenerated?

this file was generated when running yarn policies set-version

micahgodbolt · 2022-01-31T18:26:37Z

Are all of the people on this thread mac users?

ling1726 · 2022-01-31T18:37:59Z

Are all of the people on this thread mac users?

No, but I use WSL unfortunately 🤦🤦

micahgodbolt · 2022-01-31T18:43:47Z

Are all of the people on this thread mac users?

No, but I use WSL unfortunately 🤦🤦

Just a reminder then to check any build related updates in mac/wsl, and windows

msft-fluent-ui-bot assigned joschect Feb 26, 2021

layershifter reviewed Feb 26, 2021

View changes

azure-pipelines.yml Show resolved Hide resolved

kubkon reviewed Mar 1, 2021

View changes

.devops/templates/tools.yml Show resolved Hide resolved

ling1726 closed this Mar 1, 2021

ling1726 reopened this Mar 1, 2021

Hotell added this to In progress in V-Build - @microsoft/fluentui-react-build via automation Aug 3, 2021

Hotell added this to In progress in CXE Prague - @microsoft/cxe-prg via automation Aug 3, 2021

Hotell added the Area: Build System label Aug 3, 2021

Hotell unassigned joschect Aug 3, 2021

Hotell added this to the August Project Cycle Q3 2021 milestone Aug 4, 2021

ecraig12345 moved this from In progress to Paused in V-Build - @microsoft/fluentui-react-build Sep 2, 2021

ecraig12345 moved this from Paused to Blocked in V-Build - @microsoft/fluentui-react-build Sep 27, 2021

ecraig12345 moved this from Blocked to Paused in V-Build - @microsoft/fluentui-react-build Sep 27, 2021

Hotell removed this from the August Project Cycle Q3 2021 milestone Oct 21, 2021

Hotell added this to the October Project Cycle Q4 2021 milestone Oct 21, 2021

gouttierre moved this from In progress to Backlog in CXE Prague - @microsoft/cxe-prg Jan 6, 2022

chore: use yarn policies to enforce same yarn version on ci and local

7aa7498

Hotell force-pushed the hotell/build-system/use-same-yarn-everywhere branch from e00b474 to 430565d Jan 27, 2022

Hotell force-pushed the hotell/build-system/use-same-yarn-everywhere branch from 2baafc0 to b52e551 Jan 27, 2022

Hotell added 4 commits Jan 27, 2022

fixup! feat(scripts): improve pre and post install hooks DX

ff119c3

fixup! fixup! feat(scripts): improve pre and post install hooks DX

3e55161

try official yarn1

871f4ae

fixup! chore: use mitgard-yarn

4f7a11f

fixup! fixup! chore: use mitgard-yarn

1c362a3

Hotell marked this pull request as ready for review Jan 27, 2022

Hotell requested a review from as a code owner Jan 27, 2022

Hotell removed this from Backlog in CXE Prague - @microsoft/cxe-prg Jan 27, 2022

Hotell moved this from Paused to In progress in V-Build - @microsoft/fluentui-react-build Jan 27, 2022

Hotell requested review from layershifter and ling1726 Jan 27, 2022

layershifter approved these changes Jan 27, 2022

View changes

V-Build - @microsoft/fluentui-react-build automation moved this from In progress to Reviewer approved Jan 27, 2022

ling1726 approved these changes Jan 27, 2022

View changes

andrefcdias approved these changes Jan 27, 2022

View changes

ecraig12345 approved these changes Jan 28, 2022

View changes

Hotell merged commit beb7b60 into microsoft:master Jan 31, 2022
38 checks passed

V-Build - @microsoft/fluentui-react-build automation moved this from Reviewer approved to Done Jan 31, 2022

Hotell deleted the hotell/build-system/use-same-yarn-everywhere branch Jan 31, 2022

spmonahan mentioned this pull request Jan 31, 2022

Fix failing "yarn" commands on Windows #21509

Merged

2 tasks

Hotell removed this from the October Project Cycle Q4 2021 milestone Feb 1, 2022

Hotell added this to the February Project Cycle Q1 2022 milestone Feb 1, 2022

microsoft / fluentui Public

chore: use yarn policies to enforce same yarn version on ci and local #17196

chore: use yarn policies to enforce same yarn version on ci and local #17196

Hotell commented Feb 26, 2021 •

edited

ling1726 commented Mar 1, 2021

Hotell commented Mar 1, 2021

ecraig12345 commented Mar 2, 2021

ecraig12345 commented Mar 2, 2021

Hotell commented Mar 3, 2021 •

edited

Hotell commented Mar 3, 2021

ecraig12345 commented Mar 3, 2021

miroslavstastny commented Mar 4, 2021

miroslavstastny commented Mar 4, 2021 •

edited

Hotell commented Mar 5, 2021 •

edited

layershifter commented Aug 3, 2021

Hotell commented Aug 3, 2021

codesandbox bot commented Jan 27, 2022 •

edited

fabricteam commented Jan 27, 2022 •

edited

size-auditor bot commented Jan 27, 2022

fabricteam commented Jan 27, 2022

layershifter left a comment

ecraig12345 Jan 28, 2022

Hotell Jan 31, 2022

ecraig12345 Jan 28, 2022

Hotell Jan 31, 2022

micahgodbolt commented Jan 31, 2022

ling1726 commented Jan 31, 2022 •

edited

micahgodbolt commented Jan 31, 2022

		# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
		# yarn lockfile v1

microsoft / fluentui Public

chore: use yarn policies to enforce same yarn version on ci and local #17196

chore: use yarn policies to enforce same yarn version on ci and local #17196

Conversation

Hotell commented Feb 26, 2021 • edited

Description of changes

Before:

1.

2. confusing pre and post install hooks DX

After:

1. same yarn version used everywhere, no matter what yarn@1 version/fork is installed on developer machine globally

2. improved pre and post install hooks DX

Perf on local machine - yarn install

ling1726 commented Mar 1, 2021

Hotell commented Mar 1, 2021

ecraig12345 commented Mar 2, 2021

ecraig12345 commented Mar 2, 2021

Hotell commented Mar 3, 2021 • edited

Hotell commented Mar 3, 2021

ecraig12345 commented Mar 3, 2021

miroslavstastny commented Mar 4, 2021

miroslavstastny commented Mar 4, 2021 • edited

Hotell commented Mar 5, 2021 • edited

layershifter commented Aug 3, 2021

Hotell commented Aug 3, 2021

codesandbox bot commented Jan 27, 2022 • edited

fabricteam commented Jan 27, 2022 • edited

📊 Bundle size report

size-auditor bot commented Jan 27, 2022

Asset size changes

fabricteam commented Jan 27, 2022

Perf Analysis (@fluentui/react)

Perf Analysis (@fluentui/react-northstar)

layershifter left a comment

ecraig12345 Jan 28, 2022

Choose a reason for hiding this comment

Hotell Jan 31, 2022

Choose a reason for hiding this comment

ecraig12345 Jan 28, 2022

Choose a reason for hiding this comment

Hotell Jan 31, 2022

Choose a reason for hiding this comment

micahgodbolt commented Jan 31, 2022

ling1726 commented Jan 31, 2022 • edited

micahgodbolt commented Jan 31, 2022

Hotell commented Feb 26, 2021 •

edited

1. same `yarn` version used everywhere, no matter what yarn@1 version/fork is installed on developer machine globally

Perf on local machine - `yarn install`

Hotell commented Mar 3, 2021 •

edited

miroslavstastny commented Mar 4, 2021 •

edited

Hotell commented Mar 5, 2021 •

edited

codesandbox bot commented Jan 27, 2022 •

edited

fabricteam commented Jan 27, 2022 •

edited

Perf Analysis (`@fluentui/react`)

Perf Analysis (`@fluentui/react-northstar`)

ling1726 commented Jan 31, 2022 •

edited