(Functional) Reactive Web Development

Steven Byrnes

November 19, 2014

Abstract

We will look at a few language and library options for doing (functional) reactive web development, including Elm, RxJS, and BaconJS. F# may make a brief guest appearance in the stack as well.

Prologue

What is (F)RP?

Reactive Programming

Definition

Functional reactive programming (FRP) is a programming paradigm for reactive programming using the building blocks of functional programming. FRP has been used for programming graphical user interfaces (GUIs), robotics, and music, aiming to simplify these problems by explicitly modeling time.

— Wikipedia

What?

Continuous vs discrete

Push vs pull

Different constraints

Why?

Declarative rather than imperative
Easier to reason about
Composability

Act 1 - “Old Sk00l”

A Simple Model

Act 1 : Set Up

The canonical example for MVC frameworks is the todo app. Let’s try a couple of other things…

Google has something called Snippets, which they use internally for people to record what they’ve done. Think of a combination of status reports, progress meetings, and a work diary.

A commercial offering that attempts to produce this is iDoneThis.

Let’s create a simple thing. Call it Schnippets.

Basically, there is 1 main model: status report. To keep it simple, let’s just take a date and a big block of text. Perhaps we can treat it as markdown. We’ll call this a Schnippet.

There are other concepts, like a user. Someone who logs into the system. They have an email address so we can bug them. We can add things like following relationships. Perhaps tags for the person or the schnippet. But to keep it simple, I’m just going to stick with the base model.

Just HTML

jQuery

$("button#specialness")
  .html("Don't click here!")
  .on( "click", somethingMagickal );

For example:

    $("#save-schnippet").on("click", function(event) {
        event.preventDefault();
        alert('you entered: ' + $("#new-schnippet").val());
    });

While jQuery isn’t “reactive”, it isn’t procedural either. One could consider it a fluent interface. It lets us map across selectors and do things. So in that sense, it’s functional. Unfortunately, it doesn’t go all the way. So you still end up with a tangled mess of callbacks.

As an aside: since this is a presentation about web development, I’m not going to get into any backend API. So I’m going to use Firebase, one of the database-as-a-services out there. (And which recently was bought by Google.)

Ok… back to the code. So, this isn’t too bad. What are some of the problems?

It has callbacks. You can start running into issues with nested callbacks if you have async behavior in your callbacks. That can get messy quickly.

You’re dealing with two languages: HTML and Javascript. Actually 3 if you include CSS. There are HTML tags in the Javascript. You can mitigate it with templates, but still not ideal. Also, nothing is making sure your selectors are named the same in your code and in your markup.

No composability. So I’m repeating HTML over and over again. Again, templates can help with that.

And some issues fundamental to Javascript:

Lack of type safety.

Lack of property and selector safety. I can type the wrong property and it will still run… poorly. It just won’t work the way you want to.

Now, some of these issues we don’t have a good answer for. Although certain IDEs are smart enough to tell you you’re messing up. (For example, some of the Jetbrains IDEs.)

$  diff -u act1-html/schnippets.html act1-jquery/schnippets.html
     <link rel="stylesheet" href="../schnippets.css">
+    <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
+    <script type="text/javascript" src='https://cdn.firebase.com/js/client/1.1.1/firebase.js'></script>
+    <script type="text/javascript" src="application.js"></script>
   </head>

Act 2 - Reactive

RxJS

\(RxJS = Observables + LINQ + Schedulers\)
http://reactive-extensions.github.io/RxJS/

Act 2 : Confrontation: Where we use an existing language (Javascript), and add a Reactive library.

Can help with callback hell. Client and server side. Same as Reactive extensions you can get for .NET, Java, etc.

The Reactive Extensions (Rx) is a library for composing asynchronous and event-based programs using observable sequences and LINQ-style query operators.

What is an Observable? On one end, you have the iterable pattern, which is pull-based. On the other end, you have the observer pattern, which is push based. The Observable in Rx is like the Observer pattern. It defines a subscriber that is called on each message, on error, and when complete.

LINQ? In the sense of the querying. Not the language extensions you get in C#.

What is a scheduler? Adds concurrency. (Although typically there are limited opportunities to do that in browser.)

RxJS lets you wrap many things in an Observable. You can wrap events (native, jQuery, Angular, etc). Anything that returns a Promises A+ promise. For example, from a jQuery AJAX call.

For example, autocomplete becomes pretty simple.

Example

function searchWikipedia (term) {
   return $.ajax({
     url: 'http://en.wikipedia.org/w/api.php',
     dataType: 'jsonp',
     data: {
       action: 'opensearch',
       format: 'json',
       search: global.encodeURI(term)
     }
   }).promise();
}

var keyup = Rx.Observable.fromEvent($('#textInput'), 'keyup')
      .map((e) => e.target.value)        // Project the text from input
      .filter((text) => text.length > 2) // Text is longer than 2 chars
      .throttle(750)                     // Pause for 750ms
      .distinctUntilChanged();           // Only if the value changed

var searcher = keyup.flatMapLatest(searchWikipedia);

var subscription = searcher.subscribe( (data) => console.log(data) );

Bacon.JS

BaconJS?

Bacon.JS

No… neither of those…

http://baconjs.github.io/

Differences

RxJS:

var keyup = Rx.Observable.fromEvent($('#textInput'), 'keyup')

BaconJS:

var keyup = $('#textInput').asEventStream('keyup')

BaconJS - Demo

Act 3 - First Class FRP

Elm

First order FRP
Haskell-like syntax (but not Haskell)
Code hot swapping! In the browser!
Time traveling debugger!

Hello World

main : Element

main = asText "Hello world"

Getting started

elm_dependencies.json
elm-get install
elm –make –only-js Schnippets.elm
elm-reactor

{
    "version": "0.5",
    "summary": "Schnippets!",
    "description": "Schnippet!",
    "license": "BSD3",
    "exposed-modules": [],
    "elm-version": "0.13",
    "dependencies": {
        "evancz/elm-html": "0.2"
    },
    "repository": "https://github.com/USER/PROJECT.git"
}

https://github.com/elm-lang/elm-platform
https://github.com/michaelbjames/elm-examples

Demo - Schnippets

    $ cd act3-elm && elm-reactor
    Elm Reactor 0.1, backed by version 0.13 of the compiler.
    Listening on http://localhost:8000/

Epilogue

Functional? Reactive?

Fin

Other AltJS

If you like Haskell-like syntax for web development, there are several other functional AltJs languages out there: Roy, Haste, Fay, Elm, GHCJS, PureScript.

Thank You

erewhon @ { flatland | github | .tx }

(Functional) Reactive Web Development

Steven Byrnes

November 19, 2014

Abstract

Prologue

What is (F)RP?

Reactive Programming

Definition

What?

Continuous vs discrete

Push vs pull

Different constraints

Why?

Act 1 - “Old Sk00l”

A Simple Model

Just HTML

jQuery

Act 2 - Reactive

RxJS

Example

Bacon.JS

Bacon.JS

Differences

BaconJS - Demo

Act 3 - First Class FRP

Elm

Hello World

Getting started

Demo - Schnippets

Epilogue

Functional? Reactive?

Fin

Other AltJS

Further Reading

Thank You