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.

No comments: