Best pratices for naming your variables in Wix

In this first post about good practices, we are going to see what is a naming convention and what it brings to your project.

A naming convention is simply a guideline you follow to name variable. It dictates how you construct a variable name based on its content and usage.

Benefits

Using a convention has the following benefits:

Less thinking

Each variable will have only 1 right way to be named. You won't need to think twice about a good way to name your variable. You also spend less time looking up variable because you know how to reconstruct them.

Avoid collision

If you create 2 variables with the same name, you'll have a duplicate error/warning in your Velo editor. This collision is a red flag meaning the value is manipulated in 2 places.

Better readability

You understand instantly what value is stored in a variable, its type and what actions are available.

Better collaboration

If you work in a team or with a designer it will be easier for anyone to discover your code if you all follow the same naming convention. It will also help if you need someone to debug your Wix site on the Velo forum or Wix support.

Code uniformity

Using the same structure and naming convention across all your pages will make your project more uniform and easier to navigate. It also makes the code more coherent if multiple people work on the project.

Naming Convention for Velo

The Wix Velo team does not provide any recommendation regarding naming. So we come up with the following based on our experience:

Constants

constants are values that should never be changed or define by your algorithm. Instead, they are used to control its behaviour. We use snake case to write them and differentiate them from variable;

const PRODUCT_COUNT_MAX = 10;
const DEFAULT_COLOR = 'black';
const CATEGORIES = ['clothes', 'shoes', 'equipment'];

Variables

As many in the javascript world, we use the camel case naming. The name should be short as well as descriptive and should start with a noun.

let article;
let productName;
let longDescription;
let firstName;

avoid the following

let userFirstName; //avoid the user prefix if obvious
let articleAboutOurBestPratices; //too long
let productCostValue; //value does not bring information
let productPriceNumber; //chances are that price is a number
let sendEmailAddress; //start with a verb

Functions

We also use the camel case for naming variable but they start with a verb

function registerUser(){}
function validateCart(){}
function postArticle(){}
function shortenDescription(){}

Wix Editor Elements

Elements are objects that represent a component of your interface. You use them to interact with your site UI. For instance, you can change the text from a text element, change data in a repeater, or add an event listener to your button. You'll find the complete list of elements in $w documentation

We prefix them with $ so they are easier to spot in code. We also suffix them with the type of element. This allow to understand what element we manipulate without checking the UI. It also avoids confusion

let $profilImage;
let $productsRepeater;
let $titleText;
let $firstNameInput;

let $illustrationImage; // the suffix prevent confusion
let $illustrationText; 

We also use the same naming convention for the Wix Editor element's Id (minus the prefix)

let $illustrationText = $w("#illustrationText");

Repeaters

Repeaters contain elements within them. We name the contained element in the context of the repeater

const $productRepeater // repeater display a list of products 
const $productContainer
const $productTitleText
const $productStockStatusText
const $productOrderButton
const $productPhotoImage

Example

Based on our naming convention you should be able to understand what the following piece of code does without context nor UI

const CATEGORY = "shoes";

let wishlist = [];

let $productRepeater;

$w.onReady(() => {
    $w("#titleText").text = "Articles for " + CATEGORY
    
    $w("#productAddButton").onClick(addProductToWishlist);
    $w("#addAllButton").onClick(addAllProductToWishlist);
    
    $productRepeater = $w("#productRepeater");
    $productRepeater.onItemReady(bindProductToRepeater);
    
    //... retrieve the data from backend or dataset
    $productRepeater.data = productList; 
})

function bindProductToRepeater($item, data, index){
    $item('#productTitleText').text = data.title;
    $item('#productPictureImage').src = data.picture;
}

...

Conclusion

Using a naming convention will help you and your team write better code and be more productive. They are usually enforced in large teams but are beneficial in all project. They are simple to implement and are easy to understand, even for code beginners.

Feel free to use the one we provide or modify it but stick to one convention per project!

Let us know in the comment if you are going to use our convention in your next project or if you have another one to suggest