FRP and library-based web stacks

Case Saunalahti webshop

Juha Paananen @raimohanska

Olli Mahlamäki @omahlama

~Agenda~

• Tiny intro
• Why is it relevant to you
• Where does it apply
• Real-life examples from Saunalahti webshop

~Bacon.js~

• Helps you deal with Events and State
• Not a framework, compatible with anyfrontend and backend
• Promotes functional programming principles

Shopping Cart

var addToCartE = $("#addItem")
  .asEventStream("click")
  .map(function(jqEvent) { return $("#itemName").val() })

addToCartE.onValue(bubble)
          runreloadreveal

Shopping Cart

function ShoppingCart(addItemE, removeItemE) {
  // ...
  return { contentsP }
}
        runreload

Bacon Application

Bacon and React

Bacon and Angular

Examples from Saunalahti webshop

Bacon inside a single component

    var searchElementInitialTop = searchElement.position().top
    var scrollEvents = $(window)
      .asEventStream('scroll')
      .takeUntil(stateExited)

    scrollEvents
      .map(function () { 
        return $(document).scrollTop() + 80 > searchElementInitialTop 
      })
      .skipDuplicates()
      .assign(searchElement, "toggleClass", "fixed")
  

Bacon as a glue between components - component

    // SimCardController.js
    function SimCardController(...) {
    // ...
      var selectedSim = ListSelectionController(
        simCardElement.find("ul"), 
        simCards, 
        simCardDealer.getInitialSimCardIndexForOrderRow(orderRow))
        .selectedOption
    // ...

    return {
      simCard: selectedSim.map(".id")
    }
  }
  

Bacon as a glue between components - user

    // MobileSubscriptionOrderDetailsItemView.js
    function MobileSubscriptionOrderDetailsItemView(...) {
      var outputOrderRowTemplate = {
        additionalInformation: {
          simCard: simCardController.simCard
        },
        ...
      }

      return {
        orderRow: function() { 
          return Bacon.combineTemplate(outputOrderRowTemplate) 
        },
        ...
      }
    }
  

~Last words~

• Abstractions for events and state
• Low-level to application-level
• Plugs into anything
• No silver bullet

K THX BYE

Bacon.js

Juha Paananen @raimohanska

Olli Mahlamäki @omahlama