github-mirror/gitea
2
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2024-11-30 21:45:41 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity
56362043d3
gitea/docs/content/doc/developers/guidelines-frontend.md
wxiaoguang 56362043d3
Frontend refactor: move Vue related code from index.js to components dir, and remove unused codes. (#17301) 
* 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>
2021-10-15 10:35:26 +08:00

2.2 KiB
Raw Blame History

date title slug weight toc draft menu
2021-10-13T16:00:00+02:00 Guidelines for Frontend Development guidelines-frontend 20 false false
sidebar
parent name weight identifier
developers Guidelines for Frontend 20 guidelines-frontend

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:

  1. Every feature (Fomantic-UI/jQuery module) should be put in separate files/directories.
  2. HTML ids and classes should use kebab-case.
  3. 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.
  4. jQuery events across different features should use their own namespaces.
  5. 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.
  6. The backend can pass complex data to the frontend by using ctx.PageData["myModuleData"] = map[]{}
  7. 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.