Development Best Practices

For Frontend Development

Controller/View Model

• Entry Point of a Page will be a <Controller/>
• <Controller/> fetches the data using SDK/API and renders the <View/>
• It is preferred that <View/> contains only UI states
• <Controller/> can pass data states to view if need be
• RouteDestinations will import <Controller/>

Standard Nomenclature:

• Component Name: WorkflowRunTable
• Controller Name: WorkflowRunTableController
• View Name: WorkflowRunTableView

Directory Structure:

src
|__controllers
  |__WorkflowRunTable
    |__ __tests__
	  |__WorkflowRunTable.test.tsx
    |__WorkflowRunTable.tsx (<WorkflowRunTableController>)
    |__index.ts
|__views
  |__WorkflowRunTable
    |__ __tests__
	  |__WorkflowRunTable.test.tsx
    |__WorkflowRunTable.tsx (<WorkflowRunTableView>)
    |__index.ts

Exports/Imports:

• Exports will be done from index.ts using the following code pattern:

import WorkFlowRunTableView from './WorkflowRunTable';

export default WorkFlowRunTableView;

NOTE:

Please don’t use ‘@paths/’ while exporting.
Only default exports to be used, no named exports.

• Imports will always use ‘@paths/’ imports:

import WorkflowRunTableView from '@views/WorkflowRunTable';

API Conventions:

TypeScript types for API will have the same name as documentation on the GraphQL Playground.

Naming Conventions:

Interfaces:

Components: Append Props to the FC’s name

• FC Name: WorkflowRunTableView
• Props Name: WorkflowRunTableViewProps

Routes:

• Append to to the FC name.
• URL String should be in snake-case.

export const toHomePage = (): string => '/workflow-details';