Functional Programming
from rich to reach

Functional Programming in Israel
Yehonathan Sharvit


            (new Date()).toString()

Who am I?

  • A mathematician

  • A pragmatic theorist

  • A coder

  • A freak of interactivity

  • Barclays - head of functional programming

  • (We're hiring...)

  • Founded a Audiology Startup with 30K LOCs in Clojurescript

  • Author of KLIPSE

Agenda

  • Functional programming - immutability

  • React.js - a functional frontend framework

  • Interludes

    • JSX - a "macro" system

    • ClojureScript - LISP on top of javascript

  • Code interactivity everywhere with KLIPSE

Functional Programming - Immutability

In non-functional programming, the default API mutates our objects


                const a = {size: 42};
                b = a;b.size = 43
                a

In functional programming e.g. clojure, the default API doesn't mutate our objects


                (def a {:size 42})
                (def b (assoc a :size 43))
                a

EcmaScript 6 got inspired by functional programming - and propses an immutable API:


                const a = {size: 42};
                b = Object.assign({}, a); b.size = 43
                a

Does it work as expected? 


            const a = {size: {shoes: 42}};
            b = Object.assign({}, a)
            b.size.shoes = 43
            a

Functional Programming - Immutable.js


!!Immutable 

            a = Immutable.fromJS({size: {shoes: 42 }});
            b = a.setIn(["size", "shoes"], 43)
            a

React.js: the functional frontend framework

The principles

  1. Virtual DOM

  2. Immutability

  3. Pure functions

Despite the fact that React.js is functional, it is popular!

Live Coding - in the browser

Tic Tac Toe



React - The basics

Let's load react javascript files from cdnjs.com:


!!React

Interlude - JSX

JSX is ...

kind of a macro system.


        const element = <h1>Hello, world!</h1>;
        

           const element = <h3 style= {{color:"red"} }>Hello, world -- 14*3={14*3}!</h3>;
           ReactDOM.render(element, container);

The JSX transpiler runs before the code is deployed.
It's a compile time syntactic sugar.
Compare vs. angular.js

Tic Tac Toe - The square

Square is a pure component 


        

        ReactDOM.render(React.createElement(Square, {value: 42,
                                                    onClick: () => alert("clicked")}), container);

Tic Tac Toe - The board

Board is a full react component with constructor, render and a couple of helper functions


        ReactDOM.render(React.createElement(Board, {}), container);

Interlude - Clojurescript

How do we decide who is the winner of the game?

There are only 8 possibilities to fill a row in the board 


(ns my.game)
(defn calculate-winner [squares]
  (let [lines [[0 1 2] [3 4 5] [6 7 8] [0 3 6] [1 4 7] [2 5 8] [0 4 8] [2 4 6]]]
    (->> (map (fn [[a b c]] (and (some? (get squares a))
                            (= (get squares a) (get squares b) (get squares c))
                            (get squares a)))
            lines)
        (filter identity)
         first)))
  

  (require '[cljs.test :refer [run-tests] :refer-macros [deftest testing is are]])
  

(deftest calc-winner
  (testing "basic"
    (is (= (calculate-winner ["X" "X" "X"]) "X"))
    (is (= (calculate-winner ["X" "X" "O"]) nil))
    (is (= (calculate-winner ["O" "O" "O"]) "O"))))

(run-tests)
  

  (deftest calc-winner
  (testing "advanced"
    (are [in out] (= (calculate-winner in) out)
         ["X" "X" "X"] "X"
         ["X" "O" nil
          "X" "O" nil
          "X" nil nil] "X")))

(run-tests)

Tic Tac Toe - with players


        ReactDOM.render(React.createElement(BoardWithPlayers, {}), container);

Summary

Questions?

/