Heybooster Front End Naming Conventions

Technical SEO
2 min read
Mustafa Dalga
Apr 7, 2022

In this article

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-jsExample folders

Component/View Naming

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

DataSourceChangePopup.vue
MyInsights.vueExample 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.tsExample Javascript/TypeScript File Naming

Latest

From the blog

The latest industry news, interviews, technologies, and resources.
Technical SEO
7 min read

How to set up a new Vue Vite and Tailwind CSS project?

Hello everyone, my dear readers. I hope everyone is well. This weekend I will show you how to install vue vite and tailwind css project for beginners...