Skip to content

feat(scripts-executors): implement new yarn start experience#32108

Merged
Hotell merged 12 commits intomicrosoft:masterfrom
Hotell:nx/improve-start-cmd-dx
Aug 8, 2024
Merged

feat(scripts-executors): implement new yarn start experience#32108
Hotell merged 12 commits intomicrosoft:masterfrom
Hotell:nx/improve-start-cmd-dx

Conversation

@Hotell
Copy link
Collaborator

@Hotell Hotell commented Jul 25, 2024 •
edited
Loading

Previous Behavior

yarn start provides primitive alias with not enough context to run a yarn workspace start npm script

New Behavior

As we migrated to Nx, our yarn start experience provides significantly improved DX, taking inspiration from official NX IDE plugin - Nx Console

Besides providing every project target within the CLI we add artificial help target which leverages nx show project capabilities in order to provide comprehensive overview about the project.

Demo

new-start-experience-with-nx-v2.mov

Related Issue(s)

@github-actions github-actions bot added this to the July Project Cycle Q3 2024 milestone Jul 25, 2024
@Hotell Hotell mentioned this pull request Jul 25, 2024
Closed
39 tasks
@fabricteam
Copy link
Collaborator

fabricteam commented Jul 25, 2024 •
edited
Loading

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 582 630 5000
Button mount 305 298 5000
Field mount 1132 1153 5000
FluentProvider mount 732 745 5000
FluentProviderWithTheme mount 81 92 10
FluentProviderWithTheme virtual-rerender 38 37 10
FluentProviderWithTheme virtual-rerender-with-unmount 82 81 10
MakeStyles mount 886 868 50000
Persona mount 1750 1712 5000
SpinButton mount 1457 1410 5000
SwatchPicker mount 1655 1678 5000

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 25, 2024 •
edited
Loading

📊 Bundle size report

✅ No changes found

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 25, 2024 •
edited
Loading

Perf Analysis (@fluentui/react-northstar)

⚠️ 1 potential perf regressions detected

Potential regressions comparing to master

Scenario Current PR Ticks Baseline Ticks Ratio Regression Analysis
PortalMinimalPerf.default 86 83 1.04:1 analysis
Perf tests with no regressions
Scenario Current PR Ticks Baseline Ticks Ratio
AccordionMinimalPerf.default 91 82 1.11:1
GridMinimalPerf.default 210 191 1.1:1
ImageMinimalPerf.default 243 223 1.09:1
ButtonMinimalPerf.default 95 89 1.07:1
ChatMinimalPerf.default 478 452 1.06:1
LoaderMinimalPerf.default 200 188 1.06:1
ChatDuplicateMessagesPerf.default 161 153 1.05:1
HeaderSlotsPerf.default 489 465 1.05:1
ListMinimalPerf.default 325 309 1.05:1
ListNestedPerf.default 349 331 1.05:1
MenuMinimalPerf.default 523 499 1.05:1
ReactionMinimalPerf.default 222 211 1.05:1
TreeMinimalPerf.default 502 477 1.05:1
TreeWith60ListItems.default 87 83 1.05:1
AttachmentSlotsPerf.default 672 646 1.04:1
AvatarMinimalPerf.default 111 107 1.04:1
RefMinimalPerf.default 115 111 1.04:1
ButtonSlotsPerf.default 324 315 1.03:1
DropdownMinimalPerf.default 1472 1435 1.03:1
EmbedMinimalPerf.default 1938 1883 1.03:1
PopupMinimalPerf.default 365 356 1.03:1
SegmentMinimalPerf.default 199 194 1.03:1
TableManyItemsPerf.default 1147 1109 1.03:1
ToolbarMinimalPerf.default 559 545 1.03:1
ItemLayoutMinimalPerf.default 740 729 1.02:1
LabelMinimalPerf.default 228 223 1.02:1
SkeletonMinimalPerf.default 207 203 1.02:1
SliderMinimalPerf.default 769 752 1.02:1
IconMinimalPerf.default 398 390 1.02:1
BoxMinimalPerf.default 195 193 1.01:1
CarouselMinimalPerf.default 266 264 1.01:1
CheckboxMinimalPerf.default 1170 1154 1.01:1
DialogMinimalPerf.default 461 458 1.01:1
DropdownManyItemsPerf.default 418 415 1.01:1
FormMinimalPerf.default 234 232 1.01:1
InputMinimalPerf.default 569 561 1.01:1
ProviderMergeThemesPerf.default 656 647 1.01:1
TooltipMinimalPerf.default 1289 1280 1.01:1
ButtonOverridesMissPerf.default 676 679 1:1
CardMinimalPerf.default 313 314 1:1
DatepickerMinimalPerf.default 4066 4053 1:1
HeaderMinimalPerf.default 213 213 1:1
LayoutMinimalPerf.default 195 195 1:1
CustomToolbarPrototype.default 1533 1540 1:1
AnimationMinimalPerf.default 305 309 0.99:1
AttachmentMinimalPerf.default 84 85 0.99:1
ChatWithPopoverPerf.default 215 218 0.99:1
DividerMinimalPerf.default 208 211 0.99:1
MenuButtonMinimalPerf.default 962 976 0.99:1
SplitButtonMinimalPerf.default 2349 2361 0.99:1
TextAreaMinimalPerf.default 287 289 0.99:1
ListWith60ListItems.default 367 374 0.98:1
StatusMinimalPerf.default 397 404 0.98:1
TableMinimalPerf.default 239 243 0.98:1
FlexMinimalPerf.default 161 166 0.97:1
RosterPerf.default 1524 1578 0.97:1
ProviderMinimalPerf.default 196 203 0.97:1
AlertMinimalPerf.default 157 163 0.96:1
ListCommonPerf.default 379 396 0.96:1
RadioGroupMinimalPerf.default 258 268 0.96:1
VideoMinimalPerf.default 423 444 0.95:1
TextMinimalPerf.default 187 198 0.94:1

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 25, 2024 •
edited
Loading

🕵 FluentUIV0 No visual regressions between this PR and main

@fabricteam
Copy link
Collaborator

fabricteam commented Jul 25, 2024 •
edited
Loading

Perf Analysis (@fluentui/react)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
BaseButton mount 625 634 5000
Breadcrumb mount 1689 1714 1000
Checkbox mount 1706 1714 5000
CheckboxBase mount 1509 1516 5000
ChoiceGroup mount 2971 2946 5000
ComboBox mount 682 687 1000
CommandBar mount 6682 6570 1000
ContextualMenu mount 13429 13605 1000
DefaultButton mount 786 798 5000
DetailsRow mount 2282 2261 5000
DetailsRowFast mount 2257 2247 5000
DetailsRowNoStyles mount 2082 2019 5000
Dialog mount 2876 2886 1000
DocumentCardTitle mount 230 231 1000
Dropdown mount 1976 2017 5000
FocusTrapZone mount 1179 1179 5000
FocusZone mount 1128 1098 5000
GroupedList mount 42411 42420 2
GroupedList virtual-rerender 20245 20235 2
GroupedList virtual-rerender-with-unmount 51846 52279 2
GroupedListV2 mount 243 238 2
GroupedListV2 virtual-rerender 217 220 2
GroupedListV2 virtual-rerender-with-unmount 235 254 2
IconButton mount 1145 1135 5000
Label mount 343 340 5000
Layer mount 2751 2803 5000
Link mount 437 405 5000
MenuButton mount 983 991 5000
MessageBar mount 21306 21335 5000
Nav mount 1990 2043 1000
OverflowSet mount 796 783 5000
Panel mount 1893 1855 1000
Persona mount 754 777 1000
Pivot mount 898 921 1000
PrimaryButton mount 921 933 5000
Rating mount 4720 4747 5000
SearchBox mount 912 920 5000
Shimmer mount 1889 1924 5000
Slider mount 1386 1359 5000
SpinButton mount 2934 3033 5000
Spinner mount 394 398 5000
SplitButton mount 1902 1946 5000
Stack mount 424 434 5000
StackWithIntrinsicChildren mount 865 868 5000
StackWithTextChildren mount 2814 2754 5000
SwatchColorPicker mount 6417 6428 5000
TagPicker mount 1442 1451 5000
Text mount 387 389 5000
TextField mount 965 952 5000
ThemeProvider mount 876 898 5000
ThemeProvider virtual-rerender 592 586 5000
ThemeProvider virtual-rerender-with-unmount 1336 1298 5000
Toggle mount 623 634 5000
buttonNative mount 194 183 5000

@Hotell Hotell changed the title Nx/improve start cmd dx feat(scripts-executors): implement new yarn start experience Jul 30, 2024
@Hotell Hotell force-pushed the nx/improve-start-cmd-dx branch from a7937d2 to b8f649a Compare August 1, 2024 08:41
@Hotell Hotell mentioned this pull request Aug 1, 2024
Open
5 tasks
Hotell
Hotell commented Aug 1, 2024
View reviewed changes
Hotell
Hotell commented Aug 1, 2024
View reviewed changes
Hotell
Hotell commented Aug 1, 2024
View reviewed changes
fabricteam
fabricteam reviewed Aug 1, 2024
View reviewed changes
@Hotell Hotell marked this pull request as ready for review August 1, 2024 17:11
@Hotell Hotell requested a review from a team as a code owner August 1, 2024 17:11
layershifter
layershifter reviewed Aug 5, 2024
View reviewed changes
Copy link
Member

@layershifter layershifter left a comment •
edited
Loading

Choose a reason for hiding this comment

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

  1. It does not look so nicely on a smaller screen/side panel (i.e. does not fit properly):
image
  1. Now it's more keypresses to start storybook 👎
    Before: yarn start + dia + Enter
    After: yarn start + dia + Enter + sta + Enter

@Hotell
Copy link
Collaborator Author

Hotell commented Aug 5, 2024 •
edited
Loading

  1. It does not look so nicely on a smaller screen/side panel (i.e. does not fit properly):
image 2. Now it's more keypresses to start storybook 👎 **Before**: `yarn start` + `dia` + Enter **After**: `yarn start` + `dia` + Enter + `sta` + Enter

thanks for feedback,

  • as described this is a tiny mirror of Nx console within CLI based on "compliants" of core team and others about what does what.

The main goal of this tool is to educate users to run nx commands directly (or via nx console) instead of using this.

in general start is a confusing verb to use in monorepo package context as it cannot be interpeted accurately. ( what does start mean in web project, what does start mean in nodejs project , what does start mean in application context , what does start mean in e2e application context, and the list goes on )

Regarding the small viewports, that's the tax of getting all the information in CLI :) not sure about responsive UI within terminal but happy to improve what can be improved in future based on priority.

ty

@layershifter
Copy link
Member

layershifter commented Aug 5, 2024 •
edited
Loading

  1. It does not look so nicely on a smaller screen/side panel (i.e. does not fit properly):
image 2. Now it's more keypresses to start storybook 👎 **Before**: `yarn start` + `dia` + Enter **After**: `yarn start` + `dia` + Enter + `sta` + Enter

thanks for feedback,

  • as described this is a tiny mirror of Nx console within CLI based on "compliants" of core team and others about what does what.

The main goal of this tool is to educate users to run nx commands directly (or via nx console) instead of using this.

in general start is a confusing verb to use in monorepo package context as it cannot be interpeted accurately. ( what does start mean in web project, what does start mean in nodejs project , what does start mean in application context , what does start mean in e2e application context, and the list goes on )

Regarding the small viewports, that's the tax of getting all the information in CLI :) not sure about responsive UI within terminal but happy to improve what can be improved in future based on priority.

ty

  • Can we introduce this experience as a separate command? yarn fast, yarn cli, etc.?
  • Or, preselect start if the script is present? (this will keep existing keyboarding experience)

@Hotell
Copy link
Collaborator Author

Hotell commented Aug 6, 2024

Can we introduce this experience as a separate command? yarn fast, yarn cli, etc.?

we don't wanna maintain 2 versions of "start", as a follow up we can probably introduce some escape hatch but as i mentioned "START" might mean various things and is confusing in terms of keeping consistency package per package.

Or, preselect start if the script is present? (this will keep existing keyboarding experience)

that would "remove" all the new behaviours.

So far we received good feedback on this new experience. We will iterate on this as we plan to ship this to all fluent repos.

I appreciate your feedback and understand your concerns. It would be very helpful if you could provide some constructive suggestions on how we might improve this, rather than just reverting the changes. So far, you are the only one who has raised a complaint, and we value your input to make things better.

@layershifter
Copy link
Member

layershifter commented Aug 6, 2024

that would "remove" all the new behaviours.

Why? All scripts will be still there, I propose just to make "start" selected by default:

image

@Hotell Hotell mentioned this pull request Aug 6, 2024
Merged
@Hotell
Copy link
Collaborator Author

Hotell commented Aug 6, 2024 •
edited
Loading

that would "remove" all the new behaviours.

Why? All scripts will be still there, I propose just to make "start" selected by default:

cc @layershifter
#32235

@layershifter
Copy link
Member

layershifter commented Aug 6, 2024

that would "remove" all the new behaviours.

Why? All scripts will be still there, I propose just to make "start" selected by default:

cc @layershifter #32235

@Hotell Love it, thanks!

@Hotell Hotell force-pushed the nx/improve-start-cmd-dx branch from c0a495a to b9bf496 Compare August 7, 2024 13:33
fabricteam
fabricteam reviewed Aug 7, 2024
View reviewed changes
Hotell added 12 commits August 7, 2024 18:31
@Hotell Hotell force-pushed the nx/improve-start-cmd-dx branch from b9bf496 to ebd2058 Compare August 7, 2024 16:32
@fabricteam
Copy link
Collaborator

fabricteam commented Aug 7, 2024

🕵 fluentui-web-components-v3 No visual regressions between this PR and main

@Hotell Hotell merged commit 049087a into microsoft:master Aug 8, 2024
@Hotell Hotell deleted the nx/improve-start-cmd-dx branch August 8, 2024 08:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@fabricteam fabricteam fabricteam left review comments

@layershifter layershifter layershifter left review comments

@mainframev mainframev mainframev approved these changes

Assignees

No one assigned

Labels

Area: DevExp NX: core

Projects

None yet

Milestone

August Project Cycle Q3 2024

Development

Successfully merging this pull request may close these issues.

4 participants

@Hotell @fabricteam @layershifter @mainframev