From fb20f3244689a4d1d72e4eaa1afc544257ac6429 Mon Sep 17 00:00:00 2001 From: Simon Knox Date: Tue, 30 Apr 2019 22:25:36 +1000 Subject: Clean up new_fe_guide modules and perf More Performance to section in fe_guide Move modules docs to docstring Add props notes to Vue --- .../javascripts/dirty_submit/dirty_submit_form.js | 7 +++++++ doc/development/fe_guide/performance.md | 16 +++++++++++++++ doc/development/fe_guide/vue.md | 5 +++++ .../new_fe_guide/development/performance.md | 16 --------------- doc/development/new_fe_guide/index.md | 4 ---- .../new_fe_guide/modules/dirty_submit.md | 23 ---------------------- doc/development/new_fe_guide/modules/index.md | 5 ----- 7 files changed, 28 insertions(+), 48 deletions(-) delete mode 100644 doc/development/new_fe_guide/development/performance.md delete mode 100644 doc/development/new_fe_guide/modules/dirty_submit.md delete mode 100644 doc/development/new_fe_guide/modules/index.md diff --git a/app/assets/javascripts/dirty_submit/dirty_submit_form.js b/app/assets/javascripts/dirty_submit/dirty_submit_form.js index 765969daa32..ecc8e0fe562 100644 --- a/app/assets/javascripts/dirty_submit/dirty_submit_form.js +++ b/app/assets/javascripts/dirty_submit/dirty_submit_form.js @@ -1,6 +1,13 @@ import _ from 'underscore'; import $ from 'jquery'; +/** + * Prevent submitting forms with no changes. + * Currently handles `input`, `textarea` and `select` elements. + * + * @param {form} a NodeList (e.g. document.querySelector('form')) + */ + class DirtySubmitForm { constructor(form) { this.form = form; diff --git a/doc/development/fe_guide/performance.md b/doc/development/fe_guide/performance.md index 2628e95dbc1..74ab95907be 100644 --- a/doc/development/fe_guide/performance.md +++ b/doc/development/fe_guide/performance.md @@ -161,6 +161,22 @@ General tips: - Use code-splitting dynamic imports wherever possible to lazy-load code that is not needed initially. - [High Performance Animations][high-perf-animations] + +## Monitoring + +We have a performance dashboard available in one of our [grafana instances](https://dashboards.gitlab.net/d/1EBTz3Dmz/sitespeed-page-summary?orgId=1). This dashboard automatically aggregates metric data from [sitespeed.io](https://sitespeed.io) every 6 hours. These changes are displayed after a set number of pages are aggregated. + +These pages can be found inside a text file in the gitlab-build-images [repository](https://gitlab.com/gitlab-org/gitlab-build-images) called [gitlab.txt](https://gitlab.com/gitlab-org/gitlab-build-images/blob/master/scripts/gitlab.txt) +Any frontend engineer can contribute to this dashboard. They can contribute by adding or removing urls of pages from this text file. Please have a [frontend monitoring expert](https://about.gitlab.com/team) review your changes before assigning to a maintainer of the `gitlab-build-images` project. The changes will go live on the next scheduled run after the changes are merged into `master`. + +There are 3 recommended high impact metrics to review on each page: + +- [First visual change](https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint) +- [Speed Index](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index) +- [Visual Complete 95%](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index) + +For these metrics, lower numbers are better as it means that the website is more performant. + ------- ## Additional Resources diff --git a/doc/development/fe_guide/vue.md b/doc/development/fe_guide/vue.md index 437ce9abc7d..8694d74bb6c 100644 --- a/doc/development/fe_guide/vue.md +++ b/doc/development/fe_guide/vue.md @@ -100,6 +100,11 @@ document.addEventListener('DOMContentLoaded', () => new Vue({ })); ``` +Props guidelines for boolean props +optional props +if required is false, include a default + + ### A folder for Components This folder holds all components that are specific of this new feature. diff --git a/doc/development/new_fe_guide/development/performance.md b/doc/development/new_fe_guide/development/performance.md deleted file mode 100644 index 640a8d64176..00000000000 --- a/doc/development/new_fe_guide/development/performance.md +++ /dev/null @@ -1,16 +0,0 @@ -# Performance - -## Monitoring - -We have a performance dashboard available in one of our [grafana instances](https://dashboards.gitlab.net/d/1EBTz3Dmz/sitespeed-page-summary?orgId=1). This dashboard automatically aggregates metric data from [sitespeed.io](https://sitespeed.io) every 6 hours. These changes are displayed after a set number of pages are aggregated. - -These pages can be found inside a text file in the gitlab-build-images [repository](https://gitlab.com/gitlab-org/gitlab-build-images) called [gitlab.txt](https://gitlab.com/gitlab-org/gitlab-build-images/blob/master/scripts/gitlab.txt) -Any frontend engineer can contribute to this dashboard. They can contribute by adding or removing urls of pages from this text file. Please have a [frontend monitoring expert](https://about.gitlab.com/team) review your changes before assigning to a maintainer of the `gitlab-build-images` project. The changes will go live on the next scheduled run after the changes are merged into `master`. - -There are 3 recommended high impact metrics to review on each page: - -- [First visual change](https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint) -- [Speed Index](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index) -- [Visual Complete 95%](https://sites.google.com/a/webpagetest.org/docs/using-webpagetest/metrics/speed-index) - -For these metrics, lower numbers are better as it means that the website is more performant. diff --git a/doc/development/new_fe_guide/index.md b/doc/development/new_fe_guide/index.md index 0e8f5486861..e15c97c0c44 100644 --- a/doc/development/new_fe_guide/index.md +++ b/doc/development/new_fe_guide/index.md @@ -11,10 +11,6 @@ Guidance on topics related to development. Learn about all the dependencies that make up our frontend, including some of our own custom built libraries. -## [Modules](modules/index.md) - -Learn about all the internal JavaScript modules that make up our frontend. - ## [Style guides](style/index.md) Style guides to keep our code consistent. diff --git a/doc/development/new_fe_guide/modules/dirty_submit.md b/doc/development/new_fe_guide/modules/dirty_submit.md deleted file mode 100644 index 6c03958b463..00000000000 --- a/doc/development/new_fe_guide/modules/dirty_submit.md +++ /dev/null @@ -1,23 +0,0 @@ -# Dirty Submit - -> [Introduced][ce-21115] in GitLab 11.3. -> [dirty_submit][dirty-submit] - -## Summary - -Prevent submitting forms with no changes. - -Currently handles `input`, `textarea` and `select` elements. - -## Usage - -```js -import dirtySubmitFactory from './dirty_submit/dirty_submit_form'; - -new DirtySubmitForm(document.querySelector('form')); -// or -new DirtySubmitForm(document.querySelectorAll('form')); -``` - -[ce-21115]: https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/21115 -[dirty-submit]: https://gitlab.com/gitlab-org/gitlab-ce/blob/master/app/assets/javascripts/dirty_submit/ \ No newline at end of file diff --git a/doc/development/new_fe_guide/modules/index.md b/doc/development/new_fe_guide/modules/index.md deleted file mode 100644 index a7820442df0..00000000000 --- a/doc/development/new_fe_guide/modules/index.md +++ /dev/null @@ -1,5 +0,0 @@ -# Modules - -- [DirtySubmit](dirty_submit.md) - - Disable form submits until there are unsaved changes. -- cgit v1.2.3