Heybooster Front End Naming Conventions

2 min read

Mustafa Dalga

Apr 7, 2022

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