HTML5 Zone is brought to you in partnership with:

Victor is a ruby developer at Nulogy. He has worked a lot with Java and Ruby platforms. Being a big fan of domain specific languages he likes to blog about implementing them using Groovy, Ruby or Clojure. Victor is a DZone MVB and is not an employee of DZone and has posted 40 posts at DZone. You can read more from them at their website. View Full User Profile

Functional Reactive Programming in Dart

07.18.2013
| 1802 views |
  • submit to reddit

Functional Reactive Programming (FRP) is a paradigm for modeling interactions in a reactive style. It enables rich composition and allows for the testability of complex interactions. Sean Kirby and I put together a small library prototype (available at: https://github.com/vsavkin/frp_dart) to show how this paradigm can be used in Dart.

What is Functional Reactive Programming?

As I said, it is a programming paradigm that is built on top of the following:

  1. The concept of streams, which model sequences of discrete events.
  2. The concept of properties, which model continuous values.

An example of a stream would be all keyups triggered on some input element. The input element’s text can be modelled as a property.

Adding Property

Since the Dart SDK gives us only one of the two basic FRP abstractions, streams, we had to implement the property ourselves.

abstract class Property {
  //the current value of the property at any given moment in time
  get value;

  //the stream you can subscribe to to be notified when the property changes
  Stream changes;

  //a shortcut to attach a listener to the changes stream
  void onChange(Function listener);

  //broadcasts the current values to all the listeners
  void notify();

  //creates a derived property
  Property derive(Function mapper);
}

Creating Properties

A property can be created using one of the following ways:

Using a constant

var propertyThatIsAlways10 = fromConst(10)

Using an initial value and a stream

targetValue(_) => _.target.value;
var login = fromStream("", 
loginField.onKeyUp.map(targetValue));

By deriving a property

bool isPresent(String _) => _.trim().isNotEmpty;
var loginPresent = login.derive(isPresent);

Using a function

var coin = new ComputedProperty(() => new Random().nextInt(1));

Combining Properties

What really makes FRP interesting is that properties can be composed of other properties. One example would be joining a bunch of them together.

var password = fromStream("", 
passwordField.onKeyUp.map(targetValue));
var passwordConfirmation = fromStream("", 
passwordConfirmationField.onKeyUp.map(targetValue));

var tuples = join([password, passwordConfirmation]);

At the beginning, the value of the tuples property is: ["", ""]. If I type ‘a’ into the password field, the value will change to ["a", ""]. Similarly, after entering ‘b’ into the confirmation field, the value will become ["a", "b"].

There is a bunch of combinators that will be used in pretty much any interaction. One of them is and.

var loginPresent = ...;
var passwordPresent = ...;
var bothFieldsPresent = and([loginPresent, passwordPresent]);

Example

Now, having gone through the basics of functional reactive programming, let’s see how we can use it for modelling a simple interaction.

Suppose we have a sign up form.

Sign Up Form

We would like to enable the button when the login field is present, the password field is present, and the password and confirmation fields match.

First of all, let’s define the form’s interface.

abstract class SignUpForm {
  Stream<String> get loginFieldValues;
  Stream<String> get passwordFieldValues;
  Stream<String> get confirmationFieldValues;
  void toggleButton(bool enabled);
}

This separates the DOM specific code from the interaction itself, which allows the replacement of the real form with a test double when needed.

Second, import the FRP library.

import 'package:frp/frp.dart' as _;

Next, implement the interaction itself.

signUpInteraction(SignUpForm form){
  var password = _.fromStream("", form.passwordFieldValues);
  var passwordPresent = password.derive(isPresent);

  var confirmation = _.fromStream("", form.confirmationFieldValues);
  var passwordConfirmed = _.same([password, confirmation]);

  var login = _.fromStream("", form.loginFieldValues);
  var loginPresent = login.derive(isPresent);

  var validForm = _.and([loginPresent, passwordPresent, passwordConfirmed]);

  validForm.onChange(form.toggleButton);
}

Finally, we need to instantiate the form and call the interaction.

class DomSignUpForm implements SignUpForm {
  Element form;
  DomSignUpForm(this.form);

  get loginFieldValues         => _fieldValues("input[name=login]");
  get passwordFieldValues      => _fieldValues("input[name=password]");
  get confirmationFieldValues  => _fieldValues("input[name=confirmation]");
  toggleButton(enabled)        => form.query("input[type=button]").disabled = !enabled;

  _fieldValues(selector) => form.query(selector).onKeyUp.map((_) => _.target.value);
}

main(){
  signUpInteraction(new DomSignUpForm(query("form")));
}

Wrapping Up

  • Functional reactive programming can be used for expressing complex UI interactions in a declarative way.

  • Properties can be created from streams and derived from other properties. In addition, they can be combined using such combinators as join.

  • The library presented in this article is just a prototype, but since the Dart SDK provides streams, building a production-ready library similar to Bacon.JS should not be very difficult.

Read More About Dart

Read more about Dart at engineering.nulogy.com.

Published at DZone with permission of Victor Savkin, author and DZone MVB. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)