GitBook: [docs] 53 pages and 12 assets modified
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 43 KiB |
Before Width: | Height: | Size: 43 KiB After Width: | Height: | Size: 43 KiB |
BIN
.gitbook/assets/air_fold_4 (1) (2) (2) (3).png
Normal file
After Width: | Height: | Size: 43 KiB |
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 41 KiB |
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 41 KiB |
BIN
.gitbook/assets/air_null_6 (1) (2) (2) (3).png
Normal file
After Width: | Height: | Size: 41 KiB |
Before Width: | Height: | Size: 86 KiB After Width: | Height: | Size: 86 KiB |
@ -1,6 +1,6 @@
|
||||
# Building a Frontend with JS-SDK
|
||||
# Building A Frontend with JS SDK
|
||||
|
||||
Fluence provides means to connect to the network from a javascript environment. It is currently tested to work in nodejs and modern browsers.
|
||||
Fluence provides means to connect to the network from a javascript environment. It is currently tested to work in nodejs and modern browsers.
|
||||
|
||||
To create an application you will need two main building blocks: the JS SDK itself and the aqua compiler. Both of them are provided in a form npm packages. JS SDK wraps the air interpreter and provides a connection to the network. There is low-level api for executing air scripts and registering for service calls handlers. Aqua compiler allows to write code in aqua language and compile it into typescript code which can be directly used with the SDK.
|
||||
|
||||
@ -8,20 +8,20 @@ Even though all the logic could be programmed by hand with raw air it is strongl
|
||||
|
||||
## Basic usage
|
||||
|
||||
As previously said you can use fluence with any frontend or nodejs framework. JS SDK could be as any other npm library. For the purpose of the demo we will init a bare-bones nodejs package and show you the steps needed install JS SDK and aqua compiler. Feel free to use the tool most suitable for the framework used in application, the installation process should be roughly the same
|
||||
As previously said you can use fluence with any frontend or nodejs framework. JS SDK could be as any other npm library. For the purpose of the demo we will init a bare-bones nodejs package and show you the steps needed install JS SDK and aqua compiler. Feel free to use the tool most suitable for the framework used in application, the installation process should be roughly the same
|
||||
|
||||
### 1. Start with npm package
|
||||
|
||||
For the purpose of the demo we will use a very minimal npm package with typescript support:
|
||||
|
||||
```
|
||||
```text
|
||||
src
|
||||
┗ index.ts (1)
|
||||
package.json (2)
|
||||
tsconfig.json
|
||||
```
|
||||
|
||||
index.ts (1):
|
||||
index.ts \(1\):
|
||||
|
||||
```typescript
|
||||
async function main() {
|
||||
@ -31,9 +31,9 @@ async function main() {
|
||||
main();
|
||||
```
|
||||
|
||||
package.json (2):
|
||||
package.json \(2\):
|
||||
|
||||
```json
|
||||
```javascript
|
||||
{
|
||||
"name": "demo",
|
||||
"version": "1.0.0",
|
||||
@ -49,7 +49,6 @@ package.json (2):
|
||||
"typescript": "^4.2.4"
|
||||
}
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
Let's test if it works:
|
||||
@ -81,7 +80,7 @@ npm install @fluencelabs/fluence @fluencelabs/fluence-network-environment
|
||||
|
||||
The first one is the SDK itself and the second is a maintained list of Fluence networks and nodes to connect to.
|
||||
|
||||
All of the communication with the Fluence network is done by using `FluenceClient`. You can create one with `createClient` function. The client encapsulates air interpreter and connects to the network through the relay. Currently any node in the network can be used a relay.
|
||||
All of the communication with the Fluence network is done by using `FluenceClient`. You can create one with `createClient` function. The client encapsulates air interpreter and connects to the network through the relay. Currently any node in the network can be used a relay.
|
||||
|
||||
```typescript
|
||||
import { createClient } from "@fluencelabs/fluence";
|
||||
@ -95,7 +94,6 @@ async function main() {
|
||||
}
|
||||
|
||||
main();
|
||||
|
||||
```
|
||||
|
||||
Let's try it out:
|
||||
@ -108,16 +106,15 @@ $ npm run exec
|
||||
|
||||
Is client connected: true
|
||||
$
|
||||
|
||||
```
|
||||
|
||||
**Note**: typically you should have a single instance`FluenceClient` per application since it represents it's identity in the network. You are free to store the instance anywhere you like.
|
||||
|
||||
### 3. Setting up aqua compiler
|
||||
|
||||
Aqua is the proffered language for the Fluence network. It can be used with javascript-based environments via npm package.
|
||||
Aqua is the proffered language for the Fluence network. It can be used with javascript-based environments via npm package.
|
||||
|
||||
**Warning: the package requires java to be installed (it will call "java -jar ... ") **
|
||||
**Warning: the package requires java to be installed \(it will call "java -jar ... "\)**
|
||||
|
||||
```bash
|
||||
npm install --save-dev @fluencelabs/aqua-cli
|
||||
@ -125,13 +122,13 @@ npm install --save-dev @fluencelabs/aqua-cli
|
||||
|
||||
We will also need the standard library for the language
|
||||
|
||||
```
|
||||
```text
|
||||
npm install --save-dev @fluencelabs/aqua-lib
|
||||
```
|
||||
|
||||
Let's add our first aqua file:
|
||||
|
||||
```
|
||||
```text
|
||||
aqua (1)
|
||||
┗ demo.aqua (2)
|
||||
node_modules
|
||||
@ -143,11 +140,11 @@ package.json
|
||||
tsconfig.json
|
||||
```
|
||||
|
||||
Add two directories, one for aqua sources (1) and another for the typescript output (3)
|
||||
Add two directories, one for aqua sources \(1\) and another for the typescript output \(3\)
|
||||
|
||||
Create a new text file called `demo.aqua` (2):
|
||||
Create a new text file called `demo.aqua` \(2\):
|
||||
|
||||
```
|
||||
```text
|
||||
import "@fluencelabs/aqua-lib/builtin.aqua"
|
||||
|
||||
func demo(nodePeerId: PeerId) -> []string:
|
||||
@ -160,7 +157,7 @@ This script will gather the list of external addresses from some node in the net
|
||||
|
||||
The aqua code can now be compiled by using the compiler CLI. We suggest adding a script to the package.json file like so:
|
||||
|
||||
```json
|
||||
```javascript
|
||||
...
|
||||
"scripts": {
|
||||
"exec": "node -r ts-node/register src/index.ts",
|
||||
@ -177,7 +174,7 @@ npm run compile-aqua
|
||||
|
||||
A typescript file should be generated like so:
|
||||
|
||||
```
|
||||
```text
|
||||
aqua
|
||||
┗ demo.aqua
|
||||
node_modules
|
||||
@ -214,12 +211,11 @@ async function main() {
|
||||
}
|
||||
|
||||
main();
|
||||
|
||||
```
|
||||
|
||||
if everything is fine you have similar result:
|
||||
|
||||
```
|
||||
```text
|
||||
$ npm run exec
|
||||
|
||||
> demo@1.0.0 exec C:\work\demo
|
||||
@ -231,17 +227,14 @@ Node 12D3KooWHk9BjDQBUqnavciRPhAYFvqKBe4ZiPPvde7vDaqgn5er is connected to: /ip4/
|
||||
$
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Advanced usage
|
||||
|
||||
Fluence JS SDK gives options to register own handlers for aqua vm service calls
|
||||
|
||||
**TBD**
|
||||
|
||||
|
||||
|
||||
## References
|
||||
|
||||
- For the list of compiler options see: https://github.com/fluencelabs/aqua
|
||||
- Repository with additional examples: https://github.com/fluencelabs/aqua-playground
|
||||
* For the list of compiler options see: [https://github.com/fluencelabs/aqua](https://github.com/fluencelabs/aqua)
|
||||
* Repository with additional examples: [https://github.com/fluencelabs/aqua-playground](https://github.com/fluencelabs/aqua-playground)
|
||||
|
||||
|
@ -23,7 +23,7 @@ AIR instructions are intended to launch the execution of a service method as fol
|
||||
4. The arguments specified by the argument list are passed to the method
|
||||
5. The result of the method returned under the name output name
|
||||
|
||||
**Figure 2: Sequential Instruction** ![Execution](../../.gitbook/assets/air_sequential_2%20%281%29%20%281%29%20%281%29%20%281%29.png)
|
||||
**Figure 2: Sequential Instruction** ![Execution](../../.gitbook/assets/air_sequential_2%20%281%29%20%281%29%20%281%29%20%281%29%20%281%29.png)
|
||||
|
||||
The _**seq**_ instruction takes two instructions at most as its arguments and executes them sequentially, one after the other.
|
||||
|
||||
@ -33,7 +33,7 @@ The _**par**_ instruction takes two instructions at most as its arguments and pa
|
||||
|
||||
TODO: add better graphic showing the disticntion of branching vs seq.
|
||||
|
||||
**Figure 4: Fold Instruction** ![Execution](../../.gitbook/assets/air_fold_4%20%281%29%20%282%29%20%281%29.png)
|
||||
**Figure 4: Fold Instruction** ![Execution](../../.gitbook/assets/air_fold_4%20%281%29%20%282%29%20%282%29%20%282%29.png)
|
||||
|
||||
The _**fold**_ instruction iterates over the elements of an array and workds as follows:
|
||||
|
||||
@ -49,7 +49,7 @@ This instruction is intended for organizing branches in the flow of execution as
|
||||
* The first instruction is executed and if the execution is successful, then the second instruction is ignored
|
||||
* If the first instruction fails, then the second one is executed.
|
||||
|
||||
**Figure 6: Null Instruction** ![Execution](../../.gitbook/assets/air_null_6%20%281%29%20%282%29.png)
|
||||
**Figure 6: Null Instruction** ![Execution](../../.gitbook/assets/air_null_6%20%281%29%20%282%29%20%282%29%20%281%29.png)
|
||||
|
||||
This is an empty instruction: it takes no arguments and does nothing. The _**null**_ instruction is useful for generating code.
|
||||
|
||||
|