Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

perf: use mergeVariablesOverrides() to avoid cache breaks when variables are not passed #13374

Merged
merged 4 commits into from
May 28, 2020

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented May 28, 2020

Pull request checklist

  • Addresses an existing issue: Fixes #0000
  • Include a change request file using $ yarn change

Description of changes

Fixes an issues that we have found with improved telemetry, see #13346 (comment).

This PR introduces mergeVariablesOverrides() which we already uses in Attachment to avoid creation of variables functions even if there is no overrides as that breaks caching.

Focus areas to test

(optional)

mergeComponentVariables() is always creating a function even if the arguments are undefined we have this temporary
fix in place to avoid creating empty function because it is breaking caching we should either fix
mergeComponentVariables(), or handle this in a more generic way.
*/
Copy link
Contributor

Choose a reason for hiding this comment

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

Do we still need this comment?

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 would say yes to provide a context why this is a solution

fix in place to avoid creating empty function because it is breaking caching we should either fix
mergeComponentVariables(), or handle this in a more generic way.
*/
export default function mergeVariablesOverrides(
Copy link
Contributor

Choose a reason for hiding this comment

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

should we add this under @fluentui/styles with the other merge functions?

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 don't have there any preference, however I placed it here as it's more attached to component's specifics

});
});
};

const renderHeader = () => {
if (!header) {
Copy link
Contributor

Choose a reason for hiding this comment

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

Should we really remove this check?

Copy link
Member Author

Choose a reason for hiding this comment

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

Yup, as .create() call few lines below handles this:

const renderHeader = () => {
if (!header) {
return null;
}
const headerRowProps = {
header: true,
compact,
className: tableSlotClassNames.header,
} as TableRowProps;
const overrideProps = handleVariablesOverrides(variables);
return TableRow.create(header, {

...overrideProps,
}),
defaultProps: () => getA11yProps('cell', {}),
overrideProps: predefinedProps => ({
Copy link
Contributor

Choose a reason for hiding this comment

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

👍

@msft-github-bot
Copy link
Contributor

Hello @layershifter!

Because this pull request has the AutoMerge label, I will be glad to assist with helping to merge this pull request once all check-in policies pass.

Do note that I've been instructed to only help merge pull requests of this repository that have been opened for at least 8 hours, a condition that will be fulfilled in about 7 hours 42 minutes. No worries though, I will be back when the time is right! 😉

p.s. you can customize the way I help with merging this pull request, such as holding this pull request until a specific person approves. Simply @mention me (@msft-github-bot) and give me an instruction to get started! Learn more here.

@layershifter layershifter merged commit 4e3fefb into master May 28, 2020
@layershifter layershifter deleted the perf/use-simple-merge-vars branch May 28, 2020 11:44
@msft-github-bot
Copy link
Contributor

Perf Analysis

No significant results to display.

All results

Scenario Master Ticks PR Ticks Iterations Status
BaseButton 911 889 5000
ButtonNext 462 427 5000
Checkbox 1615 1656 5000
CheckboxBase 1383 1396 5000
CheckboxNext 1631 1656 5000
ChoiceGroup 5389 5446 5000
ComboBox 1012 938 1000
CommandBar 7773 7854 1000
ContextualMenu 13579 13484 1000
DefaultButton 1097 1083 5000
DetailsRow 3672 3694 5000
DetailsRow (fast icons) 3582 3690 5000
DetailsRow without styles 3434 3450 5000
Dialog 1573 1541 1000
DocumentCardTitle with truncation 1867 1884 1000
Dropdown 2648 2673 5000
FocusZone 1789 1754 5000
IconButton 1855 1941 5000
Label 330 333 5000
Link 516 494 5000
LinkNext 481 503 5000
MenuButton 1523 1563 5000
Nav 3493 3421 1000
Panel 1503 1502 1000
Persona 874 874 1000
Pivot 1479 1461 1000
PrimaryButton 1294 1297 5000
SearchBox 1359 1366 5000
Slider 1583 1530 5000
SliderNext 2002 2004 5000
Spinner 381 411 5000
SplitButton 3219 3203 5000
Stack 497 495 5000
Stack with Intrinsic children 2017 1941 5000
Stack with Text children 5135 5188 5000
TagPicker 2940 2895 5000
Text 403 397 5000
TextField 1439 1483 5000
Toggle 912 918 5000
ToggleNext 926 943 5000
button 81 60 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🔧 Avatar.Fluent 0.72 0.51 1.41:1 2000 1442
🦄 Button.Fluent 0.12 0.2 0.6:1 5000 579
🔧 Checkbox.Fluent 1.08 0.36 3:1 1000 1083
🦄 Dialog.Fluent 0.14 0.21 0.67:1 5000 718
🔧 Dropdown.Fluent 6.37 0.47 13.55:1 1000 6367
🔧 Icon.Fluent 0.15 0.06 2.5:1 5000 735
🎯 Image.Fluent 0.08 0.11 0.73:1 5000 381
🔧 Slider.Fluent 2.78 0.36 7.72:1 1000 2780
🔧 Text.Fluent 0.07 0.03 2.33:1 5000 360
🦄 Tooltip.Fluent 0.1 17.11 0.01:1 5000 488

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
PortalMinimalPerf.default 131 119 1.1:1
VideoMinimalPerf.default 694 643 1.08:1
TableMinimalPerf.default 413 387 1.07:1
TooltipMinimalPerf.default 799 745 1.07:1
Tooltip.Fluent 488 456 1.07:1
FlexMinimalPerf.default 311 294 1.06:1
HeaderMinimalPerf.default 383 360 1.06:1
ListMinimalPerf.default 522 496 1.05:1
AvatarMinimalPerf.default 775 747 1.04:1
RadioGroupMinimalPerf.default 451 434 1.04:1
SegmentMinimalPerf.default 356 343 1.04:1
Image.Fluent 381 366 1.04:1
HierarchicalTreeMinimalPerf.default 432 421 1.03:1
CustomToolbarPrototype.default 5186 5027 1.03:1
Text.Fluent 360 348 1.03:1
CardMinimalPerf.default 626 614 1.02:1
EmbedMinimalPerf.default 3753 3674 1.02:1
ListCommonPerf.default 1262 1241 1.02:1
MenuMinimalPerf.default 917 896 1.02:1
PopupMinimalPerf.default 281 276 1.02:1
SplitButtonMinimalPerf.default 4391 4294 1.02:1
StatusMinimalPerf.default 770 758 1.02:1
AttachmentSlotsPerf.default 1312 1294 1.01:1
DialogMinimalPerf.default 783 777 1.01:1
ItemLayoutMinimalPerf.default 2574 2540 1.01:1
LayoutMinimalPerf.default 430 426 1.01:1
ListWith60ListItems.default 1717 1697 1.01:1
MenuButtonMinimalPerf.default 1973 1956 1.01:1
ReactionMinimalPerf.default 406 402 1.01:1
TreeWith60ListItems.default 292 289 1.01:1
Button.Fluent 579 572 1.01:1
BoxMinimalPerf.default 356 357 1:1
ButtonSlotsPerf.default 818 817 1:1
DropdownManyItemsPerf.default 2349 2346 1:1
ListNestedPerf.default 1230 1229 1:1
TextAreaMinimalPerf.default 503 503 1:1
TreeMinimalPerf.default 1500 1493 1:1
Dialog.Fluent 718 717 1:1
AlertMinimalPerf.default 363 366 0.99:1
ChatMinimalPerf.default 639 643 0.99:1
CheckboxMinimalPerf.default 5393 5442 0.99:1
DropdownMinimalPerf.default 6745 6841 0.99:1
FormMinimalPerf.default 435 441 0.99:1
LoaderMinimalPerf.default 1239 1250 0.99:1
ProviderMinimalPerf.default 923 936 0.99:1
IconMinimalPerf.default 753 761 0.99:1
ToolbarMinimalPerf.default 880 887 0.99:1
Avatar.Fluent 1442 1452 0.99:1
Checkbox.Fluent 1083 1097 0.99:1
Dropdown.Fluent 6367 6443 0.99:1
Icon.Fluent 735 745 0.99:1
AnimationMinimalPerf.default 828 841 0.98:1
DividerMinimalPerf.default 367 373 0.98:1
HeaderSlotsPerf.default 818 838 0.98:1
ImageMinimalPerf.default 386 395 0.98:1
ProviderMergeThemesPerf.default 2002 2033 0.98:1
SliderMinimalPerf.default 2905 2966 0.98:1
CarouselMinimalPerf.default 553 571 0.97:1
GridMinimalPerf.default 1496 1542 0.97:1
RefMinimalPerf.default 189 195 0.97:1
LabelMinimalPerf.default 426 445 0.96:1
AttachmentMinimalPerf.default 159 168 0.95:1
ButtonMinimalPerf.default 176 185 0.95:1
ChatDuplicateMessagesPerf.default 557 589 0.95:1
InputMinimalPerf.default 1601 1682 0.95:1
Slider.Fluent 2780 2989 0.93:1
AccordionMinimalPerf.default 149 162 0.92:1
TextMinimalPerf.default 356 397 0.9:1
ChatWithPopoverPerf.default 566 737 0.77:1

@size-auditor
Copy link

size-auditor bot commented May 28, 2020

Asset size changes

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

Baseline commit: e5adec2a91f1b920d1b0a2ab5e29828f2a7f4c30 (build)

miroslavstastny pushed a commit to levithomason/fluentui that referenced this pull request Jun 8, 2020
…les are not passed (microsoft#13374)

* perf: use mergeVariablesOverrides() to avoid cache breaks when variables are not passed

* add changelog entry

* fix ts issue
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.

None yet

4 participants