The assignment for the upcoming Bacon.js hands-on session at ReaktorDevDay
JavaScript CSS
Latest commit 6d86864 Nov 29, 2012 Juha Paananen update Bacon.js, Bacon.UI.js
Permalink
Failed to load latest commit information.
css styling the result label Oct 10, 2012
images add diagram Oct 13, 2012
lib update Bacon.js, Bacon.UI.js Nov 29, 2012
.gitignore add gitignore Oct 6, 2012
README.md Link to Full Solution Oct 20, 2012
index.html remove unnecessary show function Oct 18, 2012
mocks.js

README.md

This is the Bacon.JS coding excercise we did at ReaktorDevDay 2012. Below are the instructions in case you wanna try it yourself. You may also have a look at the Full Solution which is in another branch.

Preparations

  1. Clone this repo

    git clone https://github.com/raimohanska/bacon-devday-code.git
    cd bacon-devday-code
    
  2. Open the index.html file in your browser

    open index.html
    
  3. Make sure you have developer tools in your browser and that you can use them. Google Chrome will do. In Chrome (Mac OSX), Go to View -> Developer -> Developer Tools. You should be able to run Javascript expressions on the Console tab.

  4. Try some expression in the Developer Console, like

    $("#username input").asEventStream("keyup")
    
  5. Have a look at Bacon.js readme

Map

Here's how I modeled the problem for Bacon.js reactive code.

diagram

Side-effects are not depicted.

Steps to success

  1. Disable button if username is missing
  • define usernameEntered property
  • assign side-effect: setDisabled for registerButton
  1. Disable also if full name is missing
  • define fullname and fullnameEntered properties
  • use .and() to change the condition for enabling the button
  1. Disable also if username unavailable
  • include usernameAvailable to the condition for enabling the button
  1. Show AJAX indicator when AJAX pending
  • define usernameRequestPending property as usernameResponse.pending(usernameRequest)
  • assign side effect to show usernameAjaxIndicator
  1. Disable button when AJAX is pending

  2. Implement registerClick stream

  • tip: do(".preventDefault")
  1. Implement registrationRequest
  • combine username and password into a new property that would be the data given to JQuery.ajax
  • can use username.combine(..) or Bacon.combineTemplate
  • type: "POST"
  1. Make this a stream of registration requests, send when the button is clicked
  • .sampledBy(registerClick)
  1. Create registrationResponse stream
  • as in usernameResponse stream
  1. Show feedback

  2. Disable button after registration sent

  3. Show ajax indicator for registration POST