Awesome Cyclejs

Cyclejsを扱う資料や関連プロジェクトをまとめたAwesomeリストです。

Awesome Cycle.js

優れたCycle.jsのツール、リソース、動画などを集めたリストです。

学習
ツール
- CLI
ライブラリ
コミュニティ

学習

ドキュメント

cycle.js.org - Cycle.js公式チュートリアルとドキュメント

チュートリアル

What Developers Need to Know about MVI (Model-View-Intent) - MVIアーキテクチャに関する投稿
Cycle.js: a reactive framework - リアルタイムデータの例を交えたCycle.jsの紹介
Building realtime applications with CycleJS and RxJS - CycleJSとRxJSを使ってリアルタイムアプリケーションを構築する方法
Working with HTTP Streams with Cycle.js - CycleJSを使ってHTTPリクエストとレスポンスを処理する方法

動画

What if the user was a function? - Andre Staltzが行ったJSConf BP2015での発表
Unidirectional data flow architectures - Andre Staltzが行ったTheFrontendカンファレンスでの発表
Cycle.js and functional reactive user interfaces - Andre Staltzが行ったReactiveConf 2015での発表
Intro to Functional Reactive Programming with Cycle.js - Nick Johnstoneによる発表
Cycle.js Fundamentals - egghead.ioでのプレイリスト
Cycle.js was built to solve problems - Andre Staltzが行ったFrontend.fiでの発表
Brains as Building Blocks - Andre Staltzが行ったCycleConf 2016での発表
Back to the Future, Hot reloading with Cycle.js - Nick Johnstoneが行ったCycleConf 2016での発表
From MVC to FRP - Gleb Bahmutovが行ったCycleConf 2016での発表
Cycle.js on the bash side - Hadrien de Cuzeyが行ったCycleConf 2016での発表
Reactive Programming with Cycle.js - ルカ・メッツァリラが執筆した JSDay 2016
Learning how to ride: an introduction to Cycle.js - フェルナンド・マキアス・ペレスニートが執筆した JS Monthly London
User Interfaces as Pure Functions of Time - Thomas Belinがdotjs 2016で行ったライトニングトーク

スライド

Cycle.js an honestly reactive framework for web user interfaces - エリク・ナピエラーラが執筆した
Intro to Cycle.js - アリーニ・ルカシェフキーが執筆した
Reactive Programming with Cycle.js - ルカ・メッツァリラが執筆した
Cycle.js - building apps with streams only - ルカ・マテイスが執筆した
Functional Reactive Programming with Cycle.js - スダラサン・バルアージが執筆した
Beyond flux: going full cycle with FRP - Clément Delafargueが執筆した

サンプルアプリケーション

cyclejs/cycle-examples - Cycle.jsの小さな例の公式コレクション
Widdershin/tricycle ★23 - Cycle.jsを試すためのスクラッチパッド、Ace EditorとCycleを用いている
cgeorg/todomvp ★21 - 最小限のピザアプリ、Cycle.jsで書かれたウェブアプリの例
erykpiast/cyclejs-examples ★9 - Cycle.jsで構築されたウェブアプリの例
grozen/trends-cycle ★3 - Cycle.jsで書かれたスラックトレンド検索
ivan-kleshnin/cyclejs-examples ★120 - CycleJSの例のコレクション、ES6
ivan-kleshnin/tetris-cyclejs ★12 - Cycle.jsで実装されたテトリスゲーム
phadej/graafi ★20 - SVGとグローバルな取り消し・やり直し機能を用いたCycle.jsの実験 http://oleg.fi/graafi/
staltz/matrixmultiplication.xyz ★548 - インタラクティブなマトリクス乗算 webapp
staltz/rxmarbles ★2,577 - Rx Observableのインタラクティブな図解 http://rxmarbles.com/
MarcCloud/magic-cart ★6 - 魔法の生き物店のシンプルなショッピングカート
foxdonut/cycle-todolist ★11 - CRUD機能を備えたシンプルなCycle.js TODOリストアプリの例
Mercateo/component-check ★468 - Cycle.jsコンポーネントを構築するための一般的なパターン
edge/electron-cycle-media ★27 - Electronで書かれたメディアプレイヤー
kibin/cycle-example-who-to-follow ★16 - GitHub APIを用いて、Twitterの「誰にフォローするか」のボックスを部分的に実装した小さな例
SkaterDad/cycle-snabbdom-examples ★12 - snabbdom特有のアニメーションを使用したネストされたコンポーネントの例
bahmutov/draw-cycle ★112 - MVIコンポーネント内のデータフローをインタラクティブに可視化したカウンターアプリケーション glebbahmutov.com/draw-cycle
andreloureiro/pomocycle ★21 - シンプルなポモドーロタイマー
laszlokorte/tams-tools ★24 - Cycle.jsで構築されたコンピューターサイエンスの教育・学習ツールセット
lucamezzalira/jsday-cycle-js ★16 - Cycle.jsで構築されたロンドン地下鉄のリアルタイム運行状況サンプル
cyclejs-community/built-with-cycle ★9 - Cycle.jsで構築されたプロジェクトを紹介するウェブサイト
class-ideas/cyclejs-hangman ★10 - Cycle.jsで構築されたハンガーゲーム
wmaurer/cyclejs-fractals ★15 - ダンシング・ピタゴラス・ツリー・フラクタル - 2048個のSVGノードをアニメーション
fabiothiroki/cyclejs-starwars ★2 - Cycle.js、RxJSおよび仮想DOMテストを用いたスターウォーズキャラクター検索アプリ
staltz/mmmmm-mobile ★124 - React Native + Cycle.jsで構築された、セキュア・スキュルバートネットワーク上のソーシャルネットワーク実装アプリ
cyclejs/todomvc-cycle ★214 - TodoMVC example をCycle.jsで実装
jefersondaniel/cyclejs-notes - Cycle.jsとOrbit.jsを用いたノートアプリ https://jefersondaniel.com/cyclejs-notes
staltz/dat-installer ★77 - Datを用いてAndroidアプリをダウンロード・インストール・更新
usm4n/cycle-hn ★25 - CycleJSを用いたHackernewsのクローン
lizraeli/cycle-github-emojis - Cycle.JSで作成されたGitHubエモジービューア webapp
perjerz3434/meetup.com ★1 - 世界中でMeetup.comのRSVPを可視化するCycleJSアプリ

ツール

CLI

cyclejs-community/create-cycle-app ★160 - Build設定なしでCycle.jsアプリを作成

ライブラリ

ドライバー

@cycle/http - superagentをベースにしたCycle.jsによるHTTPリクエストドライバー
@cycle/dom - snabbdomを仮想DOMライブラリとして用いたCycle.jsによるDOM操作ドライバー
@cycle/storage - localStorageおよびsessionStorageを用いたCycle.jsドライバー
@cycle/history - これは標準的なCycle.jsドライバーで History APIを扱うもの
@cycle/isolate - Cycle.js でスコープ付きデータフローコンポーネントを作成するためのユーティリティ関数
@cycle/time - Cycle.js 用の高速かつ美しいテストおよび時間管理
cyclejs/cycle-notification-driver ★20 - Cycle.js 用の HTML5 通知の表示と反応用ドライバー
axefrog/cycle-router5 ★30 - Router5 を使用したルータードライバー
cgeorg/cycle-socket.io ★27 - Socket.IO クライアント用の Cycle.js ドライバー
secobarbital/cycle-fetch-driver ★2 - Fetch API を使用して HTTP リクエストを送信するための Cycle.js ドライバー
r7kamura/cycle-fetcher-driver ★14 - Fetch API を使用して HTTP リクエストを送信するための Cycle.js ドライバー stackable-fetcher
benji6/cycle-audio-graph ★12 - virtual-audio-graph を使用して Web Audio API を操作するための Cycle.js ドライのバー
CyclicMaterials/cycle-hammer-driver ★11 - Hammer.js をラップし、タッチジェスチャーを検知するための Cycle.js ドライバー
jessaustin/cycle-sse-driver ★6 - サーバー送信イベント/EventSource 用のソースドライバー
tylors/cycle-snabbdom ★41 - Snabbdom を使用した DOM ドライバー
cyclejs-community/cyclic-router ★90 - Cycle.js 用に構築されたルータードライバー
Widdershin/cycle-animation-driver ★33 - requestAnimationFrame 用の Cycle.js ドライバー
dralletje/cycle-firebase ★21 - Firebase 用の Cycle.js ドライバー
edge/cycle-blessed ★46 - ターミナルアプリケーション用の Cycle.js ドライバー
10clouds/cyclejs-cookie ★2 - Cycle.js用Cookieドライバー
whitecolor/cycle-async-driver ★25 - 非同期リクエスト・レスポンス用Cycle.jsドライバーのファクトリー
raquelxmoss/cycle-keys ★35 - キーボードイベントドライバー
rektide/recyclec ★0 - リードラインドライバー
goodmind/cycle-telegram ★15 - Telegram Bot API用Cycle.jsドライバー
apoco/cycle-electron-driver ★22 - ElectronインターフェースとCycle.jsアプリケーションを連携するドライバー
rkrupinski/cyclejs-animated-localstorage ★12 - localStorageをアニメーションさせるCycle.jsドライバー
cyclejs-community/cycle-keyboard ★9 - Cycle.js用キーボードドライバー
garrydzeng/cycle-page ★3 - Cycle.js向けの軽量クライアントサイドルーター
jbowden1982/cycle-socketcluster ★5 - Cycle.js用SocketClusterドライバー
cyclejs-community/redux-cycles ★599 - ReduxミドルウェアからアクションのライフサイクルをCycle.jsへ接続します
JuniperChicago/cycle-gun ★18 - gun.jsインスタンスをラップし、グラフストレージとP2P同期を可能にする基本的なCycle.jsドライバー
EnigmaCurry/cycle-deepstream ★8 - deepstream.io用Cycle.jsドライバー
Alex0007/cycle-express-driver ★1 - Express.jsサーバー用Cycle.jsドライバー
mrpierrot/cycle-node-http-server ★4 - Node.js HTTP(S)サーバー用Cycle.jsドライバー
mrpierrot/cycle-net ★0 - Node.js HTTP(S)/WS(S)/Socket.io サーバー用の Cycle.js ドライバー
Avalander/cycle-idb ★4 - IndexedDB とのインタラクションを包む Cycle.js ドライバー
unhappychoice/cycle-pusher ★1 - Pusher 用の Cycle.js ドライバー
helmoski/cycle-selection-driver - Selection API とのインタラクションを実現する Cycle.js ドライバー
mjyc/cycle-posenet-driver ★1 - TensorFlow.js が駆動する PoseNet を用いたポーズ検出に使う Cycle.js ドライバー
@cycle-robot-drivers/speech ★1 - Web Speech API を用いた音声合成および認識に使う Cycle.js ドライバー
@cycle-robot-drivers/sound ★1 - HTMLAudioElement を用いて音を再生する Cycle.js ドライバー

ユーティリティ

staltz/chai-virtual-dom ★24 - 仮想DOM VTreesのテストに使う Chai の断言補助関数
cgeorg/sinject ★10 - Cycleの循環依存関係をサポートする依存性注入ツール
erykpiast/cyclejs-group ★20 - CycleJSフレームワークでストリームのグループを作成する際に必要なボイラープレートを減らすためのユーティリティ
erykpiast/cyclejs-wc ★2 - Cycle.jsを基にしたウェブコンポーネントを作成するためのユーティリティ
ohanhi/hyperscript-helpers ★390 - hyperscriptまたは仮想hyperscriptを書くためにelm-htmlをインスピレーションとした補助関数
pH200/cycle-react ★342 - 仮想DOMではなくReactを使う、CycleのようなAPI
madcapjake/earlhyperscript ★2 - Earl Greyのdocument-building syntaxをCycle.jsで使うためのヘルパー関数とマクロ
WorldMaker/cycle-gear ★4 - CycleのMVIパターンを形式化した上で構築されたCycleベースのメイン関数ファクトリー
SuperManitu/cyclejs-sortable ★15 - ドラッグアンドドロップで1行のコードですべての項目をソート可能に！
atomrc/cyclejs-auth0 ★22 - Auth0をCycle.jsアプリで使うために必要なすべてのもの（ドライバー＋コンポーネント）
staltz/cycle-onionify ★244 - Cycle.jsアプリ用のフラクタル状態管理
maiermic/cycle-storageify ★5 - Cycle.jsコンポーネント（メイン関数）に、そのネオン型の状態をローカルストレージに保存する機能を追加
shfrmn/cycle-lot - Cycle.jsコンポーネントの動的リストを簡単に扱えます（完全なTypescriptサポート）
sarimarton/powercycle - Cycle.js上に静的VDOM構成とReact風開発を提供

ボイラープレート

andreloureiro/cyclejs-starter ★50 - ES6とライブリロードを備えたCycle.jsスタートテンプレート
Frikki/generator-cyclejs ★2 - Yeomanを使ってCycle.jsネストダイアログモジュールをスケルトン化
edge/cyc ★194 - 数秒で同士異形Cycle.jsアプリをスケルトン化
cmdv/cycle-webpack-boilerplate ★101 - ルーティング、状態管理、テストを備えたCycleアプリ
Widdershin/cycle-hot-reloading-example ★27 - browserify-hmrを使用したCycle.jsスタートプロジェクト（ホットリロード）
mciparelli/cycle-hmr-example ★0 - browserifyとcycle-hmrを使用したCycle.jsスタートプロジェクト
cycle-community/typescript-starter-cycle ★22 - TypeScriptをCycle.jsで初めて使うためのシンプルなプロジェクト。Visual Studio Codeの設定も含む。
wyqydsyq/unicycle ★6 - WebpackでHMRとServiceWorkersを活用したKoa.jsサーバー上で動作するユニバーサルCycleアプリのスケルトン
syarul/cycle-iso ★4 - Promiseに基づくデータストリームとFalcor.jsでフェッチされた、極めてシンプルなCycleアプリのスケルトン
snowpack-cycle - Cycle.jsプロジェクトを作成するcreate-snowpack-app用Snowpackテンプレート

テスト

erykpiast/cyclejs-mock ★22 - Cycle.jsアプリケーションをテストするためのユーティリティ
jeysal/pretty-format-snabbdom ★0 - A pretty-format (Jest snapshot) プラグインで、snabbdom VNodeのスナップショットをReact要素のスナップショットのようにきれいにレンダリング

デバッグ

cyclejs/cycle-time-travel ★213 - Cycle.jsアプリケーション向けタイムトラベルデバッガー。時間軸をドラッグして過去の状態を確認できるストリーム可視化を表示します

コンポーネント

erykpiast/autocompleted-select ★10 - RxJSおよびVirtualDOMに基づくウェブコンポーネント選択機能（自動補完）
enten/cyclejs-calendar ★11 - Cycle.js向けカレンダーコンポーネント。オンラインデモ
mciparelli/cyclejs-gravatar ★0 - Cycle.jsでGravatarプロフィール画像を描画するコンポーネント
tommy-the-runner/cyclejs-ace-editor ★0 - braceを使用したCycle.jsとAce Editorの統合。サンプル
raquelxmoss/cycle-color-picker ★44 - Cycle.js向けカラーピッカーコンポーネント。サンプル
cyclejs-community/cycle-svg-pan-and-zoom ★4 - Cycle.js向けGoogle Maps風SVGパン・ズームコンポーネント

コミュニティ

Gitter chat - 「どうやって…？」と尋ねる