Heybooster Front End Naming Conventions

Mustafa Dalga
Mustafa Dalga

Table of Contents

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

props: {
  showAll: {
    type: Boolean,
    default: true
  },
},
Define a prop
<DataSource showAll="true"/>
Pass a props

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

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 function
methods: {
  resetChartVariables() {
    this.activeMetric = null;
    this.requestStatus = false;
    this.chartTitle = "";
  }
}
Example method
@mixin setBoxShadow($value){
  -webkit-box-shadow: $value;
  -moz-box-shadow:    $value;
  box-shadow:         $value;
}
Example SCSS Mixin

Folder Naming

  • The kebab-case naming convention is used to define a folder.
cross-tab-communication
crypto-js
Example folders

Component/View Naming

  • The PascalCase naming convention is used to define a component or view.
DataSourceChangePopup.vue
MyInsights.vue
Example Vue Component Naming

JavaScript/TypeScript File Naming

  • The kebab-case naming convention is used to define a javascript/typescript file.
onboarding-pages.js
priority-list.ts
Example Javascript/TypeScript File Naming
heybooster tech

Mustafa Dalga Twitter

A passionate developer who wants to be a pioneer at what he is doing.