Skip to content

Conversation

@spmonahan
Copy link
Contributor

Just a draft for discussion.

@codesandbox-ci
Copy link

codesandbox-ci bot commented Sep 14, 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 370028f:

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

@size-auditor
Copy link

size-auditor bot commented Sep 14, 2022

Asset size changes

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

Baseline commit: 483f160617f1037e672fe74b8e52abfee9378517 (build)

@fabricteam
Copy link
Collaborator

fabricteam commented Sep 14, 2022

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1219 1274 5000
Button mount 948 846 5000
FluentProvider mount 1568 1551 5000
FluentProviderWithTheme mount 611 560 10
FluentProviderWithTheme virtual-rerender 591 605 10
FluentProviderWithTheme virtual-rerender-with-unmount 621 566 10
MakeStyles mount 1858 1835 50000
SpinButton mount 2413 2449 5000

@fabricteam
Copy link
Collaborator

fabricteam commented Sep 14, 2022

📊 Bundle size report

Unchanged fixtures
Package & Exports Size (minified/GZIP)
global-context
createContext
533 B
341 B
global-context
createContextSelector
554 B
348 B
priority-overflow
createOverflowManager
2.936 kB
1.212 kB
react-accordion
Accordion (including children components)
78.914 kB
24.06 kB
react-alert
Alert
83.511 kB
20.921 kB
react-avatar
Avatar
48.381 kB
13.696 kB
react-avatar
AvatarGroup
14.95 kB
5.989 kB
react-avatar
AvatarGroupItem
68.349 kB
19.039 kB
react-badge
Badge
22.6 kB
7.205 kB
react-badge
CounterBadge
23.503 kB
7.497 kB
react-badge
PresenceBadge
24.05 kB
7.067 kB
react-button
Button
36.119 kB
9.647 kB
react-button
CompoundButton
43.144 kB
10.86 kB
react-button
MenuButton
38.813 kB
10.551 kB
react-button
SplitButton
46.228 kB
11.933 kB
react-button
ToggleButton
51.888 kB
11.127 kB
react-card
Card - All
67.002 kB
19.261 kB
react-card
Card
62.684 kB
18.177 kB
react-card
CardFooter
8.561 kB
3.601 kB
react-card
CardHeader
9.604 kB
3.94 kB
react-card
CardPreview
8.662 kB
3.656 kB
react-combobox
Combobox (including child components)
74.636 kB
24.186 kB
react-combobox
Dropdown (including child components)
74.236 kB
24.086 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
188.672 kB
52.359 kB
react-components
react-components: FluentProvider & webLightTheme
33.394 kB
11.007 kB
react-dialog
Dialog (including children components)
82.755 kB
24.581 kB
react-divider
Divider
16.459 kB
5.902 kB
react-image
Image
10.78 kB
4.264 kB
react-input
Input
23.757 kB
7.704 kB
react-label
Label
9.338 kB
3.86 kB
react-link
Link
11.784 kB
4.867 kB
react-menu
Menu (including children components)
116.572 kB
35.778 kB
react-menu
Menu (including selectable components)
119.641 kB
36.297 kB
react-overflow
hooks only
10.685 kB
4.104 kB
react-popover
Popover
102.963 kB
31.553 kB
react-portal
Portal
10.576 kB
3.875 kB
react-portal-compat
PortalCompatProvider
5.851 kB
1.964 kB
react-positioning
usePositioning
19.7 kB
7.404 kB
react-provider
FluentProvider
15.755 kB
5.883 kB
react-radio
Radio
35.56 kB
11.929 kB
react-radio
RadioGroup
14.248 kB
5.7 kB
react-select
Select
20.846 kB
7.346 kB
react-slider
Slider
31.526 kB
10.046 kB
react-spinbutton
SpinButton
44.102 kB
12.425 kB
react-spinner
Spinner
19.977 kB
6.438 kB
react-switch
Switch
32.097 kB
10.27 kB
react-text
Text - Default
11.782 kB
4.605 kB
react-text
Text - Wrappers
15.092 kB
5.044 kB
react-textarea
Textarea
25.013 kB
8.133 kB
react-theme
Single theme token import
69 B
89 B
react-theme
Teams: all themes
29.65 kB
6.444 kB
react-theme
Teams: Light theme
17.486 kB
5.057 kB
react-tooltip
Tooltip
41.535 kB
14.639 kB
react-utilities
SSRProvider
180 B
159 B
🤖 This report was generated against 483f160617f1037e672fe74b8e52abfee9378517

@fabricteam
Copy link
Collaborator

fabricteam commented Sep 14, 2022

Perf Analysis (@fluentui/react-northstar)

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
PortalMinimalPerf.default 175 156 1.12:1
FlexMinimalPerf.default 315 284 1.11:1
ChatDuplicateMessagesPerf.default 335 305 1.1:1
ButtonMinimalPerf.default 185 170 1.09:1
TextMinimalPerf.default 393 361 1.09:1
TreeWith60ListItems.default 192 177 1.08:1
HeaderMinimalPerf.default 406 380 1.07:1
ToolbarMinimalPerf.default 1009 944 1.07:1
TableMinimalPerf.default 433 409 1.06:1
BoxMinimalPerf.default 371 353 1.05:1
CardMinimalPerf.default 591 561 1.05:1
HeaderSlotsPerf.default 836 799 1.05:1
ListWith60ListItems.default 671 638 1.05:1
ReactionMinimalPerf.default 420 401 1.05:1
CustomToolbarPrototype.default 2768 2633 1.05:1
AttachmentMinimalPerf.default 166 159 1.04:1
ImageMinimalPerf.default 425 410 1.04:1
ItemLayoutMinimalPerf.default 1308 1256 1.04:1
ListMinimalPerf.default 574 553 1.04:1
LoaderMinimalPerf.default 713 687 1.04:1
StatusMinimalPerf.default 753 723 1.04:1
AttachmentSlotsPerf.default 1229 1192 1.03:1
CarouselMinimalPerf.default 509 492 1.03:1
ChatMinimalPerf.default 793 771 1.03:1
GridMinimalPerf.default 377 367 1.03:1
SplitButtonMinimalPerf.default 4887 4723 1.03:1
CheckboxMinimalPerf.default 2273 2232 1.02:1
DialogMinimalPerf.default 839 826 1.02:1
EmbedMinimalPerf.default 4025 3962 1.02:1
SegmentMinimalPerf.default 369 362 1.02:1
VideoMinimalPerf.default 794 777 1.02:1
AccordionMinimalPerf.default 158 157 1.01:1
AnimationMinimalPerf.default 578 573 1.01:1
AvatarMinimalPerf.default 197 195 1.01:1
DividerMinimalPerf.default 385 380 1.01:1
LabelMinimalPerf.default 420 415 1.01:1
LayoutMinimalPerf.default 377 375 1.01:1
RosterPerf.default 2381 2359 1.01:1
ProviderMergeThemesPerf.default 1285 1267 1.01:1
ProviderMinimalPerf.default 421 418 1.01:1
SliderMinimalPerf.default 1702 1683 1.01:1
IconMinimalPerf.default 715 706 1.01:1
TableManyItemsPerf.default 2060 2035 1.01:1
TextAreaMinimalPerf.default 539 533 1.01:1
ButtonOverridesMissPerf.default 1412 1411 1:1
DropdownMinimalPerf.default 2819 2832 1:1
FormMinimalPerf.default 429 428 1:1
InputMinimalPerf.default 1194 1192 1:1
ListNestedPerf.default 615 613 1:1
PopupMinimalPerf.default 666 663 1:1
RadioGroupMinimalPerf.default 479 478 1:1
RefMinimalPerf.default 222 222 1:1
SkeletonMinimalPerf.default 376 377 1:1
TreeMinimalPerf.default 877 879 1:1
AlertMinimalPerf.default 302 305 0.99:1
ButtonSlotsPerf.default 576 579 0.99:1
DatepickerMinimalPerf.default 6106 6186 0.99:1
MenuMinimalPerf.default 878 885 0.99:1
MenuButtonMinimalPerf.default 1856 1871 0.99:1
ChatWithPopoverPerf.default 406 414 0.98:1
DropdownManyItemsPerf.default 724 738 0.98:1
ListCommonPerf.default 666 684 0.97:1
TooltipMinimalPerf.default 2437 2517 0.97:1

@fabricteam
Copy link
Collaborator

fabricteam commented Sep 14, 2022

Perf Analysis (@fluentui/react)

Scenario Render type Master Ticks PR Ticks Iterations Status
ContextualMenu mount 15666 12936 1000 Possible regression
All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 1199 1204 5000
Breadcrumb mount 3147 3030 1000
Checkbox mount 2686 2669 5000
CheckboxBase mount 2389 2347 5000
ChoiceGroup mount 4447 4471 5000
ComboBox mount 1243 1266 1000
CommandBar mount 9831 10052 1000
ContextualMenu mount 15666 12936 1000 Possible regression
DefaultButton mount 1406 1327 5000
DetailsRow mount 3432 3522 5000
DetailsRowFast mount 3513 3567 5000
DetailsRowNoStyles mount 3435 3468 5000
Dialog mount 3109 3105 1000
DocumentCardTitle mount 557 569 1000
Dropdown mount 3249 3214 5000
FocusTrapZone mount 2028 2049 5000
FocusZone mount 1985 1974 5000
GroupedList mount 53346 57756 2
GroupedList virtual-rerender 25639 25902 2
GroupedList virtual-rerender-with-unmount 90239 94812 2
GroupedListV2 mount 549 548 2
GroupedListV2 virtual-rerender 504 488 2
GroupedListV2 virtual-rerender-with-unmount 527 552 2
IconButton mount 1812 1711 5000
Label mount 673 688 5000
Layer mount 4126 4108 5000
Link mount 762 816 5000
MenuButton mount 1662 1646 5000
MessageBar mount 2158 2319 5000
Nav mount 3191 3227 1000
OverflowSet mount 1357 1369 5000
Panel mount 2522 2390 1000
Persona mount 1160 1258 1000
Pivot mount 1650 1663 1000
PrimaryButton mount 1490 1513 5000
Rating mount 7007 7036 5000
SearchBox mount 1522 1500 5000
Shimmer mount 2890 2863 5000
Slider mount 2083 2105 5000
SpinButton mount 4700 4671 5000
Spinner mount 797 791 5000
SplitButton mount 3067 3083 5000
Stack mount 864 859 5000
StackWithIntrinsicChildren mount 2348 2330 5000
StackWithTextChildren mount 4797 4804 5000
SwatchColorPicker mount 10560 10520 5000
TagPicker mount 2632 2647 5000
TeachingBubble mount 90736 90936 5000
Text mount 788 790 5000
TextField mount 1596 1589 5000
ThemeProvider mount 1523 1524 5000
ThemeProvider virtual-rerender 1082 1076 5000
ThemeProvider virtual-rerender-with-unmount 2170 2170 5000
Toggle mount 1109 1101 5000
buttonNative mount 548 544 5000

@spmonahan spmonahan force-pushed the stress-test/random-tree branch from 955862a to 6f8514f Compare September 15, 2022 23:43
Adds a CLI application for Stress Test that allows test configurations
to easily be generated and run. This makes running large test suites
as simple as a single command and eliminates the need for most npm
scripts that previously existed for this package.
This command allows the application to be built via the CLI.

It adds:

- Support for different Griffel build modes (runtime, build time, extraction)
- Building dependencies for Stress Test (e.g., @fluentui/react)
- Running Webpack dev server via CLI
This commit adds a "random tree" feature that will use a seedable random
number generator to generate a tree data structure that is agnostic to
any particular UI technology. The generated trees are meant to mirror
the DOM and can be plugged into things like React or Web Components to
render a DOM tree in the browser.

The key features of this tree are:

- It's deterministic thanks to the seedable RNG but can easily produce
  many different trees. This ensures we use the exact same tree when
  comparing different UI technologies.
- It's extensible via a `visit()` callback. This allows users to augment
  their trees however they want. This commit ships a "selecto tree" that
  generates CSS selectors to go along side the generated tree.
This builds on the previous commit, focusing on adding Web Component and
vanilla DOM implementations of the random trees, adding test cases and
making quality of life improvements like adding test fixtures.
@spmonahan spmonahan force-pushed the stress-test/random-tree branch from 6f8514f to 7f7f203 Compare September 16, 2022 15:57
@spmonahan spmonahan closed this Oct 10, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants