This is a blog post with slides and references shown during my presentation "Cycle.js: get in the loop" delivered at FrontEnd Camp at United Nations, NYC, 2016. The slides are at slides.com/bahmutov/cyclejs-frontendcamp and embedded below for convenience.
Introduction
- CycleJS framework home page is cycle.js.org
- Comparison of making front end component in different frameworks Mercateo/component-check and its conclusion about Cycle.JS
Cycle.js is conceptionally maybe the best framework currently. "Best" in the sense of bug free, testability and logical structure. But for me it is really hard to write and understand. Too hard actually. I hope this changes in the future, too.
Functional programming
- How to get better at functional programming in JS
- JavaScript journey code repo
- JavaScript partial application vs context binding
- Good presentation on Ramda.compose
- Point-free blog post and how to adapt function signatures to achieve it
Reactive programming
- Reactive data using spreadsheets:
- How to implement a reactive spreadsheet using Angular in 20 minutes tutorial and the original example itself. You can refer to other cells using simple "A1" or "B2" notation. For instance, enter value 10 in cell "A1", then enter in cell "B2" an expression "A1 + 5". Now change value in cell "A1" and notice that "B2" has updated.
- I have updated the code to allow simple expression with multiple
cells. For example, cell C1 could be
A1 + B1and update itself if cells 'A1' or 'B1' change.
- Same spreadsheet used to update live DOM nodes using same cell evaluation - a mini "web app"
Working with Observables
- Rx.Observable.create
- Observables are almost like functions
- Nice diagrams and explanation how React is not reactive in these slides
- Reactive operators showing with interactive diagrams at rxmarbles.com
- How functional programming concepts are useful in reactive applications
- Why we built xstream explains the impetus behind writing very small stream library xstream for Cycle.js
Useful libraries
reactive streams
Performance benchmarks by most.js team
virtual dom
Cycle.js concepts
- How Cycle.js achieves its purity
- Cycle.js drivers
- Awesome Cycle.js resources
- bahmutov/draw-cycle example
- How "reducer" pattern looks in reactive streams blog post
How to learn
- Getting started
- Cycle.js fundamentals - paid video tutorial from Egghead.io
- Cycle on Gitter and as a community on GitHub
- Awesome Cycle list
- CycleConf
People
- @CycleJS
- André Stalz, @andrestaltz - creator of Cycle.js
- Nick Johnstone @widdnz, author of hot reloader, time travelling debugger and Try Cycle.js live website
- Tylor Steinberger @tylors167 - co-author of Cycle.js, core contributor to Cycle, most.js and xstream