# Client-Side vs Web-Side Engines

FormIt plugins utilize two distinct JavaScript engines:

* The panel displaying the HTML (Web-Side)
* The Client-side (FormIt) makes calls to FormIt and its geometry kernel.

These two JavaScript engines work in distinct processes.

## **Client-Side (FormIt) vs Web-Side (HTML)**

FormIt runs multiple JavaScript engines simultaneously:

* The FormIt application has its own JavaScript engine
* Each plugin Toolbar has its own JavaScript engine.
* Each plugin Panel has its own JavaScript engine (Chromium)

Plugins can specify where the JavaScript is loaded:

![](/files/5XcB4eBMgBGfXkjS4Eth)

### Client-Side (FormIt)

Specified using [manifest.json](https://github.com/FormIt3D/FormItExamplePlugins/blob/master/HelloBlockAsync/v23_0/manifest.json#L8)

```
    "Scripts": [
        "PLUGINLOCATION/blockFormItSide.js",
        "https://formit3d.github.io/FormItExamplePlugins/SharedPluginFiles/PluginUtils18_0.js"
    ]
```

### Web-side (HTML)

Specified using[ index.html](https://github.com/FormIt3D/FormItExamplePlugins/blob/master/HelloBlockAsync/v23_0/index.html#L7)

* Web-side scripts are loaded from the web page.
* Web-side scripts can call into the Client-Side (FormIt) JavaScript using multiple async calls.

## Three methods to call Client-side (FormIt) commands from a Web-based plugin:

### Method 1: FormItInterface.CallMethod

`CallMethod` takes a function name and the arguments that will run on the FormIt Side. The passed-in function will be called with the result of the function call.

```
    var args = {
        "w": 10,
        "l": 10,
        "h": 10
    }
    FormItInterface.CallMethod("CreateBlock", args, function(result)
    {
        // Result of the function call
    });
```

**Pros:**

➕ No`await` needed.

**Cons:**

➖ A callback is needed to get the result and is called “who knows when”.

➖ Scripts are defined in two different places.

➖ Requires plugin logic to be split into two different files.

### **Method 2: FormIt.CallJS**

**\*Available in FormIt 2022.1 and newer only**

CallJS takes the JavaScript function to be called on the FormIt Side and the arguments.json object.

```
var args =
{
    "w": 10,
    "l": 10,
    "h": 10
};
var result = await FormIt.CallJS("CreateBlock", args);
```

**Pros:**

➕ The result is available when needed

**Cons:**

➖ \*\*\*\* Have to decorate all the async calls with await, forgetting to do so will mess things up.

➖ \*\*\*\* Potentially slower due to `await`

### **Method 3 (async/await)**

```
const pt1 = await WSM.Geom.Point3d(0,0,0);
```

With an async call, the Web Side calls the FormIt Side. This call starts in one process, sent to another process, then the result is passed back to the starting process. This is why await is needed.

Only built-in FormIt APIs can be called by default.

**Pros:**

➕ The result is available when needed.

➕ Allows combining all code into one JS file run from the web side, with no scripts defined in manifest.json.

**Cons:**

➖ \*\*\*\* Have to decorate all the async calls with `await`, forgetting to do so will mess things up.

➖ \*\*\*\* Potentially slower due to `await.`

### Method 4 (RegisterAsyncAPI)

**\*Available in FormIt 2023.0 and newer only**

To call a user defined function on the FormIt Side, the function needs to be registered. For example:

**Client-Side (FormIt)**

```
FormIt.RegisterAsyncAPI("HelloBlockAsync", "CreateBlock", "l, w, h");
// CreateBlock runs from FormIt.
HelloBlockAsync.CreateBlock = function(args)
{
    return { "Result" : "It Worked!!"};
}
```

**Web-Side (HTML)**

```
var result = await HelloBlockAsync.CreateBlock(l, w, h);
```

See [HelloBlockAsync](https://github.com/FormIt3D/FormItExamplePlugins/tree/master/HelloBlockAsync/v23_0) for an example.

**Pros:**

➕ The result is available when needed.

➕ Allows combining all code into one JS file run from the web side, with no scripts defined in manifest.json.

**Cons:**

➖ \*\*\*\* Have to decorate all the async calls with await, forgetting to do so will mess things up.

➖ \*\*\*\* Potentially slower due to `await.`

##


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://windows.help.formit.autodesk.com/plugins/how-to-develop-plugins/advanced-development/client-side-vs-web-side-engines.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.