Webpack Roadmap

What

We got webpack in and that is great. But we can't take full advantage until we remove global code.

After a chat with @jschatz1, we decided to make a roadmap to allow for things to get scheduled. This issue is done in collaboration by @filipa @mikegreiling and @iamphill.

For this to happen we need to divide and conquer. This is not an hard task to do, just a boring one.

We also need to teach. We all use it, but webpack can be hard to understand and there is no shame in that :) We can't force everyone to read full documentation, we could do a small talk explaining the need of webpack and how to use it.

How

1. main.js - Divide and conquer!

2. Shortcuts

   • shortcuts
   • ./shortcuts_blob
   • ./shortcuts_dashboard_navigation
   • ./shortcuts_navigation
   • ./shortcuts_find_file
   • ./shortcuts_issuable
   • ./shortcuts_network

3. Templates

   • ./templates/issuable_template_selector
   • ./templates/issuable_template_selectors

4. Commit

   • ./commit/file
   • ./commit/image_file

5. Utils

   • ./lib/utils/bootstrap_linked_tabs @filipa !14734 (merged)
   • ./lib/utils/datetime_utility
   • ./lib/utils/pretty_time
   • ./lib/utils/text_utility
   • ./lib/utils/url_utility

6. Everything else

   • ./abuse_reports;
   • ./activities;
   • ./admin;
   • ./ajax_loading_spinner; @filipa !14738
   • ./api;
   • ./aside;
   • ./autosave;
   • ./broadcast_message;
   • ./build; @filipa
   • ./build_artifacts; @filipa
   • ./build_variables; @filipa
   • ./ci_lint_editor; @filipa
   • ./commit;
   • ./commits; @filipa !14735
   • ./compare;
   • ./compare_autocomplete;
   • ./confirm_danger_modal;
   • ./copy_as_gfm;
   • ./copy_to_clipboard;
   • ./create_label; @filipa !14738
   • ./diff;
   • ./dropzone_input;
   • ./due_date_select;
   • ./files_comment_button;
   • ./flash;
   • ./gl_dropdown;
   • ./gl_field_error;
   • ./gl_field_errors;
   • ./gl_form;
   • ./group_avatar;
   • ./group_label_subscription;
   • ./groups_select;
   • ./header;
   • ./importer_status;
   • ./issuable_index;
   • ./issuable_context;
   • ./issuable_form;
   • ./issue;
   • ./issue_status_select;
   • ./label_manager;
   • ./labels;
   • ./labels_select;
   • ./layout_nav;
   • ./line_highlighter;
   • ./logo;
   • ./member_expiration_date;
   • ./members;
   • ./merge_request;
   • ./merge_request_tabs;
   • ./milestone;
   • ./milestone_select;
   • ./mini_pipeline_graph_dropdown; @filipa !14734 (merged)
   • ./namespace_select;
   • ./new_branch_form;
   • ./new_commit_form;
   • ./notes;
   • ./notifications_dropdown;
   • ./notifications_form;
   • ./pager;
   • ./pipelines; @filipa !14734 (merged)
   • ./preview_markdown;
   • ./project;
   • ./project_avatar;
   • ./project_find_file;
   • ./project_import;
   • ./project_label_subscription;
   • ./project_new;
   • ./project_select;
   • ./project_show;
   • ./project_variables;
   • ./projects_dropdown;
   • ./projects_list;
   • ./syntax_highlight;
   • ./render_math;
   • ./render_gfm;
   • ./right_sidebar;
   • ./search;
   • ./search_autocomplete;
   • ./smart_interval;
   • ./star;
   • ./subscription;
   • ./subscription_select;

7. Export gl utility functions as modules - https://gitlab.com/gitlab-org/gitlab-ce/issues/37220

8. Spies in gl functions - https://gitlab.com/gitlab-org/gitlab-ce/issues/30998

9. Dispacther - https://gitlab.com/gitlab-org/gitlab-ce/issues/37792

10. Docs! Let's document everything so everyone can use it! - https://gitlab.com/gitlab-org/gitlab-ce/issues/38173

11. Memory - https://gitlab.com/gitlab-org/gitlab-ce/issues/32893

12. Logs - https://gitlab.com/gitlab-org/gitlab-ce/issues/34348

13. Speed up webpack dev server - https://gitlab.com/gitlab-org/gitlab-ce/issues/35305