npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@optimizely/js-web-sdk

v3.0.1-beta1

Published

Browser wrapper for Optimizely's Javascript SDK

Downloads

276

Readme

JS Web SDK

What is it

  • A backwards compatible wrapper around the JavascriptSDK for usage in web browsers
  • Provides extendible datafile loading and caching strategies
  • Provides mechanisms for only parts of the page to block rendering until Optimizely is loaded (supplying a maximum timeout)
  • All new features are opt-in, can be used exactly the same way as JavascriptSDK if desired
  • Enqueue track calls that happen before the datafile is downloaded

Getting Started

Prerequisites

  • Like the JavaScript SDK, this wrapper requires an ES5-compatible environment.
  • This wrapper also requires a native ES6 Promise implementation. If your environment does not support Promises, you must set up a Promise polyfill.

Installation

npm install @optimizely/js-web-sdk

Usage

// ES Modules
import * as optimizelySDK from '@optimizely/js-web-sdk'

// CommonJS
const optimizelySDK = require('@optimizely/js-web-sdk')
<!-- UMD script, assigns to window.jsWebSdk -->
<script src="https://unpkg.com/@optimizely/js-web-sdk/dist/js-web-sdk.browser.umd.min.js"></script>

Datafile loading / management

Load datafile already on the page

This is the ideal case and prevents a lot of timing issues and complexity, however we realize not all customers will have the ability to this.

import * as optimizelySDK from '@optimizely/js-web-sdk'
const optimizely = optimizelySDK.createInstance({
  datafile: window.datafile,
})
// all calls can happen immediately after (sync)
optimizely.activate('my-exp', 'user1')

Load datafile by SDK Key

By providing the sdkKey option to createInstance the SDK will automatically fetch the datafile. If a cached datafile exists it will use the cached version. Decisions made after the fresh datafile has loaded will use the new datafile.

Asnyc load and wait until datafile is loaded

import * as optimizelySDK from '@optimizely/js-web-sdk'
const optimizely = optimizelySDK.createInstance({
  sdkKey: 'GaXr9RoDhRcqXJm3ruskRa',
})

// At this point optimizely can be used, on first page load the datafile will not be fetched and methods will no-op
// On second page load it will use the cached datafile immediately
//
initApp()

optimizely.onReady() to block rendering

By using await optimizely.onReady() you can gaurantee code wont be run until the datafile is downloaded

import * as optimizelySDK from '@optimizely/js-web-sdk'
const optimizely = optimizelySDK.createInstance({
  sdkKey: 'GaXr9RoDhRcqXJm3ruskRa',
})

await optimizely.onReady()
// at this point datafile is gauranteed to be loaded
initApp()

However, the above example isn't great because Optimizely could time out due to network connectivity issues. By passing a timeout to optimizely.onReady() we can gaurantee that Optimizely won't block the page for more than X milliseconds.

import * as optimizelySDK from '@optimizely/js-web-sdk'
const optimizely = optimizelySDK.createInstance({
  sdkKey: 'GaXr9RoDhRcqXJm3ruskRa',
})

// Dont wait more than 200ms, if there is a cached datafile this will immediately resolve
await optimizely.onReady({ timeout: 200 })


// you can also use the Promise API
optimizely.onReady({ timeout: 200 }).then(() => {
  initApp()
})

It's worth noting that optimizely.onReady can be called as many times, once the datafile has downloaded this will always return a resolved promise. This is a powerful mechanism to build UI components, as a UI component can be configured to block up to X milliseconds waiting for Optimizely to load, while other parts of the UI are unaffected.

Second page load

By default loading the datafile by URL will store the contents of the datafile in localStorage, on second page load we are guaranteed to have synchronous access to the datafile.

The underlying DatafileManager will also make a background request to get an updated datafile, however that will not be registered until the next instantiation of Optimizely via optimizely.createInstance which is usually the next page load.

When using optimizely async the user will only have to pay the loading cost once on first page load, subsequent page loads are always synchronous

Using React

This SDK can be used stand alone to bolster the current javascript-sdk with things like automatic datafile loading and caching. It can also be used with the ReactSDK to simplify Feature Flagging and AB Testing in React.

Credits

First-party code (under lib/ and dist/) is copyright Optimizely, Inc. and contributors, licensed under Apache 2.0.

Additional Code

Prod dependencies are as follows:

{
  "[email protected]": {
    "licenses": [
      "AFLv2.1",
      "BSD"
    ],
    "publisher": "Kris Zyp",
    "repository": "https://github.com/kriszyp/json-schema"
  },
  "[email protected]": {
    "licenses": "MIT",
    "publisher": "John-David Dalton",
    "repository": "https://github.com/lodash/lodash"
  },
  "[email protected]": {
    "licenses": "MIT*",
    "repository": "https://github.com/perezd/node-murmurhash"
  },
  "[email protected]": {
    "licenses": "BSD-3-Clause",
    "publisher": "Alexandru Mărășteanu",
    "repository": "https://github.com/alexei/sprintf.js"
  },
  "[email protected]": {
    "licenses": "MIT",
    "repository": "https://github.com/kelektiv/node-uuid"
  }
}

To regenerate this, run the following command:

npx license-checker --production --json | jq 'map_values({ licenses, publisher, repository }) | del(.[][] | nulls)'

Contributing

Please see CONTRIBUTING