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,4 +1,4 @@
|
|||||||
# 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.
|
||||||
|
|
||||||
@ -14,14 +14,14 @@ As previously said you can use fluence with any frontend or nodejs framework. JS
|
|||||||
|
|
||||||
For the purpose of the demo we will use a very minimal npm package with typescript support:
|
For the purpose of the demo we will use a very minimal npm package with typescript support:
|
||||||
|
|
||||||
```
|
```text
|
||||||
src
|
src
|
||||||
┗ index.ts (1)
|
┗ index.ts (1)
|
||||||
package.json (2)
|
package.json (2)
|
||||||
tsconfig.json
|
tsconfig.json
|
||||||
```
|
```
|
||||||
|
|
||||||
index.ts (1):
|
index.ts \(1\):
|
||||||
|
|
||||||
```typescript
|
```typescript
|
||||||
async function main() {
|
async function main() {
|
||||||
@ -31,9 +31,9 @@ async function main() {
|
|||||||
main();
|
main();
|
||||||
```
|
```
|
||||||
|
|
||||||
package.json (2):
|
package.json \(2\):
|
||||||
|
|
||||||
```json
|
```javascript
|
||||||
{
|
{
|
||||||
"name": "demo",
|
"name": "demo",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
@ -49,7 +49,6 @@ package.json (2):
|
|||||||
"typescript": "^4.2.4"
|
"typescript": "^4.2.4"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
Let's test if it works:
|
Let's test if it works:
|
||||||
@ -95,7 +94,6 @@ async function main() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
main();
|
main();
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
Let's try it out:
|
Let's try it out:
|
||||||
@ -108,7 +106,6 @@ $ npm run exec
|
|||||||
|
|
||||||
Is client connected: true
|
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.
|
**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.
|
||||||
@ -117,7 +114,7 @@ $
|
|||||||
|
|
||||||
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
|
```bash
|
||||||
npm install --save-dev @fluencelabs/aqua-cli
|
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
|
We will also need the standard library for the language
|
||||||
|
|
||||||
```
|
```text
|
||||||
npm install --save-dev @fluencelabs/aqua-lib
|
npm install --save-dev @fluencelabs/aqua-lib
|
||||||
```
|
```
|
||||||
|
|
||||||
Let's add our first aqua file:
|
Let's add our first aqua file:
|
||||||
|
|
||||||
```
|
```text
|
||||||
aqua (1)
|
aqua (1)
|
||||||
┗ demo.aqua (2)
|
┗ demo.aqua (2)
|
||||||
node_modules
|
node_modules
|
||||||
@ -143,11 +140,11 @@ package.json
|
|||||||
tsconfig.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"
|
import "@fluencelabs/aqua-lib/builtin.aqua"
|
||||||
|
|
||||||
func demo(nodePeerId: PeerId) -> []string:
|
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:
|
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": {
|
"scripts": {
|
||||||
"exec": "node -r ts-node/register src/index.ts",
|
"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:
|
A typescript file should be generated like so:
|
||||||
|
|
||||||
```
|
```text
|
||||||
aqua
|
aqua
|
||||||
┗ demo.aqua
|
┗ demo.aqua
|
||||||
node_modules
|
node_modules
|
||||||
@ -214,12 +211,11 @@ async function main() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
main();
|
main();
|
||||||
|
|
||||||
```
|
```
|
||||||
|
|
||||||
if everything is fine you have similar result:
|
if everything is fine you have similar result:
|
||||||
|
|
||||||
```
|
```text
|
||||||
$ npm run exec
|
$ npm run exec
|
||||||
|
|
||||||
> demo@1.0.0 exec C:\work\demo
|
> demo@1.0.0 exec C:\work\demo
|
||||||
@ -231,17 +227,14 @@ Node 12D3KooWHk9BjDQBUqnavciRPhAYFvqKBe4ZiPPvde7vDaqgn5er is connected to: /ip4/
|
|||||||
$
|
$
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Advanced usage
|
## Advanced usage
|
||||||
|
|
||||||
Fluence JS SDK gives options to register own handlers for aqua vm service calls
|
Fluence JS SDK gives options to register own handlers for aqua vm service calls
|
||||||
|
|
||||||
**TBD**
|
**TBD**
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## References
|
## References
|
||||||
|
|
||||||
- For the list of compiler options see: https://github.com/fluencelabs/aqua
|
* 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
|
* 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
|
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
|
5. The result of the method returned under the name output name
|
||||||
|
|
||||||
**Figure 2: Sequential Instruction** 
|
**Figure 2: Sequential Instruction** 
|
||||||
|
|
||||||
The _**seq**_ instruction takes two instructions at most as its arguments and executes them sequentially, one after the other.
|
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.
|
TODO: add better graphic showing the disticntion of branching vs seq.
|
||||||
|
|
||||||
**Figure 4: Fold Instruction** 
|
**Figure 4: Fold Instruction** 
|
||||||
|
|
||||||
The _**fold**_ instruction iterates over the elements of an array and workds as follows:
|
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
|
* 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.
|
* If the first instruction fails, then the second one is executed.
|
||||||
|
|
||||||
**Figure 6: Null Instruction** 
|
**Figure 6: Null Instruction** 
|
||||||
|
|
||||||
This is an empty instruction: it takes no arguments and does nothing. The _**null**_ instruction is useful for generating code.
|
This is an empty instruction: it takes no arguments and does nothing. The _**null**_ instruction is useful for generating code.
|
||||||
|
|
||||||
|