Skip to content

RFC for converged implementation pattern#16806

Merged
ling1726 merged 35 commits intomicrosoft:masterfrom
ling1726:rfc/converged-implementation-pattern
Feb 12, 2021
Merged

RFC for converged implementation pattern#16806
ling1726 merged 35 commits intomicrosoft:masterfrom
ling1726:rfc/converged-implementation-pattern

Conversation

@ling1726
Copy link
Copy Markdown
Contributor

@ling1726 ling1726 commented Feb 3, 2021

Description of changes

This RFC attempts to document and find some quorum on converged component implementation patterns. This has been a pain point for newer engineers joining the team at a time when the patterns themselves might be undergoing change.

The best result (I can think of) would be to output the conclusion code samples in this RFC into automated package generation, and keep this RFC updated (I am hopeful....) if we continue our state of change on these issues

@codesandbox-ci
Copy link
Copy Markdown

codesandbox-ci Bot commented Feb 3, 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 0d05ded:

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

@size-auditor
Copy link
Copy Markdown

size-auditor Bot commented Feb 3, 2021

Asset size changes

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

Baseline commit: fe4959d22fec3382fa743b396f671b1b63a26b9e (build)

@fabricteam
Copy link
Copy Markdown
Collaborator

fabricteam commented Feb 3, 2021

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 895 874 5000
BaseButtonCompat mount 1060 1008 5000
Breadcrumb mount 42760 42835 5000
Checkbox mount 1595 1586 5000
CheckboxBase mount 1370 1294 5000
ChoiceGroup mount 5019 5013 5000
ComboBox mount 990 973 1000
CommandBar mount 10227 10157 1000
ContextualMenu mount 6303 6208 1000
DefaultButtonCompat mount 1209 1226 5000
DetailsRow mount 3730 3716 5000
DetailsRowFast mount 3664 3802 5000
DetailsRowNoStyles mount 3543 3604 5000
Dialog mount 1507 1523 1000
DocumentCardTitle mount 1803 1813 1000
Dropdown mount 3519 3509 5000
FocusTrapZone mount 1839 1795 5000
FocusZone mount 1785 1791 5000
IconButtonCompat mount 1826 1843 5000
Label mount 349 340 5000
Layer mount 1906 1878 5000
Link mount 488 503 5000
MakeStyles mount 1942 1932 50000
MenuButtonCompat mount 1563 1557 5000
MessageBar mount 2028 2058 5000
Nav mount 3343 3439 1000
OverflowSet mount 1073 1057 5000
Panel mount 1435 1406 1000
Persona mount 901 898 1000
Pivot mount 1485 1445 1000
PrimaryButtonCompat mount 1334 1348 5000
Rating mount 8292 8280 5000
SearchBox mount 1421 1403 5000
Shimmer mount 2707 2760 5000
Slider mount 1951 2028 5000
SpinButton mount 5283 5214 5000
Spinner mount 448 434 5000
SplitButtonCompat mount 3275 3315 5000
Stack mount 527 516 5000
StackWithIntrinsicChildren mount 1680 1679 5000
StackWithTextChildren mount 4940 5081 5000
SwatchColorPicker mount 10744 10785 5000
Tabs mount 1598 1480 1000
TagPicker mount 2980 3039 5000
TeachingBubble mount 12574 12282 5000
Text mount 476 437 5000
TextField mount 1498 1469 5000
ThemeProvider mount 1459 1449 5000
ThemeProvider virtual-rerender 627 621 5000
ThemeProviderNext mount 2204 2231 5000
Toggle mount 809 863 5000
button mount 743 741 5000
buttonNative mount 114 126 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🦄 Avatar.Fluent 0.19 0.54 0.35:1 2000 384
🦄 Button.Fluent 0.13 0.22 0.59:1 5000 649
🔧 Checkbox.Fluent 0.69 0.36 1.92:1 1000 690
🎯 Dialog.Fluent 0.18 0.23 0.78:1 5000 889
🔧 Dropdown.Fluent 3.31 0.44 7.52:1 1000 3306
🔧 Icon.Fluent 0.16 0.07 2.29:1 5000 779
🎯 Image.Fluent 0.1 0.14 0.71:1 5000 492
🔧 Slider.Fluent 1.76 0.48 3.67:1 1000 1758
🔧 Text.Fluent 0.09 0.03 3:1 5000 432
🦄 Tooltip.Fluent 0.13 0.93 0.14:1 5000 628

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AttachmentMinimalPerf.default 218 192 1.14:1
CarouselMinimalPerf.default 576 537 1.07:1
ListWith60ListItems.default 738 688 1.07:1
RefMinimalPerf.default 264 249 1.06:1
IconMinimalPerf.default 785 739 1.06:1
TextMinimalPerf.default 445 421 1.06:1
TreeWith60ListItems.default 216 204 1.06:1
ImageMinimalPerf.default 480 457 1.05:1
Image.Fluent 492 469 1.05:1
Text.Fluent 432 413 1.05:1
LoaderMinimalPerf.default 823 789 1.04:1
SkeletonMinimalPerf.default 447 431 1.04:1
StatusMinimalPerf.default 874 840 1.04:1
VideoMinimalPerf.default 741 711 1.04:1
BoxMinimalPerf.default 432 418 1.03:1
ButtonSlotsPerf.default 664 644 1.03:1
ChatMinimalPerf.default 731 712 1.03:1
DividerMinimalPerf.default 459 445 1.03:1
HeaderSlotsPerf.default 924 898 1.03:1
SegmentMinimalPerf.default 458 444 1.03:1
TableMinimalPerf.default 495 479 1.03:1
Dialog.Fluent 889 867 1.03:1
AnimationMinimalPerf.default 469 459 1.02:1
AttachmentSlotsPerf.default 1364 1340 1.02:1
ChatDuplicateMessagesPerf.default 415 408 1.02:1
LabelMinimalPerf.default 508 496 1.02:1
LayoutMinimalPerf.default 508 496 1.02:1
RadioGroupMinimalPerf.default 524 512 1.02:1
TextAreaMinimalPerf.default 592 579 1.02:1
TooltipMinimalPerf.default 927 910 1.02:1
AvatarMinimalPerf.default 227 224 1.01:1
ButtonUseCssPerf.default 939 934 1.01:1
DialogMinimalPerf.default 895 889 1.01:1
FormMinimalPerf.default 500 495 1.01:1
GridMinimalPerf.default 412 407 1.01:1
HeaderMinimalPerf.default 438 432 1.01:1
ListCommonPerf.default 760 753 1.01:1
ListNestedPerf.default 674 666 1.01:1
MenuMinimalPerf.default 1027 1012 1.01:1
PortalMinimalPerf.default 184 182 1.01:1
ProviderMergeThemesPerf.default 1698 1684 1.01:1
SplitButtonMinimalPerf.default 4275 4251 1.01:1
TreeMinimalPerf.default 906 895 1.01:1
Dropdown.Fluent 3306 3288 1.01:1
AlertMinimalPerf.default 355 356 1:1
ButtonOverridesMissPerf.default 1914 1908 1:1
ButtonUseCssNestingPerf.default 1207 1206 1:1
CheckboxMinimalPerf.default 3068 3072 1:1
DropdownManyItemsPerf.default 826 825 1:1
DropdownMinimalPerf.default 3294 3306 1:1
EmbedMinimalPerf.default 4725 4745 1:1
InputMinimalPerf.default 1430 1432 1:1
ItemLayoutMinimalPerf.default 1433 1439 1:1
PopupMinimalPerf.default 772 773 1:1
TableManyItemsPerf.default 2350 2339 1:1
CustomToolbarPrototype.default 4138 4125 1:1
ToolbarMinimalPerf.default 1096 1092 1:1
Avatar.Fluent 384 384 1:1
Checkbox.Fluent 690 693 1:1
DatepickerMinimalPerf.default 52466 53257 0.99:1
ProviderMinimalPerf.default 1089 1103 0.99:1
ReactionMinimalPerf.default 470 473 0.99:1
SliderMinimalPerf.default 1774 1788 0.99:1
CardMinimalPerf.default 655 667 0.98:1
ListMinimalPerf.default 585 600 0.98:1
MenuButtonMinimalPerf.default 1722 1750 0.98:1
Tooltip.Fluent 628 638 0.98:1
ButtonMinimalPerf.default 214 220 0.97:1
FlexMinimalPerf.default 347 356 0.97:1
Icon.Fluent 779 806 0.97:1
Slider.Fluent 1758 1811 0.97:1
Button.Fluent 649 679 0.96:1
ChatWithPopoverPerf.default 515 541 0.95:1
RosterPerf.default 1294 1362 0.95:1
AccordionMinimalPerf.default 192 204 0.94:1

Comment thread rfcs/converged-implementation-patterns.md Outdated
Comment thread rfcs/converged-implementation-patterns.md Outdated
Comment thread rfcs/converged-implementation-patterns.md Outdated
Comment thread rfcs/converged-implementation-patterns.md Outdated
Co-authored-by: Jakub Konka <kubkon@jakubkonka.com>
Comment thread rfcs/converged-implementation-patterns.md Outdated
Co-authored-by: Jakub Konka <kubkon@jakubkonka.com>
Comment thread rfcs/converged-implementation-patterns.md Outdated
Comment thread rfcs/converged-implementation-patterns.md Outdated
Comment thread rfcs/converged-implementation-patterns.md Outdated
Comment thread rfcs/converged-implementation-patterns.md Outdated
Co-authored-by: Jakub Konka <kubkon@jakubkonka.com>
Comment thread rfcs/converged-implementation-patterns.md Outdated
Comment thread rfcs/converged-implementation-patterns.md Outdated
@kubkon
Copy link
Copy Markdown
Contributor

kubkon commented Feb 4, 2021

This is absolutely amazing, thanks so much @ling1726! All in all, it reads really well, and is simple to understand. I did leave a couple of nits/questions but otherwise, great job!

Comment thread rfcs/converged-implementation-patterns.md Outdated
Comment thread rfcs/converged-implementation-patterns.md Outdated
Comment thread rfcs/converged-implementation-patterns.md Outdated
ling1726 and others added 3 commits February 8, 2021 09:36
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Comment thread rfcs/converged-implementation-patterns.md Outdated
ling1726 and others added 3 commits February 8, 2021 09:37
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Comment thread rfcs/converged-implementation-patterns.md Outdated
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Comment thread rfcs/converged-implementation-patterns.md Outdated
Comment thread rfcs/converged-implementation-patterns.md

// merges the props we declare internally and what is passed in
// by a consumer
const mergedProps = mergeProps(
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

suggestion: If we wanna provide intuitive API's I'd suggest to reflect that in naming.

eg, from consumer point of view:

// ah makes sense? I guess
- const mergedProps = mergeProps()
// what, merge props returns draft state ?
- const draftState = mergeProps()

// explicit api with good enough naming
+const {state} = mergeProps()

);

if (checkedValues || onCheckedValuesChange) {
mergedProps.hasCheckMark = true;
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

thought: ability to be able to directly mutate magical dictionary feels kinda wrong. Do we really need to provide apis like this ?

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

I would love for immutable state, but this is AFAIK what all the current utils and tooling works on

React.useEffect(...);

// make an 'uber' state
const state = { someState, contextValue, ...mergedProps}
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

I'd love to agree with you, but from my experience you cannot expect anything unfortunately (unless it can be automated/enforced by tooling). Developers tend to always find a way how to do "workarounds" around expectations :D

Comment thread rfcs/converged-implementation-patterns.md
Comment thread rfcs/converged-implementation-patterns.md Outdated
Co-authored-by: Martin Hochel <hochelmartin@gmail.com>
Comment thread rfcs/converged-implementation-patterns.md Outdated
Comment thread rfcs/converged-implementation-patterns.md Outdated
ling1726 and others added 2 commits February 8, 2021 17:33
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
@kubkon kubkon mentioned this pull request Feb 9, 2021
32 tasks
@ling1726 ling1726 added this to the February Project Cycle 2021 milestone Feb 9, 2021
@ling1726 ling1726 merged commit fc3ddce into microsoft:master Feb 12, 2021
joshualamusga1 pushed a commit to joshualamusga1/fluentui that referenced this pull request Feb 25, 2021
* RFC for converged implementation pattern

* Update rfcs/converged-implementation-patterns.md

Co-authored-by: Jakub Konka <kubkon@jakubkonka.com>

* Update rfcs/converged-implementation-patterns.md

Co-authored-by: Jakub Konka <kubkon@jakubkonka.com>

* Update converged-implementation-patterns.md

* Update rfcs/converged-implementation-patterns.md

Co-authored-by: Jakub Konka <kubkon@jakubkonka.com>

* Update rfcs/converged-implementation-patterns.md

Co-authored-by: Jakub Konka <kubkon@jakubkonka.com>

* Update rfcs/converged-implementation-patterns.md

Co-authored-by: Jakub Konka <kubkon@jakubkonka.com>

* Update converged-implementation-patterns.md

* Update converged-implementation-patterns.md

Add more explanation for render func

* Update converged-implementation-patterns.md

* Update converged-implementation-patterns.md

Modified order

* Update converged-implementation-patterns.md

Clarified render func responsibility

* Update converged-implementation-patterns.md

* Update converged-implementation-patterns.md

fix typo

* Update rfcs/converged-implementation-patterns.md

Co-authored-by: Jakub Konka <kubkon@jakubkonka.com>

* Update rfcs/converged-implementation-patterns.md

Co-authored-by: Jakub Konka <kubkon@jakubkonka.com>

* Update converged-implementation-patterns.md

* Update converged-implementation-patterns.md

* Update rfcs/converged-implementation-patterns.md

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Update rfcs/converged-implementation-patterns.md

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Update rfcs/converged-implementation-patterns.md

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Update rfcs/converged-implementation-patterns.md

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Update rfcs/converged-implementation-patterns.md

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Update rfcs/converged-implementation-patterns.md

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Update rfcs/converged-implementation-patterns.md

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Update rfcs/converged-implementation-patterns.md

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Update converged-implementation-patterns.md

type slots

* Update converged-implementation-patterns.md

use state in makestyles

* Update converged-implementation-patterns.md

* Update converged-implementation-patterns.md

* Update converged-implementation-patterns.md

* Update rfcs/converged-implementation-patterns.md

* Update rfcs/converged-implementation-patterns.md

Co-authored-by: Martin Hochel <hochelmartin@gmail.com>

* Update rfcs/converged-implementation-patterns.md

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

* Update rfcs/converged-implementation-patterns.md

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

Co-authored-by: Jakub Konka <kubkon@jakubkonka.com>
Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>
Co-authored-by: Martin Hochel <hochelmartin@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Type: RFC Request for Feedback

Projects

None yet

Development

Successfully merging this pull request may close these issues.

8 participants