Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update Opticks to support Optimizely's JS SDK v5.3.2 #81

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 14 additions & 0 deletions .changeset/silly-schools-hunt.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
---
'opticks': major
---

Upgrade Opticks optimizely integration to support Optimizely's JS SDK v5.3.2

Non-breaking changes:

- `getOrSetCachedFeatureEnabled` is renamed to `getToggleDecisionStatus`

Breaking changes:

- `__checkIfUserIsInAudience`, an internal from Optimizely got updated to `checkIfUserIsInAudience`. Hence you need the version 5.3.2 of the JS SDK to run this version of opticks properly
- Removed deprecated `booleanToggle` and `getEnabledFeatures` and all mentions of it
20 changes: 7 additions & 13 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,24 +14,18 @@ The library consists of two related concepts:

At the heart of our experimentation framework is the `toggle` function.

- `toggle` toggles that switch between multiple experiment variants (a/b/c/...)
- `booleanToggle` toggles that turn functionality on or off (feature flags)
A toggle allows you to switch between multiple experiment variants (a/b/c/...)
and also turn functionality on or off (feature flags)

It can be used in a variety of ways:

1. Reading the value of the toggle (boolean, or a/b/c for multi toggles )
1. Execute code or for a variant of a multi toggle
1. Execute code when a boolean toggle is on

We use React at FindHotel and some of the code examples use JSX, but the code
We use React at vio.com and some of the code examples use JSX, but the code
and concept is compatible with any front-end framework or architecture.

The `booleanToggle` is the simplest toggle type to use for feature flagging, but
it's also the least flexible. As of version 2.0 `toggle` is the default and
recommended for both a/b/c experiments and feature flags. If you're only ever
interested in feature flags, read more about [Boolean
Toggles](docs/booleanToggles.md).

### Opticks vs other experimentation frameworks

The main reason for using the Opticks library is to be able to clean your code
Expand Down Expand Up @@ -64,9 +58,9 @@ See the [Optimizely integration documentation](docs/optimizely-integration.md).

## Toggles

Toggles can be used to implement a/b/c style testing, instead of on/off values
as with `booleanToggle`, we specify multiple variants of which one is active at
any time. By convention the variants are named `a` (control), `b`, `c` etc.
Toggles can be used to implement a/b/c style MVT testing and on/off feature flags as well.
We specify multiple variants of which only one is active at any time.
By convention the variants are named `a` (control), `b`, `c` etc.

### Reading values

Expand Down Expand Up @@ -133,7 +127,7 @@ experimentId, then the values for `a`, `b`, etc.
For instance:

```
// simple boolean switch: (you could use a BooleanToggle as well)
// simple boolean switch
const shouldDoSomething = toggle('foo', false, true)

// multiple variants as strings
Expand Down
82 changes: 0 additions & 82 deletions docs/booleanToggles.md

This file was deleted.

28 changes: 7 additions & 21 deletions docs/dead-code-removal.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ winners:
- winning values are kept
- for functions, the function body is kept

For the losing boolean toggles and losing multi toggle variants:
For the losing multi toggle variants:

- losing toggles are pruned
- if the losing side is a JSXExpression, we clean it up including the variables
Expand All @@ -36,15 +36,13 @@ information.

## Running the codemods

There two codemods supplied with Opticks, one for Boolean Toggles, one for
Toggles, they can be found in the `src/transform` directory.
There is a codemod supplied with Opticks, that can be found in the `src/transform` directory.

In order to clean all "losing" branches of the code, the codemods need to know
which toggle you're modifying, whether the toggle (for Boolean Toggles) or which
variation (for Multi Toggles) "won".
which toggle you're modifying, and which variation "won".

Assuming you're running the codemods directly from the Opticks directory in your
`node_modules`, to declare the `b` side of the `foo` Multi Toggle the winner and
`node_modules`, to declare the `b` side of the `foo` Toggle the winner and
prune all losing code in the `src` directory, run the script as follows:

```shell
Expand Down Expand Up @@ -74,28 +72,17 @@ npm run clean:toggle -- --toggle=foo --winner=b

The codemods are designed to work with TypeScript and they expect the `tsx` parser to be used. You can override the parser option from the consuming project to parse code other than TypeScript, but not all patterns might be cleaned up as intended.

### Boolean Toggles

Boolean Toggle clean up works in a similar way, noting the winner accepts a
string value `'true'` or `'false'`:

```shell
npm run clean:booleanToggle -- --toggle=foo --winner='true'
```

### Overriding the library import settings

By default the codemods make assumptions on the name of the imports to clean,
namely:

```typescript
import {booleanToggle} from 'opticks'
// or
import {toggle} from 'opticks'
```

You can override these values via:
`--functionName=myLocalNameForMultiOrBooleanToggle` and
`--functionName=myLocalNameToggle` and
`--packageName=myNameForOpticks`

## Cleaning Examples and Recipes
Expand Down Expand Up @@ -132,7 +119,7 @@ const result = toggle('toggleFoo') // 'b'
```

A more interesting experiment would execute conditional code based on a multi
toggle. The trick here is that like Boolean Toggles, toggles accepts
toggle. The trick here is that toggles accept
functions that will be executed only for a particular experiment branch.

For example:
Expand Down Expand Up @@ -225,8 +212,7 @@ of business logic.
### Conditional rendering

The simplest way to render something conditionally is to assign a boolean to a
variable. Though this is probably better done with a boolean toggle, it's
possible with a toggle as well:
variable.

```typescript
const shouldRenderIcon = toggle('SomethingWithIcon', false, true)
Expand Down
6 changes: 2 additions & 4 deletions docs/optimizely-integration.md
Original file line number Diff line number Diff line change
Expand Up @@ -93,11 +93,9 @@ forwarded to Optimizely with each call.
### The DataFile

The Opticks Optimizely integration makes some assumptions on how the experiments
are set up. Optimizely supports two types of flags, "Feature Flags" (Boolean
Toggles in Opticks) and Experiments (Multi Toggles in Opticks).
are set up. Optimizely supports two types of flags, "Feature Flags" and Experiments .
The Opticks library uses certain conventions to wrap both concepts in a
predictable API, where experiment variations are in the `a`, `b`, `c` format and
Boolean Toggles return only `true` or `false`.
predictable API, where experiment variations are in the `a`, `b`, `c` format.

The following is subject to change, but right now Opticks uses both Feature
Flags and the Experiments concepts of the Optimizely SDK which means you'll need
Expand Down
10 changes: 0 additions & 10 deletions docs/simple-integration.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,16 +7,6 @@ concern itself with generating a list of toggles or experiments, as there are
many libraries and services out there doing it well already. It should be easy
to write an adapter for whichever experimentation service or tool you're using.

## Boolean Toggles

### Setting Toggles

```
setBooleanToggles({ foo: true, bar: false })
```

## Multi Toggles

### Setting Toggles

```
Expand Down
4 changes: 2 additions & 2 deletions packages/lib/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,10 @@
"author": "Jop de Klein",
"license": "ISC",
"peerDependencies": {
"@optimizely/optimizely-sdk": "~4.4.3"
"@optimizely/optimizely-sdk": "5.3.2"
},
"devDependencies": {
"@optimizely/optimizely-sdk": "~4.4.3",
"@optimizely/optimizely-sdk": "5.3.2",
"@types/jest": "^29.4.0",
"jest": "^29.4.0",
"ts-jest": "^29.0.5",
Expand Down
58 changes: 0 additions & 58 deletions packages/lib/src/core/booleanToggle.test.ts

This file was deleted.

24 changes: 0 additions & 24 deletions packages/lib/src/core/booleanToggle.ts

This file was deleted.

Loading