Add Overview section detailing our frontend stack. [ci skip]
This commit is contained in:
parent
d4e2c4eff5
commit
7730ec2d1c
1 changed files with 42 additions and 3 deletions
|
@ -3,8 +3,28 @@
|
||||||
This document describes various guidelines to ensure consistency and quality
|
This document describes various guidelines to ensure consistency and quality
|
||||||
across GitLab's frontend.
|
across GitLab's frontend.
|
||||||
|
|
||||||
|
## Overview
|
||||||
|
|
||||||
|
GitLab is built on top of [Ruby on Rails][rails] using [Haml][haml] (with
|
||||||
|
[Hamlit][hamlit] for performance reasons, be wary of [the limitations this comes
|
||||||
|
with][hamlit-limits]), [SCSS][scss], and plain JavaScript with
|
||||||
|
[ES6 by way of Babel][es6].
|
||||||
|
|
||||||
|
The asset pipeline is [Sprockets][sprockets], which handles the concatenation,
|
||||||
|
minification, and compression of our assets.
|
||||||
|
|
||||||
|
[jQuery][jquery] is used throughout the application's JavaScript, with
|
||||||
|
[Vue.js][vue] for particularly advanced, dynamic elements.
|
||||||
|
|
||||||
## Performance
|
## Performance
|
||||||
|
|
||||||
|
### Resources
|
||||||
|
|
||||||
|
- [WebPage Test][web-page-test] for testing site loading time and size.
|
||||||
|
- [Google PageSpeed Insights][pagespeed-insights] grades web pages and provides feedback to improve the page.
|
||||||
|
- [Profiling with Chrome DevTools][google-devtools-profiling]
|
||||||
|
- [Browser Diet][browser-diet] is a community-built guide that catalogues practical tips for improving web page performance.
|
||||||
|
|
||||||
### Page-specific JavaScript
|
### Page-specific JavaScript
|
||||||
|
|
||||||
Certain pages may require the use of a third party library, such as [d3][d3] for
|
Certain pages may require the use of a third party library, such as [d3][d3] for
|
||||||
|
@ -54,6 +74,8 @@ General tips:
|
||||||
|
|
||||||
## Accessibility
|
## Accessibility
|
||||||
|
|
||||||
|
### Resources
|
||||||
|
|
||||||
The [Chrome Accessibility Developer Tools][chrome-accessibility-developer-tools]
|
The [Chrome Accessibility Developer Tools][chrome-accessibility-developer-tools]
|
||||||
are useful for testing for potential accessibility problems in GitLab.
|
are useful for testing for potential accessibility problems in GitLab.
|
||||||
|
|
||||||
|
@ -62,6 +84,8 @@ Accessibility best-practices and more in-depth information is available on
|
||||||
|
|
||||||
## Security
|
## Security
|
||||||
|
|
||||||
|
### Resources
|
||||||
|
|
||||||
[Mozilla’s HTTP Observatory CLI][observatory-cli] and the
|
[Mozilla’s HTTP Observatory CLI][observatory-cli] and the
|
||||||
[Qualys SSL Labs Server Test][qualys-ssl] are good resources for finding
|
[Qualys SSL Labs Server Test][qualys-ssl] are good resources for finding
|
||||||
potential problems and ensuring compliance with security best practices.
|
potential problems and ensuring compliance with security best practices.
|
||||||
|
@ -142,16 +166,31 @@ readability.
|
||||||
|
|
||||||
## Style guides and linting
|
## Style guides and linting
|
||||||
|
|
||||||
See the relevant style guides for details and information on linting:
|
See the relevant style guides for our guidelines and for information on linting:
|
||||||
|
|
||||||
- [SCSS][scss-style-guide]
|
- [SCSS][scss-style-guide]
|
||||||
|
|
||||||
## Testing
|
## Testing
|
||||||
|
|
||||||
Feature tests should be written for all new features as well as any regressions to prevent them from occuring again.
|
Feature tests should be written for all new features as well as any regressions
|
||||||
|
to prevent them from occurring again.
|
||||||
|
|
||||||
See [the Testing Standards and Style Guidelines](testing.md) for more information.
|
See [the Testing Standards and Style Guidelines](testing.md) for more
|
||||||
|
information.
|
||||||
|
|
||||||
|
[rails]: http://rubyonrails.org/
|
||||||
|
[haml]: http://haml.info/
|
||||||
|
[hamlit]: https://github.com/k0kubun/hamlit
|
||||||
|
[hamlit-limits]: https://github.com/k0kubun/hamlit/blob/master/REFERENCE.md#limitations
|
||||||
|
[scss]: http://sass-lang.com/
|
||||||
|
[es6]: https://babeljs.io/
|
||||||
|
[sprockets]: https://github.com/rails/sprockets
|
||||||
|
[jquery]: https://jquery.com/
|
||||||
|
[vue]: http://vuejs.org/
|
||||||
|
[web-page-test]: http://www.webpagetest.org/
|
||||||
|
[pagespeed-insights]: https://developers.google.com/speed/pagespeed/insights/
|
||||||
|
[google-devtools-profiling]: https://developers.google.com/web/tools/chrome-devtools/profile/?hl=en
|
||||||
|
[browser-diet]: https://browserdiet.com/
|
||||||
[d3]: https://d3js.org/
|
[d3]: https://d3js.org/
|
||||||
[chartjs]: http://www.chartjs.org/
|
[chartjs]: http://www.chartjs.org/
|
||||||
[chrome-accessibility-developer-tools]: https://github.com/GoogleChrome/accessibility-developer-tools
|
[chrome-accessibility-developer-tools]: https://github.com/GoogleChrome/accessibility-developer-tools
|
||||||
|
|
Loading…
Reference in a new issue