Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-10-26 08:06:09 +01:00
Code Issues Packages Projects Releases Activity

move common pitfall guide to existing common-pitfall.md

Browse Source
This commit is contained in:
Eduard Heimbuch
2020-04-24 10:37:30 +02:00
committed by René Pfeuffer
parent 374e9f7b0d
commit 1625cb386c
3 changed files with 37 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
CHANGELOG.md
View File

@@ -9,10 +9,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Add iconStyle + onClick option and story shot for icon component ([#1100](https://github.com/scm-manager/scm-manager/pull/1100))
- Making WebElements (Servlet or Filter) optional by using the `@Requires` annotation ([#1101](https://github.com/scm-manager/scm-manager/pull/1101))
- Add class to manually validate rest data transfer objects with javax validation annotations ([#1114](https://github.com/scm-manager/scm-manager/pull/1114))
- Add guide to prevent common pitfalls in ui development ([#1107](https://github.com/scm-manager/scm-manager/pull/1107))
### Changed
- Removed the `requires` attribute on the `@Extension` annotation and instead create a new `@Requires` annotation ([#1097](https://github.com/scm-manager/scm-manager/pull/1097))
- Update guide to prevent common pitfalls in ui development ([#1107](https://github.com/scm-manager/scm-manager/pull/1107))
- Use os specific locations for scm home directory ([#1109](https://github.com/scm-manager/scm-manager/pull/1109))
- Use Library/Logs/SCM-Manager on OSX for logging ([#1109](https://github.com/scm-manager/scm-manager/pull/1109))
- Cleanup outdated jaxb annotation in scm-core ([#1136](https://github.com/scm-manager/scm-manager/pull/1136))

32
docs/common-pitfalls-ui-development.md
View File

@@ -1,32 +0,0 @@
# Common pitfalls ui development
## Introduction
There are quite some common pitfalls which can cause an inconsistent or broken ui.
You can avoid most ugly ui glitches and broken surfaces or just improve your frontend code
by asking yourself some questions while building the components.
## Design
There exists a scm styleguide which can support you build fitting and beautiful ui components.
Find the styleguide in "scm-ui/ui-styles".
- Have I used the colors from the scm styleguide?
- Have I used familiar fonts which are already in use on this surface?
- Is my component scalable / resizeable?
- What happens if I insert very long / short content?
- Is my component mobile friendly (tablet / smartphone)?
- Does my component fit into the existing surface?
- Does the ui become confusing / overcrowded / ugly because of my component?
- Can I reduce the shown texts and use icons (tooltips) instead?
- Are there enough whitespaces in my component / around my component?
- Have I used translation keys and translated my content at least in german and english?
## Small, reuseable components
The SCM-Manager provides a storybook which tests many reuseable components with usage examples.
You can also find some more ui components which doesn't have stories yet in "scm-ui/ui-components".
If a component which can be reused is missing, feel free to add it to ui-components.
- Have I checked ui-components before creating an entirely new component?
- If creating a new component should it be added to ui-components?
- Have I written one or more stories which tests my new component in the storybook?
- Does my component have too much code / logic? Can it be cut down in some smaller components?
- Have I created the new component as a react functional component?

40
docs/en/development/common-pitfall.md
View File

@@ -2,19 +2,51 @@
title: Common pitfall occurred while developing the SCM V2
---
## React Component is loaded unexpectedly
## Introduction
There are quite some common pitfalls which can cause an inconsistent or broken ui.
You can avoid most ugly ui glitches and broken surfaces or just improve your frontend code
by asking yourself some questions while building the components.
### Bug
## Design
There exists a scm styleguide which can support you build fitting and beautiful ui components.
Find the styleguide in "scm-ui/ui-styles".
- Have I used the colors from the scm styleguide?
- Have I used familiar fonts which are already in use on this surface?
- Is my component scalable / resizeable?
- What happens if I insert very long / short content?
- Is my component mobile friendly (tablet / smartphone)?
- Does my component fit into the existing surface?
- Does the ui become confusing / overcrowded / ugly because of my component?
- Can I reduce the shown texts and use icons (tooltips) instead?
- Are there enough whitespaces in my component / around my component?
- Have I used translation keys and translated my content at least in german and english?
## Small, reuseable components
The SCM-Manager provides a storybook which tests many reuseable components with usage examples.
You can also find some more ui components which doesn't have stories yet in "scm-ui/ui-components".
If a component which can be reused is missing, feel free to add it to ui-components.
- Have I checked ui-components before creating an entirely new component?
- If creating a new component should it be added to ui-components?
- Have I written one or more stories which tests my new component in the storybook?
- Does my component have too much code / logic? Can it be cut down in some smaller components?
- Have I created the new component as a react functional component?
## Other common errors
### React Component is loaded unexpectedly
#### Bug
A react component is updated without any changes in the props or states.
### Fix
#### Fix
Use the [why-did-you-update](https://github.com/maicki/why-did-you-update) library to analyze the causes of the updates.
A common cause is the definition of [new functions in render()](https://github.com/maicki/why-did-you-update#changes-are-in-functions-only).
### Example
#### Example
```javascript
class Main extends React.Component<Props> {