What is a program without side effects? A program that does nothing.

Complementing our code with functional code with unavoidable side-effects can be called "mostly functional programming." Using multiple paradigms in the same codebase and applying them where they are most optimal is the best approach. Mostly functional programming is how even the pure, traditional functional programs are modelled: keep most of the logic in pure functions and interface with imperative code.

And this is how we're going to write a little application of our own.

In this example, we have a boss that tells us that we need a web application for our company that tracks the status of the employees' availability. All the employees at this fictional company only have one job: using our website. Staff will sign in when they get to work and sign out when they leave. But that's not enough, it also needs to automatically update the content as it changes, so our boss doesn't have to keep refreshing the pages.

We're going to use Lazy.js as our functional library. And we're also going to be lazy: instead of worrying about handling all the users logging in and out, WebSockets, databases, and more, we'll just pretend there's a generic application object that does this for us and just happens to have the perfect API.

So for now, let's just get the ugly parts out of the way, the parts that interface and create side-effects.

function Receptor(name, available){
  this.name = name;
  this.available = available; // mutable state
  this.render = function(){
    output = '<li>';
    output += this.available ? 
      this.name + ' is available' : 
      this.name + ' is not available';
    output += '</li>';
    return output;
  }
}
var me = new Receptor;
var receptors = app.getReceptors().push(me);
app.container.innerHTML = receptors.map(function(r){
  return r.render();
}).join(''),

This would be sufficient for just displaying a list of availabilities, but we want it to be reactive, which brings us to our first obstacle.

By using the Lazy.js library to store the objects in a sequence, which won't actually compute anything until the toArray() method is called, we can take advantage of its laziness to provide a sort of functional reactive programming.

var lazyReceptors = Lazy(receptors).map(function(r){
  return r.render();
});
app.container.innerHTML = lazyReceptors.toArray().join(''),

Because the Receptor.render() method returns new HTML instead of modifying the current HTML, all we have to do is set the innerHTML parameter to its output.

We'll also have to trust that our generic application for user management will provide callback methods for us to use.

app.onUserLogin = function(){
  this.available = true;
  app.container.innerHTML = lazyReceptors.toArray().join(''),
};
app.onUserLogout = function(){
  this.available = false;
  app.container.innerHTML = lazyReceptors.toArray().join(''),
};

This way, any time a user logs in or out, the lazyReceptors parameter will be computed again and the availability list will be printed with the most recent values.

window.addEventListener('focus', function(event) {
  me.available = true;
  app.setReceptor(me.name, me.available); // just go with it
  container.innerHTML = lazyReceptors.toArray().join(''),
});
window.addEventListener('blur', function(event) {
  me.available = false;
  app.setReceptor(me.name, me.available);
  container.innerHTML = lazyReceptors.toArray().join(''),
});

var focusedReceptors = Lazy.events(window, "focus").each(function(e){
  me.available = true;
  app.setReceptor(me.name, me.available);
  container.innerHTML = lazyReceptors.toArray().join(''),
});
var blurredReceptors = Lazy.events(window, "blur").each(function(e){
  me.available = false;
  app.setReceptor(me.name, me.available);
  container.innerHTML = lazyReceptors.toArray().join(''),
});

var timeout = null;
var inputs = Lazy.events(window, "mousemove").each(function(e){
  me.available = true;
  container.innerHTML = lazyReceptors.toArray().join(''),
  clearTimeout(timeout);
  timeout = setTimeout(function(){
    me.available = false;
    container.innerHTML = lazyReceptors.toArray().join(''),
  }, 1800000); // 30 minutes
});