56362043d3
* frontend refactor
* Apply suggestions from code review
Co-authored-by: delvh <dev.lh@web.de>
* Update templates/base/head.tmpl
Co-authored-by: delvh <dev.lh@web.de>
* Update docs/content/doc/developers/guidelines-frontend.md
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
* fix typo
* fix typo
* refactor PageData to pageData
* Apply suggestions from code review
Co-authored-by: delvh <dev.lh@web.de>
* Simply for the visual difference.
Co-authored-by: delvh <dev.lh@web.de>
* Revert "Apply suggestions from code review"
This reverts commit 4d78ad9b0e.
Co-authored-by: delvh <dev.lh@web.de>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: 6543 <6543@obermui.de>
2.2 KiB
2.2 KiB
| date | title | slug | weight | toc | draft | menu | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| 2021-10-13T16:00:00+02:00 | Guidelines for Frontend Development | guidelines-frontend | 20 | false | false |
|
Guidelines for Frontend Development
Table of Contents
{{< toc >}}
Background
Gitea uses Less CSS, Fomantic-UI (based on jQuery) and Vue2 for its frontend.
The HTML pages are rendered by Go HTML Template
General Guidelines
We recommend Google HTML/CSS Style Guide and Google JavaScript Style Guide
Gitea specific guidelines:
- Every feature (Fomantic-UI/jQuery module) should be put in separate files/directories.
- HTML ids and classes should use kebab-case.
- HTML ids and classes used in JavaScript should be unique for the whole project, and should contain 2-3 feature related keywords. We recommend to use the
js-prefix for classes that are only used in JavaScript. - jQuery events across different features should use their own namespaces.
- CSS styling for classes provided by frameworks should not be overwritten. Always use new class-names to overwrite framework styles. We recommend to use the
us-prefix for user defined styles. - The backend can pass complex data to the frontend by using
ctx.PageData["myModuleData"] = map[]{} - Simple pages and SEO-related pages use Go HTML Template render to generate static Fomantic-UI HTML output. Complex pages can use Vue2 (or Vue3 in future).
Legacy Problems and Solutions
Too much code in web_src/index.js
Previously, most JavaScript code was written into web_src/index.js directly, making the file unmaintainable.
Try to keep this file small by creating new modules instead. These modules can be put in the web_src/js/features directory for now.
Vue2/Vue3 and JSX
Gitea is using Vue2 now, we plan to upgrade to Vue3. We decided not to introduce JSX to keep the HTML and the JavaScript code separated.