Funksjonell reaktiv programmering

JavaZone, 10. september 2014. Jeg var seniorkonsulent i Inmeta og skulle vise at React.js kan bære både det funksjonelle og det reaktive, i samme time.

React var 0.11.1. Facebook hadde laget det, Instagram kjørte det. JavaScript støtter allerede en del av det som kjennetegner et funksjonelt språk — funksjoner som first class citizens, lambda — men ikke alt. Du kan programmere objektorientert om du vil, eller noe midt imellom. Reaktiv programmering handler om endringer i tilstand. Poenget med timen var å gjøre den utviklingen enklere, ikke å innføre et nytt religionsskrift.

Første demo var så liten at den nesten ikke finnes:

/** @jsx React.DOM */
var HalloVerden = React.createClass({
    render: function() {
        return <div>Hallo Verden</div>;
    }
});
React.renderComponent(<HalloVerden name="hallo" />, document.body);

Andre demo var en knapp som husker at den er trykket:

var KlikkMeg = React.createClass({
    getInitialState: function () {
        return {clicked: false};
    },
    handleClick: function () {
        this.setState({clicked: !this.state.clicked});
    },
    render: function () {
        return <input type="button"
            onClick={this.handleClick}
            value={!this.state.clicked ? "Klikk meg!" : "En gang til"} />;
    }
});

Deretter en boks du kan dra. Native events mot React-events, side om side. Tittelen på den fila var «Demo: Synthetic Reactive Events». Layout av kollisjoner i et kalendergrid er én type problem. Å la en komponent eie musen sin er en annen. Begge ender i det samme: du vil ikke ha den tilstanden liggende i window.

Bak kulissene lager React en beregning av hvilke elementer som må endres. Virtuell DOM. Syntetiske events. JSX som kompileres til JavaScript. Det er hele maskineriet. Resten av timen var å vise at du kan skrive små enheter, teste dem, og la appen være så kompleks som den mest komplekse komponenten — ikke mer.

Keynoten ligger fortsatt i arkivet. Demokoden også: halloverden, klikkmeg, mouse, en søkeapp. Det som ble igjen i hodet etterpå, og som senere ble SvenJS, var ikke Facebook. Det var modellen: createClass, setState, render hele treet, la runtime finne ut hva som faktisk måtte røres.