Velo: JavaScript Support

Visit the Velo by Wix website to onboard and continue learning.

Velo supports working in JavaScript and some special features, including:

  • Support for JavaScript features
  • Support for modules
  • Support for the JavaScript Fetch API
  • Share JavaScript code naturally between the backend and front-end using web modules

JavaScript Feature Support (ECMAScript 2020)

Velo supports modern JavaScript features up through and including the ES2020 standard.

(And of course you can use promises, async/await, and arrow functions, which were introduced with ES2017.) 

Browsers are gradually adopting the ES2019 standard. Until these standards are fully implemented, we transpile your code into ES5, so it can run in current browsers. Velo supports source maps, so that even though the browser runs transpiled ES5 code, you can debug your ES2019 source code in your browser's developer tools. 

Module Support (ECMAScript 2015)

Note: You can only export functions in files that are located in the Public or Backend sections of the Code sidebar (Wix Studio), or the Velo sidebar (Wix Editor). You cannot export functions from page or popup files.

Velo supports the native module functionality included in the ES2015 release of JavaScript.

To use ES2015 module functionality, you need to follow the ES2015 Module Syntax. Only those items specifically exported in a module are exposed to other files. All other items in your module are internal to the module only.

For example:

Copy

To refer to an item in a module, you first need to import it:

Copy

and then you can refer to it:

Copy

You can export an item as default from a module:

Copy

To import a default item, use import with no curly braces, { }. You can assign the default function any name when importing it. In this case, doSome is assigned to aFunction because aFunction is the default exported item in amodule.js.

Copy

When you import an item from a module, the entire module file is executed. This means that if you have code that is not part of a function or variable declaration in your module, it will execute the first time you import a function from your module. For example, if you have this code in your module:

Copy

When you import aFunction from lib.js, your code will also log "Hi" to the console. This will run only once regardless of how many times you import a function from a .js file. So if you import bFunction, "Hi" is not logged to the console again.

Exporting Objects

You can export an object from a module. For example:

Copy

You can then import it and refer to its properties:

Copy

Note: Certain module export formats are not supported in events.js, data.js, or routers.js files. For more information, see Module Export Syntax for Backend Events, Data Hooks, and Routers.

Module Scope

The following is a list of guidelines that define how you can share modules and functions between, and within, the backend and public scopes:

  • A JavaScript file or script in backend can import a module from any file in backend or public.
  • A file in public can import a module from any file in public.
  • You can import functions from backend and use them in public, using a web module.
  • You can use relative paths to refer to files with the "." prefix.
  • You can import a module from backend with the backend/ prefix.
  • You can import a module from public with the public/ prefix.
  • Modules can import other modules.

Wix Fetch

Wix Fetch is an implementation of the standard JavaScript Fetch API and you work with it the same way, using standard Fetch syntax. You can see examples of using Fetch here, or check out the Standard Fetch specification.

You should use Fetch whenever you need an http/s request. You can use Fetch in both backend and front-end code. To use Fetch in your JavaScript code, add import {fetch} from 'wix-fetch' to the beginning of your JavaScript file.

Among its benefits, Fetch uses promises to handle asynchronous requests, which allows for easier handling of results and errors.

Was this helpful?
Yes
No