Cycle.js

Awesome Cycle.js ¶

一组很棒的 Cycle.js 工具、资源、视频和闪亮的东西.

---

Learn¶

Documentation¶

• cycle.js.org - Cycle.js 官方教程和文档.

Tutorials¶

• 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 - 了解如何使用 Cycle.js 处理 HTTP 请求和响应

Videos¶

• What if the user was a function? - 在 JSConf BP2015 上的演讲 Andre Staltz
• Unidirectional data flow architectures - 在 TheFrontend 会议上的演讲 Andre Staltz
• Cycle.js and functional reactive user interfaces - 在 ReactiveConf 2015 上的演讲 Andre Staltz
• 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 - 卢卡·梅扎里拉 (Luca Mezzalira) JSDay 2016
• Learning how to ride: an introduction to Cycle.js - 费尔南多·马西亚斯·佩雷兹涅托 (Fernando Macias Pereznieto) JS Monthly London
• User Interfaces as Pure Functions of Time - 闪电谈话 Thomas Belin 在 dotjs 2016

Slides¶

• Cycle.js an honestly reactive framework for web user interfaces - 埃里克·纳皮拉拉 (Eric Napierala)
• Intro to Cycle.js ——Arye Lukashevki 着
• 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

Example Applications¶

• cyclejs/cycle-examples - Cycle.js 小例子官方合集
• Widdershin/tricycle ★23 - 用于试用 Cycle.js 的 Scratchpad，依赖于 Ace Editor with Cycle
• cgeorg/todomvp ★21 - Minimum Viable Pizza，一个用 Cycle.js 编写的示例网络应用程序
• erykpiast/cyclejs-examples ★9 - 使用 Cycle.js 构建的示例 Web 应用程序.
• grozen/trends-cycle ★3 - 用 Cycle.js 编写的松弛趋势搜索
• ivan-kleshnin/cyclejs-examples ★120 - CycleJS 示例集合，ES6.
• ivan-kleshnin/tetris-cyclejs ★12 - 在 CycleJS、ES6 中实现的俄罗斯方块游戏
• phadej/graafi ★20 - 使用 SVG 和全局撤消/重做的 Cycle.js 实验 http://oleg.fi/graafi/
• staltz/matrixmultiplication.xyz ★548 - 交互式矩阵乘法 webapp
• staltz/rxmarbles ★2,577 - Rx Observables 的交互式图表 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 - 用 Cycle.js 和 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 构建的 Reactive Live London Tube 火车状态示例.
• cyclejs-community/built-with-cycle ★9 - A website 展示用 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 - 用于在 Secure Scuttlebutt 网络上实施社交网络的 React Native + Cycle.js 应用程序
• cyclejs/todomvc-cycle ★214 - AllMVC 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 - 使用 CycleJS 的 Meetup.com RSVP 可视化世界各地

Tools¶

CLI¶

• cyclejs-community/create-cycle-app ★160 - 创建没有构建配置的 Cycle.js 应用程序.

Libraries¶

Drivers¶

• @cycle/http - 一个基于 superagent 的用于发出 HTTP 请求的 Cycle.js 驱动程序.
• @cycle/dom - 用于启用与 DOM 交互的 Cycle.js 驱动程序. 该驱动程序基于 snabbdom 作为虚拟 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 - 用于显示和响应 HTML5 通知的 Cycle.js 驱动程序.
• axefrog/cycle-router5 ★30 - 使用 Router5 的路由器驱动程序
• cgeorg/cycle-socket.io ★27 - 用于 Socket.IO 客户端的循环驱动程序
• secobarbital/cycle-fetch-driver ★2 - 使用 Fetch API 发出 HTTP 请求的 Cycle.js 驱动程序.
• r7kamura/cycle-fetcher-driver ★14 - 用于发出 HTTP 请求的 Cycle.js 驱动程序 stackable-fetcher.
• benji6/cycle-audio-graph ★12 - 用于操作 Web Audio API 的 Cycle.js 驱动程序 virtual-audio-graph
• 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 的循环驱动程序
• dralletje/cycle-firebase ★21 - 用于 Firebase 的 Cycle.js 驱动程序
• edge/cycle-blessed ★46 - 用于终端应用程序的 Cycle.js 驱动程序
• 10clouds/cyclejs-cookie ★2 - Cycle.js 的 Cookies 驱动程序
• whitecolor/cycle-async-driver ★25 - 用于创建异步请求/响应 cycle.js 驱动程序的工厂
• raquelxmoss/cycle-keys ★35 - 键盘事件驱动程序
• rektide/recyclec ★0 - Readline 驱动程序
• goodmind/cycle-telegram ★15 - Telegram Bot API 的 Cycle.js 驱动程序
• apoco/cycle-electron-driver ★22 - 与来自 Cycle.js 应用程序的 Electron 接口交互的驱动程序
• rkrupinski/cyclejs-animated-localstorage ★12 - 用于动画（srsly）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 实例的基本 Cycle.js 驱动程序允许图形存储和 p2p 同步
• EnigmaCurry/cycle-deepstream ★8 - 一个 Cycle.js 驱动程序 deepstream.io
• 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 - 一个 Cycle.js 驱动程序 Pusher
• helmoski/cycle-selection-driver - 用于与交互的 Cycle.js 驱动程序 Selection API
• mjyc/cycle-posenet-driver ★1 - 用于姿势检测的 Cycle.js 驱动程序 TensorFlow.js-powered PoseNet
• @cycle-robot-drivers/speech ★1 - 用于语音合成和识别的 Cycle.js 驱动程序 Web Speech API
• @cycle-robot-drivers/sound ★1 - 用于播放声音的 Cycle.js 驱动程序 HTMLAudioElement

Utilities¶

• staltz/chai-virtual-dom ★24 - Chai assertion helpers to test virtual-dom VTrees
• cgeorg/sinject ★10 - 支持 Cycle 循环依赖的依赖注入工具
• erykpiast/cyclejs-group ★20 - 用于在创建流组时减少样板的 CycleJS 框架实用程序.
• erykpiast/cyclejs-wc ★2 - 用于创建基于 Cycle.js 的 Web 组件的实用程序
• ohanhi/hyperscript-helpers ★390 - elm-html 启发编写超标或虚拟超标的帮助程序.
• pH200/cycle-react ★342 - 使用 React 而不是 virtual-dom 和类似 Cycle 的 API
• madcapjake/earlhyperscript ★2 - 使用 Earl Grey's 的辅助函数和宏 document-building syntax 使用 Cycle.js.
• WorldMaker/cycle-gear ★4 - 基于 Cycle 的 MVI 模式形式化的 Cycle 主要功能工厂
• SuperManitu/cyclejs-sortable ★15 - 只需一行代码即可通过拖放使所有内容可排序！
• atomrc/cyclejs-auth0 ★22 - 在您的 Cyclejs 应用程序上开始使用 Auth0 所需的一切（驱动程序 + 组件）
• staltz/cycle-onionify ★244 - Cycle.js 应用程序的分形状态管理
• maiermic/cycle-storageify ★5 - 通过将其洋葱形状态存储在本地存储中来增强您的 Cycle.js 组件（主要功能）
• shfrmn/cycle-lot - 轻松处理 Cycle.js 组件的动态列表（完整的类型支持）
• sarimarton/powercycle - 基于 Cycle.js 的静态 VDOM 组合和类似 React 的开发

Boilerplates¶

• andreloureiro/cyclejs-starter ★50 - 带有 ES6 和 Livereload 的 Cycle.js 入门模板.
• Frikki/generator-cyclejs ★2 - 使用 Yeoman 构建一个 Cycle.js 嵌套对话模块.
• edge/cyc ★194 - 在几秒钟内搭建一个同构的 Cycle.js 应用程序.
• cmdv/cycle-webpack-boilerplate ★101 - 带路由、状态处理和测试的循环应用程序.
• 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 - 一个简单的项目，用于在 cycle.js 中开始使用 TypeScript，使用 Webpack. 将 Visual Studio Code 设置为糖果.
• wyqydsyq/unicycle ★6 - 通过 Webpack 在带有 HMR 和 ServiceWorkers 的 Koa.js 服务器上运行的样板通用 Cycle 应用程序
• syarul/cycle-iso ★4 - 一个准系统样板循环应用程序，其数据流基于承诺并使用 Falcor.js 获取
• snowpack-cycle - 使用 create-snowpack-app 创建 Cycle.js 项目的 Snowpack 应用程序模板

Testing¶

• erykpiast/cyclejs-mock ★22 - 用于测试基于 CycleJS 框架的应用程序的实用程序.
• jeysal/pretty-format-snabbdom ★0 - A pretty-format (Jest snapshot) 插件，用于渲染 snabbdom VNodes 的快照和 React 元素的快照一样好

Debugging¶

• cyclejs/cycle-time-travel ★213 - 用于 Cycle.js 应用程序的时间旅行调试器. 显示一个流可视化工具，您可以拖动它以回到过去.

Components¶

• erykpiast/autocompleted-select ★10 - 选择具有自动完成功能的 Web 组件. 基于 RxJS 和 VirtualDOM.
• enten/cyclejs-calendar ★11 - Cycle.js 的日历组件. 在线试用 here.
• mciparelli/cyclejs-gravatar ★0 - 用于呈现 gravatar 个人资料图像的 Cycle.js 组件.
• tommy-the-runner/cyclejs-ace-editor ★0 - Cycle.js 与 Ace 编辑器的集成使用 brace . 检查一个例子 here.
• raquelxmoss/cycle-color-picker ★44 - Cycle.js 的颜色选择器组件. Check out the example.
• cyclejs-community/cycle-svg-pan-and-zoom ★4 - 适用于 Cycle.js 的 Google 地图样式 SVG 平移和缩放组件

Community¶

• Gitter chat - 问“我怎么...？”

License¶