Sunday, March 20, 2016

Cycle.js Model View Intent in Conference Room Booker

Conference Room Booker has been refactored to the Cycle.js recommended Model View Intent pattern (as shown in this code structure screenshot):

In other words, it has been simplified to the bare essence of a pure decomposable reactive JavaScript function staring with sources of data and ending with sinks.

Intents: represent user action sources, such as keyboard presses and mouse clicks.

Intent Example (bookingDurationSource.es6):

The intent above captures keyboard input for the duration of booking, and outputs duration/time hash.

Models: aggregate data into meaningful structures.

Model Example (bookedRoomTimingSource.es6):

This model aggregates elapsing time, booked room data, and entered duration into a bookedRoomTiming hash structure, which later gets used in rendering the view.

Views: render data into HTML using Virtual-DOM-based Hypersrcipt terse syntax.

View Example (bookingView.es6):

This view renders the top part of the screen shown below.

Conference Room Booker Example Screenshot (Entering Duration):

Conference Room Booker Example Screenshot (Booking Timer Started by Clicking Room):

Conference Room Booker Example Screenshot (Time Elapsing/Booked Room Color Fading):

Check out the codebase over here for more details: Conference Room Booker

Have you had experience with pure functional reactive programming using Cycle.js yet? If so, please share your experience in the comments or ask any questions you might have otherwise.

Wednesday, March 02, 2016

Cycle.js Application Structure (Conference Room Booker)

Added to Conference Room Booker HTTP requests and responses via Cycle.js HTTP driver, obtaining room names (e.g. France, Canada, etc...) and showing them within the floor map SVG.  

A side-effect to my work was refactoring the structure of the app, breaking components out of the main cycle function, primarily the following:

- Models
  - roomCollection
- Streams
  - initialStream
- Views
  - bookingView
  - floorPlanView
Cycles (Both Sources & Sinks):
- roomRequest

Has anybody else been experimenting with Cycle.js's pure functional style of development?.