Add documentation clarification

Signed-off-by: Xavier Geerinck <[email protected]>

Author: XavierGeerinck

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

@@ -9,15 +9,45 @@ no_list: true
 
 The Dapr JS SDK will allow you to interface with the Dapr process that abstracts several commonly used functionalities such as Service-to-Service invocation, State Management, PubSub, and more.
 
+## Installation
+
+To get started with the Javascript SDK, you can download the Dapr Javascript SDK package from [NPM](https://npmjs.org/package/dapr-client) by running the below:
+
+```bash
+npm install --save dapr-client
+```
+
+## Structure
+
+The Dapr Javascript SDK exists out of 2 major components: 
+
+* **DaprServer:** The Dapr Server manages all communication from the Dapr Sidecar to your application
+* **DaprClient:** The Dapr Client manages all communication from your application to the Dapr Sidecar
+
+To achieve communication, you are able to choose between 2 different protocols that are implemented: gRPC or HTTP 
+
+![](./js-server/dapr-server.jpg)
+![](./js-client/dapr-client.jpg)
+
+## Get Started
+
+To help you get started, feel free to check out the resources below:
 
 <div class="card-deck">
   <div class="card">
     <div class="card-body">
       <h5 class="card-title"><b>Client</b></h5>
-      <p class="card-text">Create a JavaScript client and interact with a Dapr sidecar and other Dapr applications.</p>
+      <p class="card-text">Create a JavaScript client and interact with a Dapr sidecar and other Dapr applications. (e.g. Publishing events, Output Binding support, ...)</p>
       <a href="{{< ref js-client >}}" class="stretched-link"></a>
     </div>
   </div>
+  <div class="card">
+    <div class="card-body">
+      <h5 class="card-title"><b>Server</b></h5>
+      <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, ...) </p>
+      <a href="{{< ref js-server >}}" class="stretched-link"></a>
+    </div>
+  </div>
   <div class="card">
     <div class="card-body">
       <h5 class="card-title"><b>Actors</b></h5>

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

@@ -6,6 +6,10 @@ weight: 500
 description: JavaScript Client SDK for developing Dapr applications
 ---
 
+## Introduction
+
+The Dapr Client will allow you to perform communication with the Dapr Sidecar and get access to its client facing features such as: Publishing Events, Invoking Output Bindings, State Management, Secret Management, and much more.
+
 ## Pre-requisites
 
 - [Dapr CLI]({{< ref install-dapr-cli.md >}}) installed
@@ -14,13 +18,13 @@ description: JavaScript Client SDK for developing Dapr applications
 
 ## Installing and importing Dapr's JS SDK
 
-Install the SDK with npm:
+1. First install the SDK with `npm`:
 
 ```bash
 npm i dapr-client
 ```
 
-Import the libraries:
+2. Then, Import the libraries:
 
 ```javascript
 import { DaprClient, DaprServer, HttpMethod, CommunicationProtocolEnum } from "dapr-client";
@@ -30,12 +34,10 @@ const daprPort = "3500"; // Dapr Sidecar Port of this Example Server
 const serverHost = "127.0.0.1"; // App Host of this Example Server
 const serverPort = "50051"; // App Port of this Example Server 
 
-// HTTP
-const server = new DaprServer(serverHost, serverPort, daprHost, daprPort); 
+// HTTP Example
 const client = new DaprClient(daprHost, daprPort);
 
-// GRPC 
-const server = new DaprServer(serverHost, serverPort, daprHost, daprPort, CommunicationProtocolEnum.GRPC);
+// GRPC Example
 const client = new DaprClient(daprHost, daprPort, CommunicationProtocolEnum.GRPC);
 ```
 
@@ -46,14 +48,13 @@ To run the examples, you can use two different protocols to interact with the Da
 ### Using HTTP (default)
 
 ```javascript
-import { DaprClient, DaprServer } from "dapr-client";
+import { DaprClient } from "dapr-client";
 const client = new DaprClient(daprHost, daprPort);
-const server= new DaprServer(appHost, appPort, daprHost, daprPort);
 ```
 
 ```bash
 # Using dapr run
-dapr run --app-id <example-sdk> --app-port 50051 --app-protocol http npm run start
+dapr run --app-id example-sdk --app-protocol http -- npm run start
 
 # or, using npm script
 npm run start:dapr-http
@@ -64,30 +65,25 @@ npm run start:dapr-http
 Since HTTP is the default, you will have to adapt the communication protocol to use gRPC. You can do this by passing an extra argument to the client or server constructor.
 
 ```javascript
-import { DaprClient, DaprServer, CommunicationProtocol } from "dapr-client";
+import { DaprClient, CommunicationProtocol } from "dapr-client";
 const client = new DaprClient(daprHost, daprPort, CommunicationProtocol.GRPC);
-const server= new DaprServer(appHost, appPort, daprHost, daprPort, CommunicationProtocol.GRPC);
 ```
 
 ```bash
 # Using dapr run
-dapr run --app-id <example-sdk> --app-port 50051 --app-protocol grpc npm run start
+dapr run --app-id example-sdk --app-protocol grpc -- npm run start
 
 # or, using npm script
 npm run start:dapr-grpc
 ```
 
-### DaprClient Library
-A library that provides methods for how an application communicates with the Dapr sidecar.
-
-### DaprServer Library
-A library for how an application registers bindings / routes with Dapr. The `start()` method is used to start the server and bind the routes.
-
 ## Building blocks
 
-The JavaScript SDK allows you to interface with all of the [Dapr building blocks]({{< ref building-blocks >}}).
+The JavaScript Client SDK allows you to interface with all of the [Dapr building blocks]({{< ref building-blocks >}}) focusing on Client to Sidecar features.
 
-### Invoke a service
+### Invocation API
+
+#### Invoke a Service
 
 ```javascript
 import { DaprClient, HttpMethod } from "dapr-client"; 
@@ -107,11 +103,19 @@ async function start() {
   // GET Request
   const response = await client.invoker.invoke(serviceAppId , serviceMethod , HttpMethod.GET);
 }
+
+start().catch((e) => {
+  console.error(e);
+  process.exit(1);
+});
 ```
 
-- For a full guide on service invocation visit [How-To: Invoke a service]({{< ref howto-invoke-discover-services.md >}}).
+> For a full guide on service invocation visit [How-To: Invoke a service]({{< ref howto-invoke-discover-services.md >}}).
+
+
+### State Management API
 
-### Save, get and delete application state
+#### Save, Get and Delete application state
 
 ```javascript
 import { DaprClient } from "dapr-client"; 
@@ -162,13 +166,65 @@ async function start() {
   // Delete State
   const response = await client.state.delete(serviceStoreName, "first-key-name");
 }
+
+start().catch((e) => {
+  console.error(e);
+  process.exit(1);
+});
 ```
 
-- For a full list of state operations visit [How-To: Get & save state]({{< ref howto-get-save-state.md >}}).
+> For a full list of state operations visit [How-To: Get & save state]({{< ref howto-get-save-state.md >}}).
+
+
+#### Query State API
+
+```javascript
+import { DaprClient } from "dapr-client";
+
+async function start() {
+  const client = new DaprClient(daprHost, daprPort);
+
+  const res = await client.state.query("state-mongodb", {
+    filter: {
+      OR: [
+        {
+          EQ: { "person.org": "Dev Ops" }
+        },
+        {
+          "AND": [
+            {
+              "EQ": { "person.org": "Finance" }
+            },
+            {
+              "IN": { "state": ["CA", "WA"] }
+            }
+          ]
+        }
+      ]
+    },
+    sort: [
+      {
+        key: "state",
+        order: "DESC"
+      }
+    ],
+    page: {
+      limit: 10
+    }
+  });
+
+  console.log(res);
+}
+
+start().catch((e) => {
+  console.error(e);
+  process.exit(1);
+});
+```
 
-### Publish & subscribe to messages
+### PubSub API
 
-##### Publish messages
+#### Publish messages
 
 ```javascript
 import { DaprClient } from "dapr-client"; 
@@ -186,6 +242,11 @@ async function start() {
   // Publish Message to Topic
   const response = await client.pubsub.publish(pubSubName, topic, message);
 }
+
+start().catch((e) => {
+  console.error(e);
+  process.exit(1);
+});
 ```
 
 ##### Subscribe to messages
@@ -211,9 +272,11 @@ async function start() {
 }
 ```
 
-- For a full list of state operations visit [How-To: Publish & subscribe]({{< ref howto-publish-subscribe.md >}}).
+> For a full list of state operations visit [How-To: Publish & subscribe]({{< ref howto-publish-subscribe.md >}}).
 
-### Interact with bindings
+### Bindings API
+
+#### Invoke Output Binding
 
 **Output Bindings**
 
@@ -232,32 +295,18 @@ async function start() {
 
   const response = await client.binding.send(bindingName, bindingOperation, message);
 }
-```
-
-**Input Bindings**
-
-```javascript
-import { DaprServer } from "dapr-client";;
-
-const daprHost = "127.0.0.1"; 
-const daprPort = "3500"; 
-const serverHost = "127.0.0.1";
-const serverPort = "5051";
-
-async function start() {
-  const server = new DaprServer(serverHost, serverPort, daprHost, daprPort);;
 
-  const bindingName = "my-binding-name";
-
-  const response = await server.binding.receive(bindingName, async (data: any) => console.log(`Got Data: ${JSON.stringify(data)}`));
-
-  await server.start();
-}
+start().catch((e) => {
+  console.error(e);
+  process.exit(1);
+});
 ```
 
-- For a full guide on output bindings visit [How-To: Use bindings]({{< ref howto-bindings.md >}}).
+> For a full guide on output bindings visit [How-To: Use bindings]({{< ref howto-bindings.md >}}).
 
-### Retrieve secrets
+### Secret API
+
+#### Retrieve secrets
 
 ```javascript
 import { DaprClient } from "dapr-client"; 
@@ -277,11 +326,18 @@ async function start() {
   // Retrieve all secrets from secret store
   const response = await client.secret.getBulk(secretStoreName);
 }
+
+start().catch((e) => {
+  console.error(e);
+  process.exit(1);
+});
 ```
 
-- For a full guide on secrets visit [How-To: Retrieve secrets]({{< ref howto-secrets.md >}}).
+> For a full guide on secrets visit [How-To: Retrieve secrets]({{< ref howto-secrets.md >}}).
 
-### Get configuration keys
+### Configuration API
+
+#### Get Configuration Keys
 
 ```javascript
 import { DaprClient } from "dapr-client";
@@ -297,9 +353,7 @@ async function start() {
   );
 
   const config = await client.configuration.get('config-store', ['key1', 'key2']);
-  console.log(config); 
-
-  console.log(JSON.stringify(config));
+  console.log(config);
 }
 
 start().catch((e) => {