Cycle.jsの穏やかな紹介

Cycle.jsは、JavaScript用の最もアクセスしやすいFRPフレームワークであり、これまでに畏敬の念を抱き、混乱する機会がありました。結論は、ぐらついた道を進むための補助輪がたくさんあるということです。欠点：理解するよりも実装する方が簡単であり、ドキュメントはあまり役に立ちません。

移動するための最良の方法は、Cycle独自の create-cycle-app を使用することです（NPMまたはYarnを介して名前でインストールします）。最終的には以下のようなものになりますが、開発サーバーを起動したりビルドをデプロイしたりするために必要なすべてのスキャフォールディングが配置されています。説明のために少し簡略化しました。

import {run} from '@cycle/run';
import {div, makeDOMDriver} from '@cycle/dom';
import xs from 'xstream';

const main = function(sources) {
  const vtree$ = xs.of(
    div('My Awesome Cycle.js app')
  );
  const sinks = {
    DOM: vtree$
  };
  return sinks;
};

const drivers = {
  DOM: makeDOMDriver('#app')
};

run(main, drivers);

💡ソース？シンク？抽象化としての環境理論の貿易用語におけるサイクルトラフィック。正直なところ、大いに役立つのは抽象化ではありません。ソースを読み取り効果、インテントの製品、シンクを書き込み効果、モデルの製品と考えてください。

Cycle.jsの一般的な「サイクル」とは、ユーザーインターフェイスとアプリのプレゼンテーションロジックの間のストリームの循環フローを指します。 UIはロジックの入力です。ロジックはUIの入力です。逆説的ですね Cycleの秘訣は、このプログラムによるウロボロスをシードし、上にインポートしたrunメソッドを使用してホイールを回転させる方法を知っていることです。

create-cycle-appのスターター出力には、単純さを評価していないということではなく、多くの要望があります。スタイルのないテキストの静的な塊から次に進むべき場所を把握するのは少し難しいです。そこで、基本を説明するために、多年生のスライドショーアプリのサイクルバージョンを作成しました。自由にレポジトリのクローンを作成するか、グリッチでリミックスしてタイヤをキックしてください。

以下は、Cycleをスピンさせるコードのクイックツアーです。

ストリーム

const width$ = sources.DOM.select('.width').events('input')
  .map(e => e.target.value).startWith(410);
...

これはストリームです。これは、widthクラスのDOMソースで受信されたinputイベントで構成されています。配列と考えてください。ただし、空間に値を含めるのではなく、時間に値を含めます。値410をstartWithします。そうしないと、width$を消費しているものにnullをダウンストリームで渡すことになります。 $は何もしません。これは、ストリームの命名規則にすぎません。

💰参考：$$はストリームのストリームの規則です。

xstream

const vtree$ = xs.combine(index$, width$).map(([index, width]) =>

これは、リアクティブストリームライブラリの購入者の市場です。 Create-cycle-appには、Cycleの作成者がCycle専用に作成した軽量で軽量なライブラリであるxstreamが付属しています。最も単純な場合、次のようなストリームを作成できます

const vtree$ = xs.of(
  div([div('A virtual DOM tree stream?'), div('Yup.')])
);

これは十分に文書化されており、含まれているわずか26のメソッドの半分を学習しなくても、ほとんどの目的で十分に機能させることができます。つまり、代わりに好きなライブラリを使用できます。

ハイパースクリプト

import {input, div, p, img} from '@cycle/dom';

Cycleは、Hyperscript上に構築されたDOM抽象化ライブラリを使用します。上記のインポートは、Reactから来る人にとっては快適なはずです。以下の実装は…多分少し少ないでしょう。

div({style: {
  textAlign: 'center',
  fontFamily: 'sans-serif',
  fontWeight: '300'
}}, [
  div({style: {marginBottom: '20px'}}, [
    p({style:{color: '#858576', fontSize: '32px'}},
      assets.captions[index]
    ),
    input(
      {
        style: {width: '100px', cursor: 'pointer'},
        attrs: {
          class: 'width',
          type: 'range',
          min: 40,
          max: 720,
          value: width
        }
      }
    )
  ]),
  div([
    img({
      style: {borderRadius: '12px', cursor: 'pointer'},
      attrs: {
        src: assets.slides[index],
        alt: assets.captions[index],
        width: `${width}px`
      }
    })
  ])
])

いいえ、インラインスタイルを使用する必要はありません。はい、単一の要素から派生したツリーをエクスポートする必要があります。

element(opts, children)

一見したところよりも直感的で、信じられないほど柔軟性があり、基本的にHTMLの太陽の下ですべてをサポートします。はい、代わりにJSXを使用できますが、これはすでに含まれているので、試してみてください。

運転手

ドライバーは、DOMドライバーを介した人間のユーザーへの接続であろうとHTTPドライバーを介したXHRであろうと、Cycleアプリとそれを取り巻く世界との間の架け橋と考えてください。

import {makeDOMDriver} from '@cycle/dom';
...
const drivers = {
  DOM: makeDOMDriver('#app')
};

ボイラープレートアプリにはDOMドライバーが付属していますが、インストールできるものは他にもたくさんあります。また、あなたはあなた自身を転がすことができます。

🚴🏼‍Cycle.jsは他のフレームワークとは哲学的に異なり、本質的に深いため、一気にその周りに腕を巻くことはありません。これらのトピックや他の多くのトピックについて、時間の経過とともにより具体的に掘り下げていきますが、これで十分に始めることができます。