Skip to content

Commit 9dd3ac9

Browse files
authored
docs: add web client docs (#573)
## This PR Adds docs to JavaScript web-client sdk regarding flag evaluation flow and context. ### Related Issues Closes #570 ### Notes Mermaid diagrams were used but I'm not sure if they are currently supported. --------- Signed-off-by: Luiz Ribeiro <ltrindaderibeiro@gmail.com>
1 parent ad8e6c5 commit 9dd3ac9

File tree

1 file changed

+38
-3
lines changed

1 file changed

+38
-3
lines changed

packages/client/README.md

Lines changed: 38 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ See [here](https://open-feature.github.io/js-sdk/modules/OpenFeature_Web_SDK.htm
9191
| Status | Features | Description |
9292
| ------ | ------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
9393
|| [Providers](#providers) | Integrate with a commercial, open source, or in-house feature management tool. |
94-
|| [Targeting](#targeting) | Contextually-aware flag evaluation using [evaluation context](https://openfeature.dev/docs/reference/concepts/evaluation-context). |
94+
|| [Targeting](#targeting-and-context) | Contextually-aware flag evaluation using [evaluation context](https://openfeature.dev/docs/reference/concepts/evaluation-context). |
9595
|| [Hooks](#hooks) | Add functionality to various stages of the flag evaluation life-cycle. |
9696
|| [Logging](#logging) | Integrate with popular logging packages. |
9797
|| [Named clients](#named-clients) | Utilize multiple providers in a single application. |
@@ -116,7 +116,38 @@ OpenFeature.setProvider(new MyProvider())
116116
In some situations, it may be beneficial to register multiple providers in the same application.
117117
This is possible using [named clients](#named-clients), which is covered in more detail below.
118118

119-
### Targeting
119+
### Flag evaluation flow
120+
121+
When a new provider is added to OpenFeature client the following process happens:
122+
123+
```mermaid
124+
sequenceDiagram
125+
autonumber
126+
Client-->+Feature Flag Provider: ResolveAll (context)
127+
Feature Flag Provider-->-Client: Flags values
128+
```
129+
130+
In (1) the Client sends a request to the provider backend in order to get all values from all feature flags that it has.
131+
Once the provider backend replies (2) the client holds all flag values and therefore the flag evaluation process is synchronous.
132+
133+
In order to prevent flag evaluation to the default value while flags are still being fetched, it is highly recommended to only look for flag value after the provider has emitted the `Ready` event.
134+
The following code snippet provides an example.
135+
136+
```ts
137+
import { OpenFeature, ProviderEvents } from '@openfeature/web-sdk';
138+
139+
OpenFeature.setProvider( /*set a provider*/ );
140+
141+
// OpenFeature API
142+
OpenFeature.addHandler(ProviderEvents.Ready, () => {
143+
const client = OpenFeature.getClient();
144+
const stringFlag = client.getStringValue('string-flag', "default value"))
145+
146+
//use stringFlag from this point
147+
});
148+
```
149+
150+
### Targeting and Context
120151

121152
Sometimes, the value of a flag must consider some dynamic criteria about the application or user, such as the user's location, IP, email address, or the server's location.
122153
In OpenFeature, we refer to this as [targeting](https://openfeature.dev/specification/glossary#targeting).
@@ -127,6 +158,10 @@ If the flag management system you're using supports targeting, you can provide t
127158
await OpenFeature.setContext({ origin: document.location.host });
128159
```
129160

161+
Context is global and setting it is `async`.
162+
Providers may implement an `onContextChanged` method that receives the old context and the newer one.
163+
This method is used internally by the provider to detect if, given the context change, the flags values cached on client side are invalid. If needed a request will be made to the provider with the new context in order to get the correct flags values.
164+
130165
### Hooks
131166

132167
[Hooks](https://openfeature.dev/docs/reference/concepts/hooks) allow for custom logic to be added at well-defined points of the flag evaluation life-cycle
@@ -161,7 +196,7 @@ import type { Logger } from "@openfeature/web-sdk";
161196
// The logger can be anything that conforms with the Logger interface
162197
const logger: Logger = console;
163198

164-
// Sets a global logger
199+
// Sets a global logger
165200
OpenFeature.setLogger(logger);
166201

167202
// Sets a client logger

0 commit comments

Comments
 (0)