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

Jump to bottom

feat: add Emotion renderer for v0 #13547

Merged
merged 10 commits into from Jun 18, 2020
Merged

feat: add Emotion renderer for v0 #13547

merged 10 commits into from Jun 18, 2020

Conversation

layershifter
Copy link
Member

@layershifter layershifter commented Jun 10, 2020 •
edited

Changes ⛏️

This PR adds Emotion as a CSS-in-JS renderer. To use it:

import { createEmotionRenderer } from "@fluentui/react-northstar-emotion-renderer";
import { Provider, RendererContext } from "@fluentui/react-northstar";

function App(props) {
  const { children } = props;

  return (
    <RendererContext.Provider value={createEmotionRenderer}>
      <Provider>{children}</Provider>
    </RendererContext.Provider>
  );
}

To run it on docsite, insert this to devconsole and execute:

setFluentRenderer("emotion");

Why? ❔ ❔ ❔

Fela is one of the slowest CSS-in-JS engines nowadays, can be checked: https://necolas.github.io/react-native-web/benchmarks/

Numbers there match things that we can measure with our perf tests and the telemetry panel.

image

(in these tests there is no any plugins, so in the reality Fela is more slow).

So the answer is for perf.

Measures 🏎️

ChatWithPopover, 14% diff

Fela

Example min avg median max
ChatWithPopover.perf.tsx (1) 207.96 222.96 217.38 268.32
ChatWithPopover.perf.tsx (2) 205.22 218.11 214.44 275.58
ChatWithPopover.perf.tsx (3) 205.72 215.77 211.79 408.52

Emotion

Example min avg median max
ChatWithPopover.perf.tsx (1) 181.47 191.7 188.68 237.81
ChatWithPopover.perf.tsx (2) 181.87 189.48 187.81 244.49
ChatWithPopover.perf.tsx (3) 181.33 188.68 187.62 204.26

DropdownManyItems, 30% diff

Fela

Example min avg median max
DropdownManyItems.perf.tsx (1) 210.94 227.9 220.72 274.57
DropdownManyItems.perf.tsx (2) 210.03 224.25 219.25 276.58
DropdownManyItems.perf.tsx (3) 212.17 220.02 218.24 243.63

Emotion

Example min avg median max
DropdownManyItems.perf.tsx (1) 155.08 162.51 160.28 191.85
DropdownManyItems.perf.tsx (2) 154.51 162.42 159.81 216.14
DropdownManyItems.perf.tsx (3) 154 164.89 160.81 267.5

@msft-github-bot
Copy link
Contributor

msft-github-bot commented Jun 10, 2020 •
edited

Perf Analysis

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 971 960 5000
ButtonNext mount 550 562 5000
Checkbox mount 1787 1694 5000
CheckboxBase mount 1471 1414 5000
CheckboxNext mount 1829 1803 5000
ChoiceGroup mount 5429 5421 5000
ComboBox mount 987 980 1000
CommandBar mount 8001 8057 1000
ContextualMenu mount 15464 15851 1000
DefaultButton mount 1133 1190 5000
DetailsRow mount 3917 3909 5000
DetailsRowFast mount 3826 3929 5000
DetailsRowNoStyles mount 3624 3565 5000
Dialog mount 1606 1623 1000
DocumentCardTitle mount 1836 1839 1000
Dropdown mount 2722 2688 5000
FocusZone mount 1875 1861 5000
IconButton mount 1929 1879 5000
Label mount 379 391 5000
Link mount 514 534 5000
LinkNext mount 548 569 5000
MenuButton mount 1550 1610 5000
Nav mount 3433 3482 1000
Panel mount 1522 1549 1000
Persona mount 908 926 1000
Pivot mount 1512 1513 1000
PivotNext mount 1434 1477 1000
PrimaryButton mount 1350 1361 5000
SearchBox mount 1428 1407 5000
Slider mount 1618 1640 5000
SliderNext mount 2132 2161 5000
Spinner mount 455 465 5000
SplitButton mount 3350 3337 5000
Stack mount 559 545 5000
StackWithIntrinsicChildren mount 2101 2072 5000
StackWithTextChildren mount 5496 5457 5000
TagPicker mount 3091 3046 5000
Text mount 470 464 5000
TextField mount 1575 1547 5000
ThemeProvider mount 2989 2878 5000
ThemeProvider virtual-rerender 526 507 5000
Toggle mount 973 1010 5000
ToggleNext mount 995 981 5000
button mount 110 104 5000

Perf Analysis (Fluent)

Perf comparison
Status Scenario Fluent TPI Fabric TPI Ratio Iterations Ticks
🎯 Avatar.Fluent 0.5 0.51 0.98:1 2000 996
🦄 Button.Fluent 0.12 0.21 0.57:1 5000 612
🔧 Checkbox.Fluent 0.66 0.37 1.78:1 1000 659
🦄 Dialog.Fluent 0.15 0.23 0.65:1 5000 772
🔧 Dropdown.Fluent 3.47 0.48 7.23:1 1000 3467
🔧 Icon.Fluent 0.16 0.06 2.67:1 5000 804
🎯 Image.Fluent 0.09 0.12 0.75:1 5000 428
🔧 Slider.Fluent 1.65 0.38 4.34:1 1000 1647
🔧 Text.Fluent 0.08 0.02 4:1 5000 383
🦄 Tooltip.Fluent 0.1 19.94 0.01:1 5000 524

🔧 Needs work     🎯 On target     🦄 Amazing

Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AttachmentMinimalPerf.default 193 155 1.25:1
FormMinimalPerf.default 519 443 1.17:1
ButtonMinimalPerf.default 199 183 1.09:1
LabelMinimalPerf.default 472 442 1.07:1
SegmentMinimalPerf.default 397 371 1.07:1
Icon.Fluent 804 759 1.06:1
RefMinimalPerf.default 206 196 1.05:1
IconMinimalPerf.default 764 727 1.05:1
Tooltip.Fluent 524 499 1.05:1
HeaderMinimalPerf.default 397 380 1.04:1
ImageMinimalPerf.default 425 410 1.04:1
FlexMinimalPerf.default 312 303 1.03:1
InputMinimalPerf.default 1063 1036 1.03:1
ListNestedPerf.default 966 937 1.03:1
ProviderMinimalPerf.default 920 890 1.03:1
RadioGroupMinimalPerf.default 454 441 1.03:1
ReactionMinimalPerf.default 416 404 1.03:1
SplitButtonMinimalPerf.default 3969 3870 1.03:1
Avatar.Fluent 996 966 1.03:1
CardMinimalPerf.default 600 590 1.02:1
ListWith60ListItems.default 1138 1112 1.02:1
MenuMinimalPerf.default 911 889 1.02:1
SliderMinimalPerf.default 1656 1629 1.02:1
TableManyItemsPerf.default 2423 2387 1.02:1
TableMinimalPerf.default 429 421 1.02:1
TextAreaMinimalPerf.default 515 505 1.02:1
TooltipMinimalPerf.default 807 789 1.02:1
VideoMinimalPerf.default 673 659 1.02:1
Button.Fluent 612 600 1.02:1
BoxMinimalPerf.default 358 355 1.01:1
DropdownMinimalPerf.default 3427 3381 1.01:1
ToolbarMinimalPerf.default 1003 997 1.01:1
Checkbox.Fluent 659 653 1.01:1
Dropdown.Fluent 3467 3442 1.01:1
Image.Fluent 428 424 1.01:1
AvatarMinimalPerf.default 528 526 1:1
ChatDuplicateMessagesPerf.default 449 447 1:1
EmbedMinimalPerf.default 1999 1991 1:1
GridMinimalPerf.default 775 776 1:1
ListCommonPerf.default 1025 1023 1:1
ListMinimalPerf.default 510 509 1:1
LoaderMinimalPerf.default 763 762 1:1
MenuButtonMinimalPerf.default 1578 1583 1:1
PopupMinimalPerf.default 663 664 1:1
StatusMinimalPerf.default 745 742 1:1
TextMinimalPerf.default 389 389 1:1
CustomToolbarPrototype.default 4111 4131 1:1
Dialog.Fluent 772 770 1:1
Slider.Fluent 1647 1646 1:1
Text.Fluent 383 383 1:1
AlertMinimalPerf.default 321 323 0.99:1
AttachmentSlotsPerf.default 1218 1225 0.99:1
ButtonSlotsPerf.default 627 631 0.99:1
CarouselMinimalPerf.default 480 487 0.99:1
DialogMinimalPerf.default 779 784 0.99:1
DropdownManyItemsPerf.default 1409 1418 0.99:1
HierarchicalTreeMinimalPerf.default 460 465 0.99:1
TreeMinimalPerf.default 918 926 0.99:1
AnimationMinimalPerf.default 392 401 0.98:1
CheckboxMinimalPerf.default 2897 2963 0.98:1
ItemLayoutMinimalPerf.default 1433 1458 0.98:1
LayoutMinimalPerf.default 426 433 0.98:1
PortalMinimalPerf.default 121 123 0.98:1
DividerMinimalPerf.default 371 384 0.97:1
TreeWith60ListItems.default 216 223 0.97:1
AccordionMinimalPerf.default 143 150 0.95:1
ChatMinimalPerf.default 654 686 0.95:1
ProviderMergeThemesPerf.default 2099 2209 0.95:1
ChatWithPopoverPerf.default 501 539 0.93:1
HeaderSlotsPerf.default 837 900 0.93:1

@size-auditor
Copy link

size-auditor bot commented Jun 10, 2020 •
edited

Asset size changes

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

Baseline commit: 83a3742a0edc6d473cafb768e47722e97f9bf8a7 (build)

@ecraig12345 ecraig12345 added the Fluent UI react-northstar (v0) Work related to Fluent UI V0 label Jun 11, 2020
@layershifter layershifter changed the title chore: replace Fela with emotion chore: replace Fela with Emotion Jun 16, 2020
@layershifter layershifter changed the base branch from master to chore/move-out-fela June 16, 2020 07:49
@layershifter layershifter force-pushed the chore/emotion-tryout branch 3 times, most recently from e7573df to 35546b8 Compare June 16, 2020 08:14
Base automatically changed from chore/move-out-fela to master June 16, 2020 10:50
@layershifter layershifter changed the base branch from master to 6.0 June 16, 2020 11:01
@layershifter layershifter changed the base branch from 6.0 to master June 16, 2020 11:01
@layershifter layershifter force-pushed the chore/emotion-tryout branch 3 times, most recently from b99235d to 618d20d Compare June 16, 2020 13:05
@layershifter layershifter changed the title chore: replace Fela with Emotion feat: add Emotion renderer for v0 Jun 16, 2020
@layershifter layershifter force-pushed the chore/emotion-tryout branch 3 times, most recently from 8a05bf0 to a86a957 Compare June 16, 2020 16:13
@layershifter layershifter mentioned this pull request Jun 17, 2020
Closed
2 tasks
@layershifter
Merge branches 'chore/emotion-tryout' and 'master' of https://github.…
a16e777 
…com/microsoft/fluentui into chore/emotion-tryout

� Conflicts:
�	packages/fluentui/CHANGELOG.md
@codesandbox-ci
Copy link

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 e4b7f61:

Sandbox Source
Fluent UI Button Configuration

@codesandbox-ci
Copy link

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 483fe7f:

Sandbox Source
Fluent UI Button Configuration

@layershifter layershifter merged commit 9403dce into master Jun 18, 2020
@layershifter layershifter deleted the chore/emotion-tryout branch June 18, 2020 15:34
@layershifter layershifter mentioned this pull request Aug 24, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@miroslavstastny miroslavstastny miroslavstastny approved these changes

@dvdzkwsk dvdzkwsk Awaiting requested review from dvdzkwsk

@dzearing dzearing Awaiting requested review from dzearing

@jurokapsiar jurokapsiar Awaiting requested review from jurokapsiar

@levithomason levithomason Awaiting requested review from levithomason

@mnajdova mnajdova Awaiting requested review from mnajdova

@pompomon pompomon Awaiting requested review from pompomon

@ecraig12345 ecraig12345 Awaiting requested review from ecraig12345

Assignees

@jdhuntington jdhuntington

Labels
Fluent UI react-northstar (v0) Work related to Fluent UI V0
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

None yet
5 participants
@layershifter @msft-github-bot @miroslavstastny @jdhuntington @ecraig12345