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

Adds a Module Federation innerloop experience #16771

Merged
merged 2 commits into from
Feb 2, 2021

Conversation

kenotron
Copy link
Member

@kenotron kenotron commented Feb 2, 2021

Pull request checklist

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

Description of changes

This adds a just-scripts task called "mf" that can be triggered through the command yarn mf in the packages/react folder. When this is run, a webpack-dev-server task is triggered, generating a module federation bundle, served through the WDS. This can then be fed into any MF consumer through the global var of fluentuiReact. This global var mechanism can be changed, but needs some investigation. So far, this has proven to be a good innerloop experience in coordination of the @lading/server "manifest service"

Focus areas to test

(optional)

@codesandbox-ci
Copy link

codesandbox-ci bot commented Feb 2, 2021

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 8ea8f2e:

Sandbox Source
Fluent UI Button Configuration
codesandbox-react-template Configuration
codesandbox-react-northstar-template Configuration

@size-auditor
Copy link

size-auditor bot commented Feb 2, 2021

Asset size changes

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

Baseline commit: 677134343636ac373093f59cc67f5c09ab3bc21f (build)

@fabricteam
Copy link
Collaborator

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 894 905 5000
BaseButtonCompat mount 996 1024 5000
Breadcrumb mount 45295 45522 5000
Checkbox mount 1641 1669 5000
CheckboxBase mount 1439 1411 5000
ChoiceGroup mount 5147 5059 5000
ComboBox mount 1006 1016 1000
CommandBar mount 10404 10422 1000
ContextualMenu mount 6450 6338 1000
DefaultButtonCompat mount 1226 1219 5000
DetailsRow mount 3862 3910 5000
DetailsRowFast mount 3759 3821 5000
DetailsRowNoStyles mount 3631 3706 5000
Dialog mount 1507 1548 1000
DocumentCardTitle mount 1873 1885 1000
Dropdown mount 3591 3510 5000
FocusTrapZone mount 1812 1832 5000
FocusZone mount 1854 1819 5000
IconButtonCompat mount 1949 1938 5000
Label mount 356 368 5000
Layer mount 1871 1886 5000
Link mount 465 495 5000
MakeStyles mount 2026 1977 50000
MenuButtonCompat mount 1623 1600 5000
MessageBar mount 2124 2106 5000
Nav mount 3544 3540 1000
OverflowSet mount 1087 1077 5000
Panel mount 1495 1426 1000
Persona mount 920 915 1000
Pivot mount 1490 1488 1000
PrimaryButtonCompat mount 1390 1379 5000
Rating mount 8334 8118 5000
SearchBox mount 1455 1422 5000
Shimmer mount 2827 2731 5000
Slider mount 2007 2042 5000
SpinButton mount 5277 5341 5000
Spinner mount 441 419 5000
SplitButtonCompat mount 3401 3436 5000
Stack mount 544 560 5000
StackWithIntrinsicChildren mount 1668 1759 5000
StackWithTextChildren mount 4991 4948 5000
SwatchColorPicker mount 10836 10996 5000
Tabs mount 1513 1466 1000
TagPicker mount 2973 2991 5000
TeachingBubble mount 12195 12264 5000
Text mount 451 474 5000
TextField mount 1486 1478 5000
ThemeProvider mount 1485 1477 5000
ThemeProvider virtual-rerender 620 616 5000
ThemeProviderNext mount 2230 2221 5000
Toggle mount 875 873 5000
button mount 738 705 5000
buttonNative mount 107 110 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.19 0.55 0.35:1 2000 389
🦄 Button.Fluent 0.13 0.23 0.57:1 5000 650
🔧 Checkbox.Fluent 0.7 0.38 1.84:1 1000 698
🎯 Dialog.Fluent 0.18 0.24 0.75:1 5000 891
🔧 Dropdown.Fluent 3.24 0.45 7.2:1 1000 3243
🔧 Icon.Fluent 0.15 0.07 2.14:1 5000 773
🎯 Image.Fluent 0.1 0.14 0.71:1 5000 479
🔧 Slider.Fluent 1.77 0.48 3.69:1 1000 1771
🔧 Text.Fluent 0.08 0.04 2:1 5000 424
🦄 Tooltip.Fluent 0.13 0.95 0.14:1 5000 633

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
ButtonMinimalPerf.default 226 203 1.11:1
BoxMinimalPerf.default 453 411 1.1:1
ButtonSlotsPerf.default 674 619 1.09:1
DividerMinimalPerf.default 498 455 1.09:1
RadioGroupMinimalPerf.default 544 504 1.08:1
TableMinimalPerf.default 534 495 1.08:1
AttachmentMinimalPerf.default 194 181 1.07:1
SkeletonMinimalPerf.default 465 434 1.07:1
AnimationMinimalPerf.default 472 445 1.06:1
HeaderMinimalPerf.default 467 442 1.06:1
AvatarMinimalPerf.default 221 210 1.05:1
CardMinimalPerf.default 664 632 1.05:1
ImageMinimalPerf.default 480 455 1.05:1
MenuMinimalPerf.default 1051 999 1.05:1
ReactionMinimalPerf.default 503 477 1.05:1
StatusMinimalPerf.default 896 857 1.05:1
IconMinimalPerf.default 801 762 1.05:1
AccordionMinimalPerf.default 187 180 1.04:1
LayoutMinimalPerf.default 498 480 1.04:1
Image.Fluent 479 461 1.04:1
ChatDuplicateMessagesPerf.default 420 407 1.03:1
Slider.Fluent 1771 1727 1.03:1
LoaderMinimalPerf.default 853 839 1.02:1
PortalMinimalPerf.default 185 182 1.02:1
TooltipMinimalPerf.default 925 908 1.02:1
Avatar.Fluent 389 381 1.02:1
Checkbox.Fluent 698 684 1.02:1
Icon.Fluent 773 761 1.02:1
GridMinimalPerf.default 440 436 1.01:1
PopupMinimalPerf.default 786 776 1.01:1
ProviderMinimalPerf.default 1076 1067 1.01:1
RefMinimalPerf.default 263 261 1.01:1
SegmentMinimalPerf.default 433 429 1.01:1
SplitButtonMinimalPerf.default 4345 4306 1.01:1
TableManyItemsPerf.default 2439 2415 1.01:1
CustomToolbarPrototype.default 4076 4048 1.01:1
ToolbarMinimalPerf.default 1082 1067 1.01:1
VideoMinimalPerf.default 742 737 1.01:1
CarouselMinimalPerf.default 544 546 1:1
ChatMinimalPerf.default 708 705 1:1
DropdownMinimalPerf.default 3327 3311 1:1
HeaderSlotsPerf.default 941 945 1:1
InputMinimalPerf.default 1447 1452 1:1
ItemLayoutMinimalPerf.default 1452 1458 1:1
ListCommonPerf.default 770 768 1:1
ProviderMergeThemesPerf.default 1713 1716 1:1
Text.Fluent 424 422 1:1
Tooltip.Fluent 633 631 1:1
ButtonUseCssNestingPerf.default 1224 1240 0.99:1
EmbedMinimalPerf.default 4773 4832 0.99:1
ListMinimalPerf.default 574 582 0.99:1
MenuButtonMinimalPerf.default 1805 1822 0.99:1
SliderMinimalPerf.default 1750 1763 0.99:1
Dropdown.Fluent 3243 3270 0.99:1
ButtonOverridesMissPerf.default 1816 1844 0.98:1
ButtonUseCssPerf.default 894 912 0.98:1
CheckboxMinimalPerf.default 3041 3093 0.98:1
DialogMinimalPerf.default 908 928 0.98:1
FlexMinimalPerf.default 369 377 0.98:1
FormMinimalPerf.default 518 528 0.98:1
LabelMinimalPerf.default 495 504 0.98:1
AttachmentSlotsPerf.default 1298 1332 0.97:1
ChatWithPopoverPerf.default 467 483 0.97:1
DatepickerMinimalPerf.default 51217 52843 0.97:1
DropdownManyItemsPerf.default 843 870 0.97:1
ListNestedPerf.default 692 717 0.97:1
ListWith60ListItems.default 718 741 0.97:1
RosterPerf.default 1283 1320 0.97:1
TextAreaMinimalPerf.default 581 597 0.97:1
TreeWith60ListItems.default 207 213 0.97:1
TextMinimalPerf.default 435 452 0.96:1
Button.Fluent 650 680 0.96:1
Dialog.Fluent 891 932 0.96:1
AlertMinimalPerf.default 336 353 0.95:1
TreeMinimalPerf.default 863 910 0.95:1

@kenotron kenotron merged commit 497df47 into microsoft:master Feb 2, 2021
@kenotron kenotron deleted the feat/mf branch February 2, 2021 21:19
@@ -25,7 +25,8 @@
"start:legacy": "yarn workspace @fluentui/public-docsite-resources start",
"start-test": "just-scripts jest-watch",
"test": "just-scripts test",
"update-snapshots": "just-scripts jest -u"
"update-snapshots": "just-scripts jest -u",
"mf": "just-scripts mf"
Copy link
Member

Choose a reason for hiding this comment

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

Can we...maybe find a different acronym? 🤣

Copy link
Member Author

Choose a reason for hiding this comment

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

hahahah mf is everywhere :)

const { createServeConfig } = require('@fluentui/scripts/webpack/webpack-resources');
const { webpackMerge } = require('just-scripts');

const shared = {
Copy link
Member

Choose a reason for hiding this comment

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

I know I say this all the time but it would probably help to have some comments in here in case anyone else needs to maintain it later.

@msft-fluent-ui-bot
Copy link
Collaborator

🎉@fluentui/react@v8.0.0-beta.48 has been released which incorporates this pull request.:tada:

Handy links:

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.

6 participants