kristianmandrup/awesome-cyclejs

A curated list of awesome Cycle.js resources

Awesome Cycle.js

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

• Learn
  • Documentation
  • Tutorials
  • Tutorial video series
  • Videos
    • 2017
    • 2016
    • 2015
  • Cycle conf
  • Slides
  • Try Cycle online
  • Built with Cycle
  • Example collections
  • Sample apps
• Tools
  • CLI
• Libraries
  • Drivers
  • Boilerplates
  • Testing
  • Debugging
  • Components
• Community

---

Help!?

• Ask on Gitter chat

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

Tutorial video series

• Cycle.js Fundamentals - Playlist at egghead.io (mar 2016)

Videos

2017

• Introduction to Cycle.js by Marius Kazlauskas at Vilnius.js (feb 2017) slides

2016

• User Interfaces as Pure Functions of Time - Lightning talk by Thomas Belin at dotjs 2016 (dec 2016)
• See the data flowing through your app by Andre Staltz at Full stack fest 2016 (sep 2016)
• Reactive Programming with Cycle.js - by Luca Mezzalira at JSDay 2016 (jun 2016)
• Unidirectional data flow architectures - Presentation AtTheFrontend Conference (may 2016) by Andre Staltz (http://twitter.com/andrestaltz)
• Learning how to ride: an introduction to Cycle.js - by Fernando Macias Pereznieto at JS Monthly London (may 2016)
• Cycle.js was built to solve problems - by Andre Staltz at Frontend.fi (mar 2016)

2015

• What if the user was a function? - Presentation at JSConf BP2015 (june 2015) by Andre Staltz
• Cycle.js and functional reactive user interfaces - Presentation at ReactiveConf 2015 (nov 2015) by [Andre Staltz]
• Intro to Functional Reactive Programming with Cycle.js - Presentation by [Nick Johnstone] (jul 2015) (https://twitter.com/widdnz)

Cycle Conf

Cycle Conf 2016: Copenhagen

Cycle conf

• Back to the Future, Hot reloading with Cycle.js - by Nick Johnstone at CycleConf 2016 (apr 2016)
• From MVC to FRP - by Gleb Bahmutov at CycleConf 2016 (apr 2016)
• Cycle.js on the bash side - by Hadrien de Cuzey at CycleConf 2016 (apr 2016)
• Brains as Building Blocks - by Andre Staltz at CycleConf 2016 (apr 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] (http://lmatteis.github.io/cyclejs-slides/keynote/index.html) - by Luca Matteis
• Functional Reactive Programming with Cycle.js - by Sudarsan Balaji

Try Cycle online

Name	Dependencies	DevDependencies	Description	★
tricycle			Scratchpad for trying out Cycle.js, relies on Ace Editor with Cycle

Built with Cycle

Name	Dependencies	DevDependencies	Description	★
built-with-cycle			A website to showcase the cool projects built with Cycle.js

Example collections

Name	Dependencies	DevDependencies	Description	★
cycle-examples			Official collection of small Cycle.js examples
cyclejs-examples			Example web applications built with Cycle.js.
cyclejs-examples			Collection of CycleJS examples, ES6.
cycle-snabbdom-examples			Examples of nested components, using snabbdom-specific animations.

Sample Apps

Todo Lists

Name	Dependencies	DevDependencies	Description	★
todomvp			Minimum Viable Pizza, an example webapp written in Cycle.js
cycle-todolist			demonstrates a simple Cycle.js TODO list app with CRUD.

Misc

Name	Dependencies	DevDependencies	Description	★
trends-cycle			Slack trend searching written in Cycle.js
rxmarbles			Interactive diagrams of Rx Observables http://rxmarbles.com/
magic-cart			Simple shopping cart of a magic creatures store.
component-check			Common patterns for building Cycle.js components
cycle-example-who-to-follow			Small example partly implements twitter’s who to follow box using github api.
draw-cycle			Interactive visualization of counter application showing the data flow inside a MVI component glebbahmutov.com/draw-cycle
pomocycle			A simple Pomodoro timer.
jsday-cycle-js			Reactive Live London Tube trains status example built with Cycle.js.

Teaching tools

|tams-tools|||A set of tools for teaching and learning computer science built with cycle.js.||

Games & Graphics

Name	Dependencies	DevDependencies	Description	★
graafi			Cycle.js experiment with SVG and global undo/redo http://oleg.fi/graafi/
cyclejs-fractals			Dancing pythagorean tree fractal : Animating 2048 SVG nodes.
tetris-cyclejs			Tetris game implemented in CycleJS, ES6
cyclejs-hangman			A hangman game built with Cycle.js

Desktop & Mobile apps

Name	Dependencies	DevDependencies	Description	★
electron-cycle-media			Media player written with Cycle.js and Electron.

Tools

CLI

Name	Dependencies	DevDependencies	Description	★
create-cycle-app			Create Cycle.js apps with no build configuration.

Libraries

Drivers

Virtual DOM

Name	Dependencies	DevDependencies	Description	★
cycle-dom			The standard DOM Driver for Cycle.js (core)
cycle-snabbdom			DOM driver using Snabbdom (jun 2016)

Browser APIs

Name	Dependencies	DevDependencies	Description	★
cycle-history			The standard Cycle driver for dealing with the History API (sep 2016)
cyclejs-cookie			Cookies Driver for Cycle.js (aug 2016)

User Interaction (UX)

Name	Dependencies	DevDependencies	Description	★
cycle-keys			Driver for keyboard events (sep 2016)
cycle-keyboard			A keyboard driver for cycle.js (dec 2016)
cycle-hammer-driver			A Cycle.js driver to wrap Hammer.js and detect touch gestures (nov 2015)
cycle-audio-graph			A Cycle.js Driver for manipulating the Web Audio API using (apr 2016)virtual-audio-graph

Animation/UI

Name	Dependencies	DevDependencies	Description	★
cycle-animation-driver			Cycle driver for requestAnimationFrame (oct 2016)

Routers

Name	Dependencies	DevDependencies	Description	★
cyclic-router			Router Driver built for Cycle.js (apr 2016)
cycle-page			A tiny client-side router for Cycle.js (fresh)
cycle-router5			A router driver using Router5 (sep 2015)

Storage

Name	Dependencies	DevDependencies	Description	★
cycle-storage			A Cycle.js Driver for using localStorage and sessionStorage. (fresh)
cyclejs-animated-localstorage			A Cycle.js driver for animating (srsly) localStorage. (jun 2016)
cycle-gun			A basic Cycle.js driver wrapping a gun.js instance allowing graph storage and p2p sync. (fresh)
cycle-deepstream			A Cycle.js driver for deepstream.io (fresh)
cycle-firebase			A Cycle.js Driver for Firebase (mar 2016)
cycle-graphql-driver			A Cycle.js Driver for GraphQL using most.js (dec 2016)

Communication/protocols

Drivers to work with external communication protocols (HTTP, Sockets etc.)

Sync (Request/Response) protocols

Name	Dependencies	DevDependencies	Description	★
cycle-fetch-driver			A Cycle.js Driver for making HTTP requests, using the Fetch API. (oct 2015)
cycle-fetcher-driver			A Cycle.js Driver for making HTTP requests using (oct 2015)stackable-fetcher.

Async protocols

Name	Dependencies	DevDependencies	Description	★
cycle-socket.io			A Cycle driver for Socket.IO clients (oct 2016)
cycle-socketcluster			A socketcluster driver for Cycle.js (fresh)
cycle-async-driver			Factory for creating async request/response cycle.js drivers (aug 2016)

Push notifications

Name	Dependencies	DevDependencies	Description	★
cycle-notification-driver			A Cycle.js Driver for showing and responding to HTML5 Notifications. (mar 2016)
cycle-sse-driver			Source driver for Server-Sent Events/EventSource. (jan 2016)

Runtime Environments

Name	Dependencies	DevDependencies	Description	★
cycle-electron-driver			Driver to interact with Electron interface from Cycle.js application (mar 2016)
cycle-blessed			A Cycle.js Driver for terminal applications (may 2016)

Web Frameworks

Name	Dependencies	DevDependencies	Description	★
redux-cycles			A Redux middleware that allows you to handle actions lifecycle with Cycle.js (fresh)

Operating System (OS)

Name	Dependencies	DevDependencies	Description	★
recyclec			Readline driver (feb 2016)

Bots

Name	Dependencies	DevDependencies	Description	★
cycle-telegram			A Cycle.js Driver for Telegram Bot API (nov 2016)

Utilities

Name	Dependencies	DevDependencies	Description	★
sinject			a dependency injection tool supporting Cycle's circular dependencies (jun 2015)
cyclejs-group			Utility for CycleJS framework for reducing boilerplate when creating groups of streams (jul 2015)

UI/UX

Name	Dependencies	DevDependencies	Description	★
cyclejs-sortable			Make everything sortable via drag and drop in only one line of code (mar 2017)

Web components

Name	Dependencies	DevDependencies	Description	★
cyclejs-wc			Utility for creating Web Components based on Cycle.js (jul 2015)
cycle-custom-elementify			Utility for creating Custom Elements (v0/1) based on Cycle.js (sep 2016)

Testing

Name	Dependencies	DevDependencies	Description	★
chai-virtual-dom			Chai assertion helpers to test virtual-dom VTrees (sep 2015)

Hyperscript (render)

Name	Dependencies	DevDependencies	Description	★
cycle-react			use React instead of virtual-dom with a Cycle-like API (dec 2015)
earlhyperscript			A helper function and macro for using Earl Grey's document-building syntax with Cycle.js (jul 2015)
hyperscript-helpers			elm-html inspired helpers for writing hyperscript or virtual-hyperscript (nov 2016)

Authentication

Name	Dependencies	DevDependencies	Description	★
cyclejs-auth0			Everything you need to start playing with Auth0 on your Cyclejs app (Driver + component) (feb 2017)

Higher level abstractions

Name	Dependencies	DevDependencies	Description	★
cycle-gear			A main function factory for Cycle based upon a formalization of Cycle's MVI pattern (jan 2017)

Boilerplates

Name	Dependencies	DevDependencies	Description	★
generator-cyclejs			Scaffold out a Cycle.js Nested Dialogue module using Yeoman (sep 2015)
cycle-bp			Boilerplate template for building Cycle.js apps (oct 2015)
cyc			Scaffold an isomorphic Cycle.js app in seconds (oct 2016)
cycle-webpack-boilerplate			Cycle app with routing, state handling and tests (dec 2017)

Hot/live reload

Name	Dependencies	DevDependencies	Description	★
cyclejs-starter			Cycle.js starter template with ES6 and Livereload (jan 2017)
cycle-hot-reloading-example			A Cycle.js starter project with hot reloading using browserify-hmr (mar 2016)
cycle-hmr-example			A Cycle.js starter project using browserify and cycle-hmr (mar 2016)

with Web Server

Name	Dependencies	DevDependencies	Description	★
hapi-cycle			A boilerplate isomorphic Cycle app running on a Hapi server with a simple CRUD skeleton to get you started (oct 2016)

TypeScript

Name	Dependencies	DevDependencies	Description	★
typescript-starter-cycle			A simple project for getting started with TypeScript in cycle.js, using Webpack. Has settings for Visual Studio Code as candy (oct 2016)

Testing

Name	Dependencies	DevDependencies	Description	★
cyclejs-mock			Utility for testing applications based on CycleJS framework.

Debugging

Name	Dependencies	DevDependencies	Description	★
cycle-time-travel			A time travelling debugger for Cycle.js apps. Displays a stream visualizer that you can drag to go back in time. Try it online here.

Components

Name	Dependencies	DevDependencies	Description	★
autocompleted-select			Select Web Component with autocompletion. Based on RxJS and VirtualDOM.
cyclejs-calendar			Calendar component for Cycle.js. Try it online here.
cyclejs-gravatar			Cycle.js component for rendering a gravatar profile image.
cyclejs-ace-editor			Cycle.js intergration with Ace Editor using brace. Check an example here.
cycle-color-picker			A Color Picker component for Cycle.js. Check out the example.

Graphics

Name	Dependencies	DevDependencies	Description	★
cycle-svg-pan-and-zoom			A Google Maps style SVG pan and zoom component for Cycle.js

Community

• Gitter chat - Ask 'how do I ...?'

License