Awesome Cycle Js – Massive Collection of Resources

Awesome Cycle.js

A collection of awesome Cycle.js tools, resources, videos and shiny things.

• Learn
  • Documentation
  • Tutorials
  • Videos
  • Slides
  • Example Applications
• Tools
  • CLI
• Libraries
  • Drivers
  • Boilerplates
  • Testing
  • Debugging
  • Components
• Community

Learn

Documentation

• cycle.js.org – Cycle.js official tutorial and documentation.

Tutorials

• What Developers Need to Know about MVI (Model-View-Intent) – Post on MVI architecture.
• Cycle.js: a reactive framework – Introduction to Cycle.js with real time data example.
• Building realtime applications with CycleJS and RxJS – Learn how to build realtime applications with CycleJS and RxJS
• Working with HTTP Streams with Cycle.js – Learn how to use Cycle.js to handle HTTP requests and responses

Videos

• What if the user was a function? – Presentation at JSConf BP2015 by Andre Staltz
• Unidirectional data flow architectures – Presentation AtTheFrontend Conference by Andre Staltz
• Cycle.js and functional reactive user interfaces – Presentation at ReactiveConf 2015 by Andre Staltz
• Intro to Functional Reactive Programming with Cycle.js – Presentation by Nick Johnstone
• Cycle.js Fundamentals – Playlist at egghead.io
• Cycle.js was built to solve problems – by Andre Staltz at Frontend.fi
• Brains as Building Blocks – by Andre Staltz at CycleConf 2016
• Back to the Future, Hot reloading with Cycle.js – by Nick Johnstone at CycleConf 2016
• From MVC to FRP – by Gleb Bahmutov at CycleConf 2016
• Cycle.js on the bash side – by Hadrien de Cuzey at CycleConf 2016
• Reactive Programming with Cycle.js – by Luca Mezzalira at JSDay 2016
• Learning how to ride: an introduction to Cycle.js – by Fernando Macias Pereznieto at JS Monthly London
• User Interfaces as Pure Functions of Time – Lightning talk by Thomas Belin at dotjs 2016

Slides

• Cycle.js an honestly reactive framework for web user interfaces – by Eryk Napierała
• Intro to Cycle.js – by Arye Lukashevki
• Reactive Programming with Cycle.js – by Luca Mezzalira
• Cycle.js – building apps with streams only – by Luca Matteis
• Functional Reactive Programming with Cycle.js – by Sudarsan Balaji
• Beyond flux: going full cycle with FRP – by Clément Delafargue

Example Applications

• cyclejs/cycle-examples – Official collection of small Cycle.js examples
• Widdershin/tricycle ★23 – Scratchpad for trying out Cycle.js, relies on Ace Editor with Cycle
• cgeorg/todomvp ★21 – Minimum Viable Pizza, an example webapp written in Cycle.js
• erykpiast/cyclejs-examples ★9 – Example web applications built with Cycle.js.
• grozen/trends-cycle ★3 – Slack trend searching written in Cycle.js
• ivan-kleshnin/cyclejs-examples ★120 – Collection of CycleJS examples, ES6.
• ivan-kleshnin/tetris-cyclejs ★12 – Tetris game implemented in CycleJS, ES6
• phadej/graafi ★20 – Cycle.js experiment with SVG and global undo/redo
  http://oleg.fi/graafi/
• staltz/matrixmultiplication.xyz ★548 – A interactive matrix multiplication webapp
• staltz/rxmarbles ★2,577 – Interactive diagrams of Rx Observables http://rxmarbles.com/
• MarcCloud/magic-cart ★6 – Simple shopping cart of a magic creatures store.
• foxdonut/cycle-todolist ★11 – demonstrates a simple Cycle.js TODO list app with CRUD.
• Mercateo/component-check ★468 – Common patterns for building Cycle.js components
• edge/electron-cycle-media ★27 – Media player written with Cycle.js and Electron.
• kibin/cycle-example-who-to-follow ★16 – Small example partly implements twitter’s who to follow box using github api.
• SkaterDad/cycle-snabbdom-examples ★12 – Examples of nested components, using snabbdom-specific animations.
• bahmutov/draw-cycle ★112 – Interactive visualization of counter application showing the data flow inside a MVI component glebbahmutov.com/draw-cycle
• andreloureiro/pomocycle ★21 – A simple Pomodoro timer.
• laszlokorte/tams-tools ★24 – A set of tools for teaching and learning computer science built with cycle.js.
• lucamezzalira/jsday-cycle-js ★16 – Reactive Live London Tube trains status example built with Cycle.js.
• cyclejs-community/built-with-cycle ★9 – A website to showcase the cool projects built with Cycle.js
• class-ideas/cyclejs-hangman ★10 – A hangman game built with Cycle.js
• wmaurer/cyclejs-fractals ★15 – Dancing pythagorean tree fractal – Animating 2048 SVG nodes.
• fabiothiroki/cyclejs-starwars ★2 – A Star Wars character search app using Cycle.js, RxJS and Virtual DOM tests.
• staltz/mmmmm-mobile ★124 – A React Native + Cycle.js app to implement a social network on Secure Scuttlebutt networks
• cyclejs/todomvc-cycle ★214 – TodoMVC example implemented in Cycle.js
• jefersondaniel/cyclejs-notes – Notes app using Cycle.js and Orbit.js https://jefersondaniel.com/cyclejs-notes
• staltz/dat-installer ★77 – Download, install, and update Android apps through Dat
• usm4n/cycle-hn ★25 – Hackernews Clone Using CycleJS
• lizraeli/cycle-github-emojis – A github emoji viewer made with Cycle.JS webapp
• perjerz3434/meetup.com ★1 – Meetup.com RSVP visualization around the world using CycleJS

Tools

CLI

• cyclejs-community/create-cycle-app ★160 – Create Cycle.js apps with no build configuration.

Libraries

Drivers

• @cycle/http – A Cycle.js Driver for making HTTP requests, based on superagent.
• @cycle/dom – A Cycle.js driver to enable interaction with the DOM. The driver is based on snabbdom as the Virtual DOM library.
• @cycle/storage – A Cycle.js Driver for using localStorage and sessionStorage.
• @cycle/history – This is the standard Cycle.js driver for dealing with the History API
• @cycle/isolate – A utility function to make scoped dataflow components in Cycle.js.
• @cycle/time – Fast and beautiful tests and time management for Cycle.js
• cyclejs/cycle-notification-driver ★20 – A Cycle.js Driver for showing and responding to HTML5 Notifications.
• axefrog/cycle-router5 ★30 – A router driver using Router5
• cgeorg/cycle-socket.io ★27 – A Cycle driver for Socket.IO clients
• secobarbital/cycle-fetch-driver ★2 – A Cycle.js Driver for making HTTP requests, using the Fetch API.
• r7kamura/cycle-fetcher-driver ★14 – A Cycle.js Driver for making HTTP requests using stackable-fetcher.
• benji6/cycle-audio-graph ★12 – A Cycle.js Driver for manipulating the Web Audio API using virtual-audio-graph
• CyclicMaterials/cycle-hammer-driver ★11 – A Cycle.js driver to wrap Hammer.js and detect touch gestures
• jessaustin/cycle-sse-driver ★6 – Source driver for Server-Sent Events/EventSource.
• tylors/cycle-snabbdom ★41 – DOM driver using Snabbdom
• cyclejs-community/cyclic-router ★90 – Router Driver built for Cycle.js
• Widdershin/cycle-animation-driver ★33 – Cycle driver for requestAnimationFrame
• dralletje/cycle-firebase ★21 – A Cycle.js Driver for Firebase
• edge/cycle-blessed ★46 – A Cycle.js Driver for terminal applications
• 10clouds/cyclejs-cookie ★2 – Cookies Driver for Cycle.js
• whitecolor/cycle-async-driver ★25 – Factory for creating async request/response cycle.js drivers
• raquelxmoss/cycle-keys ★35 – Driver for keyboard events
• rektide/recyclec ★0 – Readline driver
• goodmind/cycle-telegram ★15 – A Cycle.js Driver for Telegram Bot API
• apoco/cycle-electron-driver ★22 – Driver to interact with Electron interface from Cycle.js application
• rkrupinski/cyclejs-animated-localstorage ★12 – A Cycle.js driver for animating (srsly) localStorage.
• cyclejs-community/cycle-keyboard ★9 – A keyboard driver for cycle.js
• garrydzeng/cycle-page ★3 – A tiny client-side router for Cycle.js
• jbowden1982/cycle-socketcluster ★5 – A socketcluster driver for Cycle.js
• cyclejs-community/redux-cycles ★599 – A Redux middleware that allows you to handle actions lifecycle with Cycle.js
• JuniperChicago/cycle-gun ★18 – A basic Cycle.js driver wrapping a gun.js instance allowing graph storage and p2p sync
• EnigmaCurry/cycle-deepstream ★8 – A Cycle.js driver for deepstream.io
• Alex0007/cycle-express-driver ★1 – A Cycle.js driver for Express.js server
• mrpierrot/cycle-node-http-server ★4 – A Cycle.js driver for Node.js HTTP(S) server
• mrpierrot/cycle-net ★0 – A Cycle.js driver for Node.js HTTP(S)/WS(S)/Socket.io server
• Avalander/cycle-idb ★4 – A Cycle.js driver wrapping IndexedDB
• unhappychoice/cycle-pusher ★1 – A Cycle.js driver for Pusher
• helmoski/cycle-selection-driver – A Cycle.js driver for interacting with the Selection API
• mjyc/cycle-posenet-driver ★1 – A Cycle.js drivers for pose detection using TensorFlow.js-powered PoseNet
• @cycle-robot-drivers/speech ★1 – Cycle.js drivers for speech synthesis and recognition using Web Speech API
• @cycle-robot-drivers/sound ★1 – A Cycle.js driver for playing sounds using HTMLAudioElement

Utilities

• staltz/chai-virtual-dom ★24 – Chai assertion helpers to test virtual-dom VTrees
• cgeorg/sinject ★10 – a dependency injection tool supporting Cycle’s circular dependencies
• erykpiast/cyclejs-group ★20 – Utility for CycleJS framework for reducing boilerplate when creating groups of streams.
• erykpiast/cyclejs-wc ★2 – Utility for creating Web Components based on Cycle.js
• ohanhi/hyperscript-helpers ★390 – elm-html inspired helpers for writing hyperscript or virtual-hyperscript.
• pH200/cycle-react ★342 – use React instead of virtual-dom with a Cycle-like API
• madcapjake/earlhyperscript ★2 – A helper function and macro for using Earl Grey’s document-building syntax with Cycle.js.
• WorldMaker/cycle-gear ★4 – A main function factory for Cycle based upon a formalization of Cycle’s MVI pattern
• SuperManitu/cyclejs-sortable ★15 – Make everything sortable via drag and drop in only one line of code!
• atomrc/cyclejs-auth0 ★22 – Everything you need to start playing with Auth0 on your Cyclejs app (Driver + component)
• staltz/cycle-onionify ★244 – Fractal state management for Cycle.js apps
• maiermic/cycle-storageify ★5 – Augments your Cycle.js component (main function) by storing its onion-shaped state in local storage
• shfrmn/cycle-lot – Handle dynamic lists of Cycle.js components with ease (full typesript support)
• sarimarton/powercycle – Static VDOM composition and React-like development on top of Cycle.js

Boilerplates

• andreloureiro/cyclejs-starter ★50 – Cycle.js starter template with ES6 and Livereload.
• Frikki/generator-cyclejs ★2 – Scaffold out a Cycle.js Nested Dialogue module using Yeoman.
• edge/cyc ★194 – Scaffold an isomorphic Cycle.js app in seconds.
• cmdv/cycle-webpack-boilerplate ★101 – Cycle app with routing, state handling and tests.
• Widdershin/cycle-hot-reloading-example ★27 – A Cycle.js starter project with hot reloading using browserify-hmr
• mciparelli/cycle-hmr-example ★0 – A Cycle.js starter project using browserify and cycle-hmr
• cycle-community/typescript-starter-cycle ★22 – A simple project for getting started with TypeScript in cycle.js, using Webpack. Has settings for Visual Studio Code as candy.
• wyqydsyq/unicycle ★6 – A boilerplate universal Cycle app running on a Koa.js server with HMR and ServiceWorkers via Webpack
• syarul/cycle-iso ★4 – A barebone boilerplate Cycle app with data stream base on promises and fetched with Falcor.js
• snowpack-cycle – Snowpack app template to create Cycle.js projects with create-snowpack-app

Testing

• erykpiast/cyclejs-mock ★22 – Utility for testing applications based on CycleJS framework.
• jeysal/pretty-format-snabbdom ★0 – A pretty-format (Jest snapshot) plugin for rendering snapshots of snabbdom VNodes as nicely as those of React elements

Debugging

• cyclejs/cycle-time-travel ★213 – A time travelling debugger for Cycle.js apps. Displays a stream visualizer that you can drag to go back in time.

Components

• erykpiast/autocompleted-select ★10 – Select Web Component with autocompletion. Based on RxJS and VirtualDOM.
• enten/cyclejs-calendar ★11 – Calendar component for Cycle.js. Try it online here.
• mciparelli/cyclejs-gravatar ★0 – Cycle.js component for rendering a gravatar profile image.
• tommy-the-runner/cyclejs-ace-editor ★0 – Cycle.js intergration with Ace Editor using brace. Check an example here.
• raquelxmoss/cycle-color-picker ★44 – A Color Picker component for Cycle.js. Check out the example.
• cyclejs-community/cycle-svg-pan-and-zoom ★4 – A Google Maps style SVG pan and zoom component for Cycle.js