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.
|
||||
|
||||
@ -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:
|
||||
|
||||
```
|
||||
```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:
|
||||
@ -95,7 +94,6 @@ async function main() {
|
||||
}
|
||||
|
||||
main();
|
||||
|
||||
```
|
||||
|
||||
Let's try it out:
|
||||
@ -108,7 +106,6 @@ $ 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.
|
||||
@ -117,7 +114,7 @@ $
|
||||
|
||||
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** 
|
||||
**Figure 2: Sequential Instruction** 
|
||||
|
||||
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** 
|
||||
**Figure 4: Fold Instruction** 
|
||||
|
||||
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** 
|
||||
**Figure 6: Null Instruction** 
|
||||
|
||||
This is an empty instruction: it takes no arguments and does nothing. The _**null**_ instruction is useful for generating code.
|
||||
|
||||
|