/
Frontend Coding Guidelines

Frontend Coding Guidelines

  • Project and folder structure according to this article

  • CSS class names:

    • according to BEM (block ≙ component)

    • in the SCSS files, use selectors like & instead of writing class names in full length (see this article)
      example: toolbar { … &__buttons { … } } instead of toolbar { … } toolbar__buttons { … }

  • Structure HTML files with sections and separate them with comments: <!-- <section name> -->

  • Use RxJS operator take(1) instead of first()

  • In the state, we have to use take(1) whenever we get an observable from a function we call

  • Our store’s actions always return observables (no void)

  • Use lambda function instead of .bind(this)
    example:

    • ret.children.map(children => this.classificationsDeepCopy(children));
      instead of
      ret.children.map(this.classificationsDeepCopy.bind(this));

  • We use ExampleType[] instead of Array<ExampleType>, when refactoring or writing new code

  • Test name pattern: should_ExpectedBehavior or should_ExpectedBehavior_When_StateUnderTest depending on the specific test

  • Testing standards according to this article

  • All entities (displayed in the UI) should start with a capital letter

  • How to write TASKANA specific words which are displayed in the UI:

    • Entities: White spaces instead of camel case, all words start with a capital letter
      e.g. WorkbasketAccessItem → Workbasket Access Item

    • Instance variables: White spaces instead of camel case, all words start with lower case in continuous text and with capital letter otherwise (e.g. in captions)
      e.g. in continuous text: <Classification>.serviceLevel → service level
      e.g. in a caption: <Classification>.serviceLevel → Service Level

  • For maps, we recommend to use ‘valueByKey’ naming convention

  • Use quotes when writing values of variables in strings:

    • e.g. Task with id '152' instead of Task with id 152

 

Related content

Outcomes (2021)
Outcomes (2021)
More like this
Outcomes (2022)
Outcomes (2022)
More like this
Backend Coding Guidelines
Backend Coding Guidelines
More like this
Module Overview
Module Overview
More like this
Testing Guidelines
Testing Guidelines
More like this
New Documentation
New Documentation
More like this