How To Use Velo and Wix Fetch To Extend Your Website Functionality

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 2019) Velo supports modern JavaScript features up through and including the standard. ES2019 (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 , so that even though the browser runs transpiled ES5 code, you can debug your ES2019 source code in your browser's developer tools. source maps Module Support (ECMAScript 2015) You can only export functions in files that are located in the Public or Backend sections of the . You cannot export functions from page or popup files. Note: Velo Sidebar Velo supports the native module functionality included in the ES2015 release of JavaScript. To use ES2015 module functionality, you need to follow the . 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. ES2015 Module Syntax For example: { doSomething() + ; } { ; } // Filename - public/amodule.js export ( ) function aFunction // Only this function is exposed to other files. return " or other" ( ) function doSomething // This function is internal to the amodule.js module. return "Do something" To refer to an item in a module, you first need to it: import {aFunction} ; import from 'public/amodule.js' and then you can refer to it: .log(aFunction()); console // Logs: "Do something or other" You can export an item as from a module: default { ; } // Filename - public/amodule.js export default ( ) function aFunction return "Do Something" To import a default item, use with no curly braces, { }. You can assign the function any name when importing it. In this case, is assigned to because is the default exported item in . import default doSome aFunction aFunction amodule.js doSome ; import from 'public/amodule.js' 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: { }; { }; .log( ); // Filename - public/lib.js export ( ) function aFunction export ( ) function bFunction console "Hi" When you import from , 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 , "Hi" is not logged to the console again. aFunction lib.js bFunction Exporting Objects You can export an object from a module. For example: myObject = { : , : } // Filename - public/amodule.js export let prop1 "Here" prop2 "There" You can then import it and refer to its properties: {myObject} ; .log(myObject.prop1) import from 'public/amodule.js' console // Logs: "Here" 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 prefix. backend/ You can import a module from public with the prefix. public/ Modules can import other modules. 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 , or check out the . Wix Fetch here Standard Fetch specification You should use Fetch whenever you need an request. You can use Fetch in both backend and front-end code. To use Fetch in your JavaScript code, add to the beginning of your JavaScript file. http/s import {fetch} from 'wix-fetch' Among its benefits, Fetch uses promises to handle asynchronous requests, which allows for easier handling of results and errors. Previously published at https://support.wix.com/en/article/velo-javascript-support