To begin...

Imagine a simple todo list spec...

• List of items
• Cross off item when clicked
• Count of done/total at bottom

Imperative UI with jQuery

• HTML containers
• Add line items
• Update as needed
  • Counts
  • "Completed" state

Example

New specs!

• Progress bar
• Say "done" when all are checked off
• Filter by done/todo/all
• Filter by search text

Changes

• Every time a todo is added/changed
  • Update progress bar
  • Update "done" state
• When filter link is clicked, or search text is entered
  • Hide/show items
  • Update counts
  • Update progress bar
  • Update "done" state

Everything has to be kept in sync

Every possible permutation has to be coded for

What about searching within a filtered list?

What about the next feature request?

Issues with directly mutating UI

• Related data needs to manually be synchronized
• Difficult to be modular
• Subsequent changes grow complexity exponentially

Declarative UI with React

• Store todos as data
• Direct mapping of data to elements
• Update stored state, not the elements themselves

Example

Tradeoffs?

• ~100 lines vs ~50
• More library overhead
• Questionable for such a simple app

Progress Bar/"Done"

function ProgressBar({ done, total }) {
  let innerClassName = 'progress-inner';

  // Don't divide by zero
  const width = (total === 0 ?
    '0' :
    (100 * done / total) + '%'
  );

  if (total !== 0 && done === total) {
    innerClassName += ' all-done';
  }

  return (
    <div className="progress-outer">
      <div
        className={innerClassName}
        style={{ width: width }}
      />
    </div>
  );
}

<ProgressBar done={done} total={total} />

Filter/Search

filterTodos(todos = this.state.todos, filter = this.state.filter) {
  if (filter === 'complete') {
    return todos.filter(t => t.complete);
  }
  if (filter === 'incomplete') {
    return todos.filter(t => !t.complete);
  }
  return todos;
}

searchTodos(todos = this.state.todos, search = this.state.search) {
  return todos.filter(t => (t.name.indexOf(search) !== -1));
}

  const allTodos = this.state.todos;
  const todos = this.filterTodos(this.searchTodos(allTodos));

Example

Key Benefits

• Child components don't know about each other (loose coupling)
• Separation of data from presentation
• New features don't have to change old ones
• Dev doesn't have to keep track of every possible code path

Functional programming

We saw declarative UI, now let's look at a more declarative style for functions themselves.

Have you ever been here?

  function getLowestRegularShowtimePrice(showtimes) {
    var lowest = Math.Infinity;
    for (var i=0; i < showtimes.length; ++i) {
      var showtime = showtimes[i];
      if (hasRegularTickets(showtime)) {
        for (var j=0; j < showtime.regularTicketSections; ++j) {
          var section = showtime.regularTicketSections[j];
          if (section.price < lowest) {

lowest = section.price;
          }
        }
      }
    }

    return lowest;
  }

Wouldn't you rather be here?

  const getLowestRegularShowtimePrice = _.flow(
    fp.filter(hasRegularTickets),
    fp.map(_.flow(
      fp.get('regularTicketSections'),
      fp.map('price'),
      fp.min
    )),
    fp.min
  );

Maybe not at first glance. Let's back up...

A more practical currying example

  map(fn, arr) {
    acc = [];
    for (var i=0; i < arr.length; ++i) {
      acc.push(fn(acc[i]));
    }
    return acc;
  }

  allPrices = map(item => item.price);

  allPrices([{ price: 3 }, { price: 3.5 }]) // => [3, 3.5]

Composition Example

  min(arr) {
    lowest = arr[0];
    for (var i=1; i < arr.length; ++i) {
      if (arr[i] < lowest) {
        lowest = arr[i];
      }
    }
    return lowest;
  }

  lowestPrice = _.flow(allPrices, min);

  lowestPrice([{ price: 3 }, { price: 3.5 }]) // => 3