Skip to content

Commit 0a0e9e8

Browse files
authored
Fix index documentation page for SDK (#311)
* Update docs Signed-off-by: Shubham Sharma <[email protected]> * Reorganize cards Signed-off-by: Shubham Sharma <[email protected]> * Add warning for deprecated package Signed-off-by: Shubham Sharma <[email protected]> * Update image ref Signed-off-by: Shubham Sharma <[email protected]> * Update images Signed-off-by: Shubham Sharma <[email protected]> * Update page weights Signed-off-by: Shubham Sharma <[email protected]>
1 parent 5f6fd57 commit 0a0e9e8

File tree

8 files changed

+74
-193
lines changed

8 files changed

+74
-193
lines changed

daprdocs/content/en/js-sdk-docs/_index.md

Lines changed: 69 additions & 188 deletions
Original file line numberDiff line numberDiff line change
@@ -3,198 +3,79 @@ type: docs
33
title: "JavaScript SDK"
44
linkTitle: "JavaScript"
55
weight: 1000
6-
description: How to get up and running with Actors using the Dapr JavaScript SDK
6+
description: JavaScript SDK packages for developing Dapr applications
7+
no_list: true
78
---
89

9-
The Dapr actors package allows you to interact with Dapr virtual actors from a JavaScript application. The examples below demonstrate how to use the JavaScript SDK for interacting with virtual actors.
10+
A client library for building Dapr apps in JavaScript and TypeScript. This client abstracts the public Dapr APIs like service to service invocation, state management, pub/sub, secrets, and much more, and provides a simple, intuitive API for building applications.
1011

11-
For a more in-depth overview of Dapr actors, visit the [actors overview page]({{< ref actors-overview >}}).
12+
## Installation
1213

13-
## Pre-requisites
14-
- [Dapr CLI]({{< ref install-dapr-cli.md >}}) installed
15-
- Initialized [Dapr environment]({{< ref install-dapr-selfhost.md >}})
16-
- [Latest LTS version of Node or greater](https://nodejs.org/en/)
17-
- [JavaScript NPM package installed](https://www.npmjs.com/package/@dapr/dapr)
14+
To get started with the Javascript SDK, install the Dapr JavaScript SDK package from [NPM](https://www.npmjs.com/package/@dapr/dapr):
1815

19-
## Scenario
20-
The below code examples loosely describe the scenario of a Parking Garage Spot Monitoring System, which can be seen in this [video](https://www.youtube.com/watch?v=eJCu6a-x9uo&t=3785) by Mark Russinovich.
21-
22-
A parking garage consists of hundreds of parking spaces, where each parking space includes a sensor that provides updates to a centralized monitoring system. The parking space sensors (our actors) detect if a parking space is occupied or available.
23-
24-
To jump in and run this example yourself, clone the source code, which can be found in the [JavaScript SDK examples directory](https://github.com/dapr/js-sdk/tree/master/examples/http/actor-parking-sensor).
25-
26-
## Actor Interface
27-
The actor interface defines the contract that is shared between the actor implementation and the clients calling the actor. In the example below, we have created an interace for a parking garage sensor. Each sensor has 2 methods: `carEnter` and `carLeave`, which defines the state of the parking space:
28-
29-
```ts
30-
export default interface ParkingSensorInterface {
31-
carEnter(): Promise<void>;
32-
carLeave(): Promise<void>;
33-
}
34-
```
35-
36-
## Actor Implementation
37-
An actor implementation defines a class by extending the base type `AbstractActor` and implementing the actor interface (`ParkingSensorInterface` in this case).
38-
39-
The following code describes an actor implementation along with a few helper methods.
40-
41-
```ts
42-
import { AbstractActor } from "@dapr/dapr";
43-
import ParkingSensorInterface from "./ParkingSensorInterface";
44-
45-
export default class ParkingSensorImpl extends AbstractActor implements ParkingSensorInterface {
46-
async carEnter(): Promise<void> {
47-
// Implementation that updates state that this parking spaces is occupied.
48-
}
49-
50-
async carLeave(): Promise<void> {
51-
// Implementation that updates state that this parking spaces is available.
52-
}
53-
54-
private async getInfo(): Promise<object> {
55-
// Implementation of requesting an update from the parking space sensor.
56-
}
57-
58-
/**
59-
* @override
60-
*/
61-
async onActivate(): Promise<void> {
62-
// Initialization logic called by AbstractActor.
63-
}
64-
}
65-
```
66-
67-
## Registering Actors
68-
Initialize and register your actors by using the `DaprServer` package:
69-
70-
```javascript
71-
import { DaprServer } from "@dapr/dapr";
72-
import ParkingSensorImpl from "./ParkingSensorImpl";
73-
74-
const daprHost = "127.0.0.1";
75-
const daprPort = "50000";
76-
const serverHost = "127.0.0.1";
77-
const serverPort = "50001";
78-
79-
const server = new DaprServer(serverHost, serverPort, daprHost, daprPort);
80-
81-
await server.actor.init(); // Let the server know we need actors
82-
server.actor.registerActor(ParkingSensorImpl); // Register the actor
83-
await server.start(); // Start the server
84-
85-
// To get the registered actors, you can invoke `getRegisteredActors`:
86-
const resRegisteredActors = await server.actor.getRegisteredActors();
87-
console.log(`Registered Actors: ${JSON.stringify(resRegisteredActors)}`);
88-
```
89-
90-
## Invoking Actor Methods
91-
After Actors are registered, create a Proxy object that implements `ParkingSensorInterface` using the `ActorProxyBuilder`. You can invoke the actor methods by directly calling methods on the Proxy object. Internally, it translates to making a network call to the Actor API and fetches the result back.
92-
93-
```javascript
94-
import { DaprClient, ActorId } from "@dapr/dapr";
95-
import ParkingSensorImpl from "./ParkingSensorImpl";
96-
import ParkingSensorInterface from "./ParkingSensorInterface";
97-
98-
const daprHost = "127.0.0.1";
99-
const daprPort = "50000";
100-
101-
const client = new DaprClient(daprHost, daprPort);
102-
103-
// Create a new actor builder. It can be used to create multiple actors of a type.
104-
const builder = new ActorProxyBuilder<ParkingSensorInterface>(ParkingSensorImpl, client);
105-
106-
// Create a new actor instance.
107-
const actor = builder.build(new ActorId("my-actor"));
108-
// Or alternatively, use a random ID
109-
// const actor = builder.build(ActorId.createRandomId());
110-
111-
// Invoke the method.
112-
await actor.carEnter();
113-
```
114-
115-
## Using states with Actor
116-
117-
```ts
118-
// ...
119-
120-
const PARKING_SENSOR_PARKED_STATE_NAME = "parking-sensor-parked"
121-
122-
const actor = builder.build(new ActorId("my-actor"))
123-
124-
// SET state
125-
await actor.getStateManager().setState(PARKING_SENSOR_PARKED_STATE_NAME, true);
126-
127-
// GET state
128-
const value = await actor.getStateManager().getState(PARKING_SENSOR_PARKED_STATE_NAME);
129-
if (!value) {
130-
console.log(`Received: ${value}!`);
131-
}
132-
133-
// DELETE state
134-
await actor.removeState(PARKING_SENSOR_PARKED_STATE_NAME);
135-
...
136-
```
137-
138-
## Actor Timers and Reminders
139-
The JS SDK supports actors that can schedule periodic work on themselves by registering either timers or reminders. The main difference between timers and reminders is that the Dapr actor runtime does not retain any information about timers after deactivation, but persists reminders information using the Dapr actor state provider.
140-
141-
This distinction allows users to trade off between light-weight but stateless timers versus more resource-demanding but stateful reminders.
142-
143-
The scheduling interface of timers and reminders is identical. For an more in-depth look at the scheduling configurations see the [actors timers and reminders docs]({{< ref "howto-actors.md#actor-timers-and-reminders" >}}).
144-
145-
### Actor Timers
146-
```javascript
147-
// ...
148-
149-
const actor = builder.build(new ActorId("my-actor"));
150-
151-
// Register a timer
152-
await actor.registerActorTimer(
153-
"timer-id", // Unique name of the timer.
154-
"cb-method", // Callback method to execute when timer is fired.
155-
Temporal.Duration.from({ seconds: 2 }), // DueTime
156-
Temporal.Duration.from({ seconds: 1 }), // Period
157-
Temporal.Duration.from({ seconds: 1 }), // TTL
158-
50 // State to be sent to timer callback.
159-
);
160-
161-
// Delete the timer
162-
await actor.unregisterActorTimer("timer-id");
163-
```
164-
165-
### Actor Reminders
166-
```javascript
167-
// ...
168-
169-
const actor = builder.build(new ActorId("my-actor"));
170-
171-
// Register a reminder, it has a default callback: `receiveReminder`
172-
await actor.registerActorReminder(
173-
"reminder-id", // Unique name of the reminder.
174-
Temporal.Duration.from({ seconds: 2 }), // DueTime
175-
Temporal.Duration.from({ seconds: 1 }), // Period
176-
Temporal.Duration.from({ seconds: 1 }), // TTL
177-
100 // State to be sent to reminder callback.
178-
);
179-
180-
// Delete the reminder
181-
await actor.unregisterActorReminder("reminder-id");
182-
```
183-
184-
To handle the callback, you need to override the default `receiveReminder` implementation in your actor. For example, from our original actor implementation:
185-
```ts
186-
export default class ParkingSensorImpl extends AbstractActor implements ParkingSensorInterface {
187-
// ...
188-
189-
/**
190-
* @override
191-
*/
192-
async receiveReminder(state: any): Promise<void> {
193-
// handle stuff here
194-
}
195-
196-
// ...
197-
}
16+
```bash
17+
npm install --save @dapr/dapr
19818
```
19919

200-
For a full guide on actors, visit [How-To: Use virtual actors in Dapr]({{< ref howto-actors.md >}}).
20+
> ⚠️ [dapr-client](https://www.npmjs.com/package/dapr-client) is now deprecated. Please see [#259](https://github.com/dapr/js-sdk/issues/259) for more information.
21+
22+
## Structure
23+
24+
The Dapr Javascript SDK contains two major components:
25+
26+
* **DaprServer**: to manage all Dapr sidecar to application communication.
27+
* **DaprClient**: to manage all application to Dapr sidecar communication.
28+
29+
The above communication can be configured to use either of the gRPC or HTTP protocols.
30+
31+
<table>
32+
<tr>
33+
<td bgcolor="white"> <img src="images/dapr-server.jpg" alt="Dapr Server" width="500px"> </td>
34+
<td bgcolor="white"> <img src="images/dapr-client.jpg" alt="Dapr Client" width="500px"> </td>
35+
</tr>
36+
</table>
37+
38+
## Getting Started
39+
40+
To help you get started, check out the resources below:
41+
42+
<div class="card-deck">
43+
<div class="card">
44+
<div class="card-body">
45+
<h5 class="card-title"><b>Client</b></h5>
46+
<p class="card-text">Create a JavaScript client and interact with the Dapr sidecar and other Dapr applications (e.g., publishing events, output binding support, etc.). </p>
47+
<a href="{{< ref js-client >}}" class="stretched-link"></a>
48+
</div>
49+
</div>
50+
<div class="card">
51+
<div class="card-body">
52+
<h5 class="card-title"><b>Server</b></h5>
53+
<p class="card-text">Create a JavaScript server and let the Dapr sidecar interact with your application (e.g., subscribing to events, input binding support, etc.). </p>
54+
<a href="{{< ref js-server >}}" class="stretched-link"></a>
55+
</div>
56+
</div>
57+
<div class="card">
58+
<div class="card-body">
59+
<h5 class="card-title"><b>Actors</b></h5>
60+
<p class="card-text">Create virtual actors with state, reminders/timers, and methods.</p>
61+
<a href="{{< ref js-actors >}}" class="stretched-link"></a>
62+
</div>
63+
</div>
64+
</div>
65+
<br />
66+
<div class="card-deck">
67+
<div class="card">
68+
<div class="card-body">
69+
<h5 class="card-title"><b>Logging</b></h5>
70+
<p class="card-text">Configure and customize the SDK logging.</p>
71+
<a href="{{< ref js-logger >}}" class="stretched-link"></a>
72+
</div>
73+
</div>
74+
<div class="card">
75+
<div class="card-body">
76+
<h5 class="card-title"><b>Examples</b></h5>
77+
<p class="card-text">Clone the JavaScript SDK source code and try out some of the examples to get started quickly.</p>
78+
<a href="{{< ref js-examples >}}" class="stretched-link"></a>
79+
</div>
80+
</div>
81+
</div>
File renamed without changes.
File renamed without changes.

daprdocs/content/en/js-sdk-docs/js-actors/_index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
type: docs
33
title: "JavaScript SDK for Actors"
44
linkTitle: "Actors"
5-
weight: 1000
5+
weight: 3000
66
description: How to get up and running with Actors using the Dapr JavaScript SDK
77
---
88

daprdocs/content/en/js-sdk-docs/js-client/_index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
type: docs
33
title: "JavaScript Client SDK"
44
linkTitle: "Client"
5-
weight: 500
5+
weight: 1000
66
description: JavaScript Client SDK for developing Dapr applications
77
---
88

daprdocs/content/en/js-sdk-docs/js-examples/_index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
type: docs
33
title: "JavaScript Examples"
44
linkTitle: "Examples"
5-
weight: 500
5+
weight: 5000
66
description: Get started with the Dapr Javascript SDK through some of our examples!
77
---
88

daprdocs/content/en/js-sdk-docs/js-logger/_index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
type: docs
33
title: "Logging in JavaScript SDK"
44
linkTitle: "Logging"
5-
weight: 500
5+
weight: 4000
66
description: Configuring logging in JavaScript SDK
77
---
88

daprdocs/content/en/js-sdk-docs/js-server/_index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
type: docs
33
title: "JavaScript Server SDK"
44
linkTitle: "Server"
5-
weight: 500
5+
weight: 2000
66
description: JavaScript Server SDK for developing Dapr applications
77
---
88

0 commit comments

Comments
 (0)