repository·master·Indexed 27 days ago
https://github.com/cyclejs/cyclejsA functional and reactive JavaScript framework that promotes predictable code through a circular data flow. It consists of a core runner (@cycle/run) and specialized driver packages for side effects, including @cycle/dom for DOM manipulation, @cycle/http for HTTP requests, @cycle/history for browser history, @cycle/html for HTML generation, @cycle/isolate for component scoping, @cycle/state for state management, and @cycle/time for time-based operations. It supports reactive stream libraries such as xstream, RxJS, and most.
In Cycle.js, any application can be reused as a component within a larger application. These are called dataflow components.
A dataflow component is essentially a main() function that takes sources (streams provided by a parent or drivers) and returns sinks (streams sent back to a parent or drivers).
Key concepts:
@cycle/http package provides a Cycle.js driver for making HTTP requests. It allows your application to interact with remote servers by treating HTTP requests as sources and HTTP responses as sinks. For detailed API signatures, usage patterns, and configuration options, refer to the official documentation.@cycle/html package provides a way to generate HTML structures within a Cycle.js application. For detailed API documentation, including specific functions and usage patterns, refer to the official documentation at https://cycle.js.org/api/html.html.@cycle/state package provides a way to manage state within a Cycle.js application. For detailed API references, usage patterns, and implementation guides, refer to the official documentation.Cycle.js is designed to be highly extensible. Because the core framework is minimal, drivers like @cycle/dom are treated as optional plugins. You can replace any standard driver with a custom implementation to target different environments or interfaces, such as:
<canvas>, native mobile UI, or other UI trees instead of the standard DOM.Cycle.js treats your application as a pure function called main().
main() function and the external world (e.g., @cycle/dom handles DOM effects).Your application logic is built using Reactive Programming primitives, creating an explicit dataflow graph where dependencies are clearly visible in the code.
@cycle/run package is the core runner used to start a Cycle.js application. It connects your application's logic (the main function) to the outside world (sources and sinks) using a driver. For detailed API signatures and advanced usage, refer to the official documentation.@cycle/isolate package provides a mechanism to isolate components in Cycle.js. This allows you to create components that have their own local scope for sources and sinks, preventing naming collisions and enabling modularity. For detailed API documentation and usage patterns, refer to the official Cycle.js documentation.Cycle.js models Human-Computer Interaction (HCI) as a continuous dialogue or message-passing architecture. Instead of focusing solely on DOM manipulation, Cycle.js treats the interaction as a two-way exchange where both the human and the computer are agents that listen and speak.
In this model:
This architecture is heavily inspired by the concept of stream-based I/O (similar to Haskell 1.0), where interaction is modeled as a mapping between streams of requests and responses.