cyclejs 初探

前台组于宝权

cyclejs 是什么

framework

一个函数式和响应式的 JavaScript 框架，编写可观测的代码

核心: Pure Dataflow

输入(sources): 读作用

输出(sinks): 写副作用

I/O: 副作用

drivers 管理所有副作用

main()

响应式编程--可分离

函数式编程--可预测

Cycle.js 程序是由纯函数构建，这意味着它们只接受输入并生成可预测的输出，而不会造成任何 I/O 副作用。

作为组成部分的响应式流来自像 xstream、RxJS 或者 Most.js 这样的库，这些库极大地简化了事件处理、异步调用、错误处理的相关代码。

用流构建的程序同时也分离了关注点，因为所有对一块数据的动态更新总是在同一处，并且不能从外部改变。

结果是，Cycle 应用更少使用 this，并且没有像 setState() 或者 update() 这样的命令式调用。

函数式容易编写「可预测」的代码，响应式容易编写「可分离」的代码。

名词解释

sink 水槽水池, 源的目的地, 黄河之水天上来, 奔流到海不复回

sources: read effect

sinks: write effect

sinks 是从 main() 函数到 driver 执行作用的指令，而 sources 是可读的作用。

可分离: 分离关注点, 即 logic 和 effect

logic 业务逻辑概念

effect 现实世界的变化 dom, db, io

响应式编程: https://en.wikipedia.org/wiki/Reactive_programming

个人理解: 类似 observer, 声明完一个数据所依赖的源和计算逻辑后, 下次源出现变化, 数据自动更新, 不需要再次干预, 如手动调用更新操作等

简单和简洁

Cycle.js 是一个不需要学习很多概念的框架，核心 API 只有一个 run(app, drivers)。

此外，还有 stream、functions、drivers（用于不同类型 I/O 副作用的插件），用于隔离组件的辅助函数。

这个框架没有很多「魔法」，大多数组成部分只是 JavaScript 函数而已。

虽然更少的「魔法」会导致更多的代码，但是使用函数式响应式流可以使用较少的操作去处理复杂的数据流，你将会看到 Cycle.js 构建的程序是小巧并且易读的。

更少的操作

主要使用对流的操作(xstream / rxjs / mostjs 的 API), 例如: merge, combine, of, map, fold

没有魔法

没有组件实例, 没有生命周期(snabdom 提供了一些dom的hook), 没有computed, filter 等等, 只有一堆纯函数组成的对象

清晰的数据流

在每个 Cycle.js 应用中，每一个被声明过的流都是在数据流图中的一个节点，节点与节点用箭头表示依赖关系。这意味着，你的代码和外部输入输出的数据流图存在着一一对应的关系。

组件化

Cycle.js 是组件化的，但是和其他框架不太一样，无论多么复杂，每个单独的 Cycle.js 应用，都是一个函数，并可以被一个更大的 Cycle.js 应用复用。

sources 和 sinks 是存在于应用程序和 drivers 之间的接口，但是他们也有与子组件及其父组件之间的接口。

Cycle.js 的组件可以是类似其他框架中的 GUI 部件，但是他们不仅限于 GUI。由于 sources 和 sinks 的接口不仅限于 DOM ，你也可以制作成 Web 音频组件，网络请求组件等 (应用在nodejs中)

cyclejs 如何使用

官方教程

主要应用到的库

DOM: @cycle/dom (内部依赖snabbdom)

HTTP: @cycle/http (内部依赖superagent)

数据流: xstream (rxjs mostjs)

从0开始, 不使用cyclejs

// Logic
xs.periodic(1000)
    .fold(prev => prev + 1, 0)
    .map(i => `Seconds elapsed: ${i}`)
   
// Effects
    .subscribe({
        next: str => {
            const elem = document.querySelector('#app');
            elem.textContent = str;
        }
    });

分离逻辑和副作用

分离

function main() {
    return xs.periodic(1000)
        .fold(prev => prev + 1, 0)
        .map(i => `Seconds elapsed: ${i}`);
}

function domDriver(text$) { // DOM 操作
    text$.subscribe({
        next: str => {
            const elem = document.querySelector('#app');
            elem.textContent = str;
        }
    });
}

function logDriver(msg$) { // 记录日志
    msg$.subscribe({
        next: msg => {
            console.info(msg);
        }
    });
}

分离不同种类的副作用

const sink = main();
domDriver(sink);
logDriver(sink);

run

不同的数据到达不同的 effect

function main() {
    return {
        DOM: xs.periodic(1000)
                .fold(prev => prev + 1, 0)
                .map(i => `Seconds elapsed: ${i}`),
        log: xs.periodic(2000)
                .fold(prev => prev + 1, 0)
    };
}

// domDriver

// logDriver

const sink = main();
domDriver(sink);
logDriver(sink);

加一点封装

function run(mainFn, drivers) {
    const sinks = mainFn();
    Object.keys(drivers).forEach(key => {
        if (sinks[key]) {
            drivers[key](sinks[key]);
        }
    });
}

run(main, {
    DOM: domDriver,
    log: logDriver,
});

从 source 读取信息

function main(sources) {
    const click$ = sources.DOM;
    return {
        DOM: click$.startWith(null).map(() => {
            xs.periodic(1000)
                .fold(prev => prev + 1, 0)
                .map(i => `Seconds elapsed: ${i}`)
        }).flatten(),
        log: xs.periodic(2000)
                .fold(prev => prev + 1, 0)
    }
}

function domDriver(text$) {
    text$.subscribe({
        next: str => {
            const elem = document.querySelector('#app');
            elem.textContent = str;
        }
    });

    const domSource = fromEvent(document, 'click');
    return domSource;
}

function run(mainFn, drivers) {
    // cycle
    const sinks = mainFn({ DOM: domSource });
    const domSource = domDriver(sinks.DOM);
}

解决循环依赖问题

function run(mainFn, drivers) {
    // cycle
    const fakeDOMSinks = xs.create();
    const domSource = domDriver(fakeDOMSinks.DOM);
    const sinks = mainFn({ DOM: domSource });
    fakeDOMSink.imitate(sinks.DOM);
    // http://staltz.github.io/xstream/#imitate
}

function run(mainFn, drivers) {
    const fakeSinks = {};
    Object.keys(drivers).forEach((key) => {
        fakeSinks[key] = xs.create();
    });

    const sources = {};
    Object.keys(drivers).forEach((key) => {
        sources[key] = drivers[key](fakeSinks[key]);
    });

    const sinks = mainFn(sources);

    Object.keys(sinks).forEach((key) => {
        fakeSinks[key].imitate(sinks[key]);
    });
}

一个大致的cyclejs run

domDriver的封装

结论: domDriver 的职责: 接收一个vdom对象的流, 渲染页面并返回HTML的source

此处 domDriver 的演进过程, 代码略过 (具体请看官方视频教程)

MVI

model(actions$)

intent(sources)

view(state$)

state$

vdom$ ==> DOM

actions$

MVI is a simple pattern to refactor the main() function into three parts: Intent (to listen to the user), Model (to process information), and View (to output back to the user). 阅读全文