Heybooster Front End Naming Conventions

In this article, you will find the naming conventions we used in our Heybooster front-end project.

Variable Naming

• The camelCase naming convention is used to define a variable.

Examples

const dataSourceName = '';
const stepsConnectStatus = {
  1: false,
  2: false,
  3: false,
  4: false,
};
const apiBaseUrl = {};
const bookmarkID = [];
const loaderStatus = [];
const axiosCancelStatusCodes = [];
const notifications = [];

Props Naming

• The camelCase naming convention is used to define a prop.

Example

Define a prop:

props: {
  showAll: {
    type: Boolean,
    default: true
  },
},

Pass a props:

<DataSource showAll="true"/>

Computed Property Naming

• The camelCase naming convention is used to define a computed property.

Example

computed:{
  background() {
    return `bg-${this.priority.type}`;
  },
  insightCreatedDate(){
    return  new Date(this.insight.ts * 1000).toLocaleString();
  },
},

Method / Function Naming

• The camelCase naming convention is used to define a method/function.
• The camelCase naming convention also used to setters, getters, mutations method in Vuex.
• The camelCase naming convention also used to SCSS mixins.

Examples

Example function:

function getSourceTypeIcon(sourceType) {

  const dataSourceTypesIcons = {
    [dataSourceTypes.googleAnalytics]: "google-analytics.svg",
    [dataSourceTypes.googleAdwords]: "google-adwords.svg",
    [dataSourceTypes.googleSearchConsole]: "google-search.svg",
    [dataSourceTypes.facebook]: "facebook.svg",
    [dataSourceTypes.shopify]: "shopify.svg",
  };

  return dataSourceTypesIcons[sourceType];
}

Example method:

methods: {
  resetChartVariables() {
    this.activeMetric = null;
    this.requestStatus = false;
    this.chartTitle = "";
  }
}

Example SCSS Mixin:

@mixin setBoxShadow($value){
  -webkit-box-shadow: $value;
  -moz-box-shadow:    $value;
  box-shadow:         $value;
}

Folder Naming

• The kebab-case naming convention is used to define a folder.

Examples

cross-tab-communication
crypto-js

Component/View Naming

• The PascalCase naming convention is used to define a component or view.

Examples

DataSourceChangePopup.vue
MyInsights.vue

JavaScript/TypeScript File Naming

• The kebab-case naming convention is used to define a javascript/typescript file.

Examples

onboarding-pages.js
priority-list.ts

Originally published at heybooster.