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

[Issue] Load color picker dependencies only when it is actually used #28477

Open
4 tasks
ghost opened this issue Jun 2, 2020 · 1 comment · May be fixed by #34142
Open
4 tasks

[Issue] Load color picker dependencies only when it is actually used #28477

ghost opened this issue Jun 2, 2020 · 1 comment · May be fixed by #34142
Assignees
Labels
Component: Ui Issue: Confirmed Gate 3 Passed. Manual verification of the issue completed. Issue is confirmed Issue: Format is valid Gate 1 Passed. Automatic verification of issue format passed Issue: Ready for Work Gate 4. Acknowledged. Issue is added to backlog and ready for development Priority: P2 A defect with this priority could have functionality issues which are not to expectations. Progress: PR in progress Reproduced on 2.4.x The issue has been reproduced on latest 2.4-develop branch Severity: S3 Affects non-critical data or functionality and does not force users to employ a workaround. Triage: Dev.Experience Issue related to Developer Experience and needs help with Triage to Confirm or Reject it

Comments

@ghost
Copy link

ghost commented Jun 2, 2020

This issue is automatically created based on existing pull request: #28400: Load color picker dependencies only when it is actually used


Preconditions (*)

This is just another performance PR, which focuses on loading only the needed dependencies. This time I am optimizing color picker component and its spectrum and tinycolor dependencies.

Loading mentioned modules dynamically saves us 2 JavaScript requests and 123,6kB (28,3kB gzipped) from downloading and parsing.

This change is covered by unit tests that had to be adjusted to take asynchronous dependencies loading into account.

Steps to reproduce (*)

  1. Verify that spectrum.js and tinycolor.js are no longer loaded by default.
  2. Verify that above modules are loaded and color picker works as expected when used (see comment above to find out how to add it).

Actual Result: ✖️ spectrum.js and tinycolor.js are loaded by default

2020-09-02_12-33

Expected Result: ✔️ spectrum.js and tinycolor.js should no loaded by default.

Questions or comments

While making sure this change doesn't break anything I found out that colorPicker binding is not used anywhere in Magento. The easiest way to get it is to for example add it to app/code/Magento/Catalog/view/adminhtml/ui_component/category_form.xml:

<field name="color_picker_test">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="component" xsi:type="string">Magento_Ui/js/form/element/color-picker</item>
            <item name="template" xsi:type="string">ui/form/field</item>
            <item name="elementTmpl" xsi:type="string">ui/form/element/color-picker</item>
            <item name="label" xsi:type="string">Background Color (hex)</item>
            <item name="labelVisible" xsi:type="boolean">true</item>
            <item name="visible" xsi:type="boolean">true</item>
            <item name="dataType" xsi:type="string">text</item>
            <item name="formElement" xsi:type="string">input</item>
            <item name="source" xsi:type="string">category_form</item>
        </item>
    </argument>
</field>

and test it in category edit form.

Contribution checklist (*)

  • Pull request has a meaningful description of its purpose
  • All commits are accompanied by meaningful commit messages
  • All new or changed code is covered with unit/integration tests (if applicable)
  • All automated tests passed successfully (all builds are green)
@ghost ghost added the Component: Ui label Jun 2, 2020
@ghost ghost assigned krzksz Jun 2, 2020
@magento-engcom-team magento-engcom-team added the Issue: Format is not valid Gate 1 Failed. Automatic verification of issue format is failed label Jun 2, 2020
@ghost ghost added Priority: P2 A defect with this priority could have functionality issues which are not to expectations. Severity: S3 Affects non-critical data or functionality and does not force users to employ a workaround. labels Aug 18, 2020
@magento-engcom-team magento-engcom-team added Issue: Format is valid Gate 1 Passed. Automatic verification of issue format passed and removed Issue: Format is not valid Gate 1 Failed. Automatic verification of issue format is failed labels Sep 2, 2020
@engcom-Alfa engcom-Alfa added Reproduced on 2.4.x The issue has been reproduced on latest 2.4-develop branch Issue: Confirmed Gate 3 Passed. Manual verification of the issue completed. Issue is confirmed labels Sep 2, 2020
@magento-engcom-team magento-engcom-team added the Issue: Ready for Work Gate 4. Acknowledged. Issue is added to backlog and ready for development label Sep 2, 2020
@magento-engcom-team
Copy link
Contributor

✅ Confirmed by @engcom-Alfa
Thank you for verifying the issue. Based on the provided information internal tickets MC-37314 were created

Issue Available: @engcom-Alfa, You will be automatically unassigned. Contributors/Maintainers can claim this issue to continue. To reclaim and continue work, reassign the ticket to yourself.

@m2-community-project m2-community-project bot added Progress: PR Created Indicates that Pull Request has been created to fix issue and removed Progress: ready for dev labels Sep 24, 2020
@ghost ghost added Progress: PR in progress and removed Progress: PR Created Indicates that Pull Request has been created to fix issue labels Oct 20, 2020
@mrtuvn mrtuvn linked a pull request Sep 22, 2021 that will close this issue
5 tasks
@sdzhepa sdzhepa mentioned this issue Apr 7, 2022
5 tasks
@engcom-Delta engcom-Delta added the Triage: Dev.Experience Issue related to Developer Experience and needs help with Triage to Confirm or Reject it label Aug 5, 2024
@engcom-Hotel engcom-Hotel moved this to Pull Request In Progress in High Priority Backlog Aug 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Component: Ui Issue: Confirmed Gate 3 Passed. Manual verification of the issue completed. Issue is confirmed Issue: Format is valid Gate 1 Passed. Automatic verification of issue format passed Issue: Ready for Work Gate 4. Acknowledged. Issue is added to backlog and ready for development Priority: P2 A defect with this priority could have functionality issues which are not to expectations. Progress: PR in progress Reproduced on 2.4.x The issue has been reproduced on latest 2.4-develop branch Severity: S3 Affects non-critical data or functionality and does not force users to employ a workaround. Triage: Dev.Experience Issue related to Developer Experience and needs help with Triage to Confirm or Reject it
Projects
Status: Pull Request In Progress
7 participants