Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
 
 
lib
 
 
 
 
 
 
 
 
 
 

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

About

The assignment for the upcoming Bacon.js hands-on session at ReaktorDevDay

Resources

Releases

No releases published

Packages

No packages published
You can’t perform that action at this time.