From be26a617b468b2c1ae5530203be1394bdd84b7ad Mon Sep 17 00:00:00 2001 From: Pavel Murygin Date: Thu, 30 Dec 2021 02:35:51 +0300 Subject: [PATCH] Docs for updated version --- fluence-js/2_basics.md | 4 ++++ fluence-js/3_in_depth.md | 29 ----------------------------- fluence-js/4_run_in_browser-1.md | 21 +++++++++++++++++++++ fluence-js/5_run_in_node.md | 19 ++++++++++--------- 4 files changed, 35 insertions(+), 38 deletions(-) diff --git a/fluence-js/2_basics.md b/fluence-js/2_basics.md index eb69eda..7c66b02 100644 --- a/fluence-js/2_basics.md +++ b/fluence-js/2_basics.md @@ -188,3 +188,7 @@ If everything has been done correctly yuo should see `Hello, world!` in the cons The next section will cover in-depth and advanced usage of Fluence JS The code from this section is available in on [github](https://github.com/fluencelabs/examples/tree/main/fluence-js-examples/hello-world) + +## Running Fluence application in different environments + +Fluence JS runs instantiates Aqua Virtual Machine (AVM) from wasm file and runs it in the background thread. Different mechanism are used depending on the JS environment. In nodejs worker threads are for background execution and was file is read from the filesystem. In browser-based environments web workers are used and the wasm file is being loaded from server hosting the application. Next two sections cover how to configure a fluence application depending on the environment. diff --git a/fluence-js/3_in_depth.md b/fluence-js/3_in_depth.md index 30d824f..c6202fb 100644 --- a/fluence-js/3_in_depth.md +++ b/fluence-js/3_in_depth.md @@ -350,32 +350,3 @@ Tetraplets have the form of: To learn more about tetraplets and application security see [Security](https://github.com/fluencelabs/gitbook-docs/tree/77344eb147c2ce17fe1c0f37013082fc85c1ffa3/js-sdk/knowledge_security.md) To see full specification of `CallParams` type see [API reference](https://github.com/fluencelabs/gitbook-docs/tree/77344eb147c2ce17fe1c0f37013082fc85c1ffa3/js-sdk/js-sdk/6_reference/modules.md) - -## Running AVM in background - -FluencePeer's config allows to specify an implementation for AVM worker. By default the single-thread, ui-blocking implementation is used since it is universal across nodejs and browsers. If aqua scripts in your applications become too complex, AVM might block the ui thread significantly which will ui unresponsive. If this is the case the default AVM worker implementation can be swapped with the background AVM worker. - -The implementations differ for nodejs and the browsers: - -- `@fluencelabs/avm-worker-web` package should be used in browsers -- `@fluencelabs/avm-worker-node`package should be used in nodejs - -```typescript -import { Fluence } from "@fluencelabs/fluence"; -import { BackgroundWorker } from "@fluencelabs/avm-worker-web"; // or @fluencelabs/avm-worker-node for nodejs - -const main = async () => { - // .. - - await Fluence.start({ - avmWorker = new BackgroundWorker(), // swap the worker implementation - // rest of the config - }); - - // From now on Fluence will process all the particles in the background thus unblocking the UI thread - - // Please note, that all other FLuence usages remains unchanged. - - // .. -}; -``` diff --git a/fluence-js/4_run_in_browser-1.md b/fluence-js/4_run_in_browser-1.md index 7301e6c..4c44546 100644 --- a/fluence-js/4_run_in_browser-1.md +++ b/fluence-js/4_run_in_browser-1.md @@ -2,6 +2,27 @@ You can use the Fluence JS with any framework (or even without it). The "fluence" part of the application is a collection of pure typescript\javascript functions which can be called withing any framework of your choosing. +## Configuring application to run in browser + +To run application in browser you need to configure the server which hosts the application to serve two additional files: + +- `avm.wasm` is the execution file of AquaVM. The file is located in `@fluencelabs/avm` package +- `runnerScript.web.js` is the web worker script responsible for running AVM in background. The file is located in `@fluencelabs/avm-runner-background` package + +Fluence JS provides a utility script named `copy-avm-public` which locates described above files and copies them into the specified directory. For example if static files are served from the `public` directory you can run `copy-avm-public public` to copy files needed to run Fluence. It is recommended to put the names into `.gitignore` and run the script on every build to prevent possible inconsistencies with file versions. This can be done using npm's `postinstall` script: + +``` + ... + "scripts": { + "postinstall": "copy-avm-public public", + "start": "...", + .. + }, + ... +``` + +## Demo applications + See the browser-example which demonstrate integrating Fluence with React: [github](https://github.com/fluencelabs/examples/tree/main/fluence-js-examples/browser-example) Also take a look at FluentPad. It is an example application written in React: [https://github.com/fluencelabs/fluent-pad](https://github.com/fluencelabs/fluent-pad) diff --git a/fluence-js/5_run_in_node.md b/fluence-js/5_run_in_node.md index 8d73254..db02c85 100644 --- a/fluence-js/5_run_in_node.md +++ b/fluence-js/5_run_in_node.md @@ -1,19 +1,21 @@ # Running app in nodejs -## Intro - It is easy to use Fluence JS in NodeJS applications. You can take full advantage of the javascript ecosystem and at the save time expose service to the Fluence Network. That makes is an excellent choice for quick prototyping of applications for Fluence Stack. +## Configuring application to run in nodejs + +`@fluencelabs/fluence` delivers AquaVM wasm file through the npm package. No additional configuration is needed. + ## Calc app example Lets implement a very simple app which simulates a desk calculator. The calculator has internal memory and implements the following set of operations: -* Add a number -* Subtract a number -* Multiply by a number -* Divide by a number -* Get the current memory state -* Reset the memory state to 0.0 +- Add a number +- Subtract a number +- Multiply by a number +- Divide by a number +- Get the current memory state +- Reset the memory state to 0.0 First, let's write the service definition in aqua: @@ -120,4 +122,3 @@ func demoCalculation() -> f32: res <- Calc.getResult() <- res ``` -