Article

2min read

How We Made AB Tasty’s Feature Experimentation SDK OpenFeature-Compatible — And Even Easier to Adopt

Why We Chose to Adopt OpenFeature

At AB Tasty, we believe a great product experience starts with smooth feature delivery and personalization. Our Feature Experimentation SDK empowers tech teams to control feature rollout and tailor interfaces to each visitor.

But in today’s complex, fast-moving ecosystems, interoperability is key. That’s where OpenFeature comes in.

What is OpenFeature?

OpenFeature is an open-source specification that defines a standardized API for feature flag management. It lets developers manage feature flags consistently across tools and platforms.

Why it matters:

  • Interoperability: A unified API across providers.
  • No vendor lock-in: Switch tools without rewriting business logic.
  • Thriving community: Backed by CNCF and designed for cloud-native development.

What We Built: The Official AB Tasty OpenFeature Provider

To ensure our SDK plays well with OpenFeature, we created an official provider:
@flagship.io/openfeature-provider-js

You can now use our feature flags in any OpenFeature-compliant setup, like this simple Node.js example:


JavaSvript
const express = require("express");
const { ABTastyProvider } = require("@flagship.io/openfeature-provider-js");
const { OpenFeature } = require("@openfeature/server-sdk");

const app = express();
app.use(express.json());

const provider = new ABTastyProvider("<ENV_ID>", "<API_KEY>");
await OpenFeature.setProviderAndWait(provider);

app.get("/item", async (req, res) => {
  const evaluationContext = {
    targetingKey: "visitor-id",
    fs_is_vip: true,
  };

  OpenFeature.setContext(evaluationContext);
  const client = OpenFeature.getClient();

  const fsEnableDiscount = await client.getBooleanValue("fs_enable_discount", false, evaluationContext);
  const fsAddToCartBtnColor = await client.getStringValue("fs_add_to_cart_btn_color", "blue", evaluationContext);

  res.json({
    product: {
      name: "AB Tasty Feature Experimentation T-shirt",
      price: 20,
      discountEnabled: fsEnableDiscount,
      btnColor: fsAddToCartBtnColor,
    },
  });
});

app.listen(3000, () => console.log("Server running on port 3000"));

Even Smarter: Our Built-In Codebase Analyzer

We’ve made onboarding even easier. Our CLI tool, which is also bundled with the AB Tasty VSCode Extension, includes a powerful codebase analyzer.

What it does:

  • Scans your codebase
  • Detects flags and usage from other providers (e.g., Optimizely, Kameleoon, etc.)
  • Identifies if you’re already using OpenFeature
  • Automatically generates corresponding flags in Flagship

Example: Already using OpenFeature with a competitor? Just plug in our CLI, and AB Tasty will detect your flags and preconfigure them for you — saving you hours of manual setup.

What This Means for You

By supporting OpenFeature, we offer:

  • Faster integration with your current stack
  • Greater flexibility in your feature flag strategy
  • Portability across cloud platforms
  • Alignment with open, modern dev practices

Quick Integration Guide

1. Install dependencies


Shell
npm install @openfeature/server-sdk
npm install @flagship.io/openfeature-provider-js

2. Initialize the provider


JavaScript
const { ABTastyProvider } = require("@flagship.io/openfeature-provider-js");
const { OpenFeature } = require("@openfeature/server-sdk");

const provider = new ABTastyProvider("<ENV_ID>", "<API_KEY>");
await OpenFeature.setProviderAndWait(provider);

3. Define the evaluation context


JavaScript
const evaluationContext = {
  targetingKey: "visitor-id",
  fs_is_vip: true,
};

OpenFeature.setContext(evaluationContext);

4. Evaluate your flags


JavaScript
const client = OpenFeature.getClient();

const fsEnableDiscount = await client.getBooleanValue(
  "fs_enable_discount",
  false,
  evaluationContext
);

const fsAddToCartBtnColor = await client.getStringValue(
  "fs_add_to_cart_btn_color",
  "blue",
  evaluationContext
);

Want to Learn More?

Check out these resources for more information about Feature Experimentation and OpenFeature.

Subscribe to
our Newsletter

bloc Newsletter EN

We will process and store your personal data to respond to send you communications as described in our  Privacy Policy.

Article

3min read

Tag V4: Elevating your Experience Building with an Improved Modification Engine 

At AB Tasty, we love providing our users with the best possible experience by making it easy to create and execute optimization campaigns. That’s why we recently significantly improved our Modification Engine, one of the core components of our Visual Editor and our JavaScript tag.

The Modification Engine is the system that dynamically alters our client’s website content and appearance without requiring direct changes to the source code. It applies the modifications defined in campaigns by injecting the changes via JavaScript on the visitor’s browser.

Here are the two big improvements:

  • Maximum compatibility with our clients’ websites, including Shadow DOM and iFrames support.
  • Optimized performance for faster loading and smoother execution of modifications, enhancing the experience for visitors on our clients’ sites.

Enhanced Compatibility with Modern Technologies

Our clients are developing increasingly complex websites, utilizing technologies like Shadow DOM and iFrames to structure their web applications. Now, our Visual Editor is compatible with these technologies so you can create, modify, and manage content to deliver the latest in experiences to your visitors. 

Significant Performance Improvements

Our teams have worked extensively to optimize the loading and execution times of the Modification Engine, leading to tangible improvements in overall site performance. (If you don’t believe us, check out this blog on how we’re 4 times faster than other solutions)

Reduced Impact on Website Performance

  • A lighter JavaScript tag: The overall impact of AB Tasty has already been reduced by 2.3 KB, with further optimizations planned.
  • Less impact on overall performance: We observed an improvement up to 11% in website performance, depending on the number of modifications applied.

Optimized Loading and Execution Times

  • More efficient JavaScript execution: The average execution time for modifications is 30% to 55% faster.
  • Decreased “Render Blocking Time”: Improvements range from 11% to 50%, with even greater benefits for larger campaigns.
  • No longer classified as a “Long main-thread task”

Faster Application and Reapplication of Modifications

Another key improvement in this update is the speed of applying and reapplying modifications:

  • Applying modifications is 2.2 to 2.75 times faster.
  • Reapplying modifications is 4 to 5.7 times faster, a major advantage for dynamic A/B testing.

Real-World Examples

We conducted tests on various campaigns to measure these improvements in action:

  • Campaign with 19 Modifications:
    • Total execution time: 1.79ms (down from 3.96ms, 2.2 times faster).
    • Reapplying time after a modification is removed: 0.58ms (down from 3.34ms, 5.7 times faster).
    • up to 5% improvement in overall site performance.
  • Campaign with 64 Modifications:
    • Total application time: 4ms (down from 10-11ms, 2.5 to 2.75 times faster).
    • Reapplying time after a modification is removed: 2.7ms (down from 11-12ms, 4 to 4.4 times faster).
    • Up to 11% improvement in overall site performance.

With these enhancements, our newest Modification Engine version is now more robust, faster, and better suited for modern websites.

You benefit from a smoother user experience, and your visitors enjoy faster loading times. And this is just the beginning: stay tuned for even more powerful optimizations in the coming months.

Feel free to test these improvements and share your feedback with us!