Learn RXJS JavaScript Framework Cycle.js

Cycle.js is a minimal JavaScript frame (core part plus annotation 125 line), providing a function type, response Human-machine interaction interface (hereinafter referred to as HCI):

CYCLE.JS Abstract the application into a plain function main (), from outside The world reads side effects (Sources) and then generating outputs to the external world, forming side effects. Side effects of these external worlds, as the plugin of CYCLE.JS, which is responsible for processing the DOM, providing HTTP access.


Cycle.js uses rx.js to achieve attention, which means that the application is based on event stream, and the data stream is Observable:

HCI is a two-way dialogue, human-machine mutual observers

In this interactive model, the information between human machines To output an output, it constitutes a loop, that is, Cycle refers to this naming, the LOGO of the framework has been described in the Mobius ring. This cycle is described. Cycle_log

The only doubt is: the cycle is not tail, the information flow is initiated? Good question, the answer is:

However, we need a .startwith () to Give a default value. Without this! Why? Becauseur Sinks is Reacting to Sources, But Sources Is Reacting to Sinks. if No One Triggers The First Event, NOTHING WILL HAPPEN. – VIA EXAMPLES

This initial value provided by .StartWith (), the entire process is started, and thereby forms a closed loop, an event-driven permanent movement:)

Driver is the interface between the Cycle.js main function main () and the external world, such as HTTP requests, such as DOM operation, which is concrete Driver is responsible, its existence ensures main ()’s pure function characteristics, all side effects and cumbersome details are implemented by driver – so @ cycle / core is only 125 lines, and @ cycle / dom has 4052 lines of huge .

DRIVER is also a function, from the process, Driver listening SINKS (main () output) is input, perform some commanded side effects, and generates Sources as a MAIN () input.

DOM Driver

即 @ cycle / dom is the most frequent driver. In practical applications, our main () interacts with the DOM: When you need to deliver content to the user, main () will return DOM Sinks to trigger DomDriver () to generate Virtual-Dom. And render
main () subscribed to Domdriver () output value (as input), and respond accordingly


Each cycle.js application is more complicated, follow the basic law of an input and output, and therefore, componentization is easy to implement, nothing more than the combination of functions
actual combat

  • Installing a global module

Depending on the module list

“DEVDependencies”: {“Babel-plugin-transform-react-jsx”: “^ 6.8.0”, “Babel-Preset-ES2015”: “^ 6.9.0”, “Babelify”: “^ 7.3.0”, “Browserify”: “^ 13.0.1”, “uglifyify”: “^ 3.0.1 “,” Watchify “:” ^ 3.7.0 “},” dependencies “: {” @ cycle / core “:” ^ 6.0.3 “,” @ cycle / DOM “:” ^ 9.4.0 “, “@ cycle / http”: “^ 8.2.2”}

.babelrc (plugin supports JSX syntax)

{“Plugins”:[[“” “” “}],” presets “: [” es 2015 “]} [“}]}

Scripts (thermally generated and running server)

“Scripts”: {“START”: “http-server”, “build”: “:” ../ Node_modules / .bin / watchify index.js -v -g uglifyify -t babelify -o bundle.js “}
   When the example is required, two shells can be opened. , A running hot compilation, a http-server (love use currently
Interaction example 1

function: two button, one plus one reduction, starting from 0, echo counting DEMO address: http://output.jsbin.com/lamexacaku


Import cycle from ‘@ cycle / core’Import {MakeDomDriver, hjsx} from’ @cycle / Dom’Function Main ({DOM}) {const DECREMENT $ = Dom.select (‘. Decrement’). Events (‘click’). Map (_ => -1) const increment $ = dom.select (‘. Increment ‘). Events (‘ Click ‘). Map (_ => +1) Const Count $ = increment $ .merge (Decrement $). SCAN ((x, y) => x + y) .startwith (0) Return {Dom: count $ .map (count =>
clicked {count} Times ~

)}} cycle.run(Main, {Dom: MakedomDriver (‘# container’),}
   It is not difficult to see:    main () is a pure function , does not rely on external state from beginning to end, all of the power from the source DOM events click, the state machine relies Observable.prototype.scan () is calculated and passed to the last generation of sinks passed to render DOM Driver;   Launched this loop is .Startwith ();   cycle.run is the application's entry, load main () and Dom Driver, the latter rendering an HTML container 
Function: A BUTTON, after entering and point Button, search the relevant REPO through the Github API, echo the total number and show the first Page REPO list

Import Cycle from ‘@ cycle / core’import {makeDOMDriver, hJSX} from ‘@ cycle / dom’import {makeHTTPDriver} from’ @ cycle / http’const GITHUB_SEARCH_URL = ‘https://api.github.com/search/repositories?q=’function Main (response $) {const search $ = response $ .dom.select (‘input [type = “button”]’).Events (‘Click’). Map (_ => {return {url: github_search_url}) const text $ = response $ .dom.select (‘Input [type = “text”]’). Events (‘Input’) .map (e => {return {keyword: e.target.value}}) const http $ = search $ .withlatestfrom (text $, text) => search.URL + text.keyword) .map (State => {RETURN {URL: State, Method: ‘get’}}) Const Dom $ = response $ .http.filter (res $ => res $ .Request.URL && Res $ .Request.url.startswith (GitHub_Search_URL) ) .mergeall (). Map (res.Text)). Startwith ({loading: true}). Map (json => {return
{JSON.LOADING? 'Loading ...': `Total: $ {json.total_count}`}
{json.Items && json.Items.map (REPO =>


    }) Return {Dom: DOM $, http: htTP $,}} const driver = {Dom: makeDomdriver (‘# Container’), http: makehttpdriver (),} cycle.run (main, driver)
  • Example 1 Make the pad, this code is easy to understand, it is necessary to prompt:

RX’s OBSERVABLE object, naming agreement is ended, to distinguish between Observable.Prototype.withlatestFrom () The role is: When the current OBSERVABLE object is triggered (unlike CombineLatest), go to the latest state of the target OBServable object of the merge parameter, and pass it to the next OBServer

The complete example of the above project, can be found in / RockDragon / RX_Practise / Tree / Master / SRC / Web to find

Small junction

Vouger The language is not enough to summarize cycle.js, such as MVI design mode, DRIVER’s writing, awesome-cycle these advanced items, or leave the officials to explore.

The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment