experiment ideas

app-alt.js

/**
 * Module dependencies
 */
var express = require("express")
  , pivot = require("pivot");

var app = module.exports = express();

/**
 * Experiments
 */
function loginButtonColor(req, res, next) {
  // Change the login button color
  res.feature("loginButtonColor", "red", function(){
    res.locals.loginButtonColor = "red";
  });
  
  res.feature("loginButtonColor", "blue", function(){
    res.locals.loginButtonColor = "blue";
  });
  next();
}

function userData(req, res, next) {
  res.feature("asyncExample", "api1", function(done){
    // Make api1 call
    res.locals.user = user;
    done();
  });
  res.feature("asyncExample", "api2", function(done){
    // Make api1 call
    res.locals.user = user;
    done();
  });
  next();
}

var experiments = pivot();

experiments.use(loginButtonColor);
experiments.use(userData);

/**
 * Configure our app
 */
app.configure(function(){
  app.use(experiments);
});

app.get("/", function(req, res, next){
  res.render("index");
});

app.get("/ad-hoc", function(req, res, next) {
  // We can do ad-hoc features
  res.feature("welcomeMessage", "test1", function() {
    res.locals.welcomeMessage = "Hello!";
  });
  res.feature("welcomeMessage", "test2", function() {
    res.locals.welcomeMessage = "Welcome Friend!";
  });

  res.render("ad-hoc");
});

app.js

/**
 * Module dependencies
 */
var express = require("express")
  , pivot = require("pivot");

var app = module.exports = express();

/**
 * Experiments
 */
function loginButtonColor(req, res, next) {
  // Change the login button color
  res.feature("loginButtonColor", function(button){
    
    button.on("red", function(){
      res.locals.loginButtonColor = "red";
    });
    
    button.on("blue", function(){
      res.locals.loginButtonColor = "red";
    });
    
  });
}

function logoutButtonColor(req, res, next) {
  // Change the login button color
  res.feature("logoutButtonColor", function(button){
    
    button.on("red", function(){
      res.locals.logoutButtonColor = "red";
    });
    
    button.on("blue", function(){
      res.locals.logoutButtonColor = "red";
    });
    
  });
}

function userData(req, res, next) {
  res.feature("asyncExample", function(userData){
    
    userData.on("api1", function(done){
      // Make api1 call
      res.locals.user = user;
      done();
    });
    
    userData.on("api2", function(done){
      // Make api2 call
      res.locals.user = userFromApi;
      done();
    });
    
  });
  next();
}

var experiments = pivot();

experiments.use(loginButtonColor);
experiments.use(logoutButtonColor);
experiments.use(userData);

/**
 * Configure our app
 */
app.configure(function(){
  app.use(experiments);
  app.use("/experiments", experiments.ui);
});

app.get("/", function(req, res, next){
  res.render("index");
});

app.get("/ad-hoc", function(req, res, next) {
  // We can do ad-hoc features
  res.feature("ad-hoc", function(adHoc) {
    
    adHoc.on("test1", function() {
      res.locals.welcomeMessage = "Hello!";
    });
    
    adHoc.on("test2", function() {
      res.locals.welcomeMessage = "Welcome Friend!";
    });
    
  });

  res.render("ad-hoc");
});

embedded-exp.js

function embedded(req, res, next) {
  // Change the experience based on their group
  res.feature("betaUser", function(userType){
    userType.on("beta", "beta", function(){

      // switch a feature for beta users
      res.feature("betaFeature", function(betaFeature) {
        betaFeature.on("test1", function() {
          res.locals.count = 1;
        });
        betaFeature.on("test2", function() {
          res.locals.count = -1;
        });
      });

    });
    userType.on("non-beta", "*", function(){
      res.locals.count = 0;
    });
  });
}

view-alt.ejs

<div class="login">

  <% feature("loginButtonColor", "red", function() { %>
    <button class="btn btn-red">Login</button>
  <% }); %>

  <% feature("loginButtonColor", "blue", function() { %>
    <button class="btn btn-blue">Login</button>
  <% }); %>

</div>

view-alt.hbs

<div class="login">

  {{ feature "loginButtonColor" "red" }}
    <button class="btn btn-red">Login</button>
  {{ /feature }}

  {{ feature "loginButtonColor" "blue" }}
    <button class="btn btn-blue">Login</button>
  {{ /feature }}

</div>

view-alt.jade

.login
  - feature("loginButtonColor", "red", function(){
    button.btn.btn-red Login
  - });
  - feature("loginButtonColor", "blue", function(){
    button.btn.btn-blue Login
  - });

view.eco

<div class="login">
  <% @feature "loginButtonColor", (exp)-> %>

    <% exp.on "red", ()-> %>
      <button class="btn btn-red">Login</button>
    <% end %>

    <% exp.on "blue", ()-> %>
      <button class="btn btn-blue">Login</button>
    <% end %>

  <% end %>
</div>

view.ejs

<div class="login">
  <% feature("loginButtonColor", function(exp) { %>

    <% exp.on("red", function(){%>
      <button class="btn btn-red">Login</button>
    <% }); %>

    <% exp.on("blue", function(){%>
      <button class="btn btn-blue">Login</button>
    <% }); %>

  <% }); %>
</div>

view.hbs

<div class="login">
  {{ feature "loginButtonColor" }}

    {{ on "red" }}
      <button class="btn btn-red">Login</button>
    {{ /on }}

    {{ on "blue" }}
      <button class="btn btn-blue">Login</button>
    {{ /on }}

  {{ /feature }}
</div>

view.jade

.login
  - feature("loginButtonColor", function(exp){
  -   exp.on("red", function(){
        button.btn.btn-red Login
  -   });
  -   exp.on("blue", function(){
        button.btn.btn-blue Login
  -   });
  - });

depending on how some of these rendering engines work, the alternative syntax wouldn't work since pivot would have to scan the entire file and look up all of the variants registered. I like the first syntax since it contains the variants to a limited scope.

now that i look at it, it would be impossible for the alt syntax to work :(