"Slides" for the MalmöJS React alternatives meetup peek into CycleJS!
Available at https://github.com/krawaller/cycle-example-covid (along with example source)
Source code in this repo
Published live at https://malmojs-cycle.netlify.app/
For ease of showing code, I have
- many files
- verbose typings
- very religious patterns
Real app would be way more succinct
You've probably seen this gist by André Staltz!
His framework takes the dog VERY literally.
Been around for quite a while!
Staltz' talk at ReactConf 2015
Also
Uses xstream internally (for now)
...but there are adapters for RXJS, etc
- Components: Your programs! Pure functions.
- Drivers: Where side effects happen
- Sources: Obj of streams, input to components
- Sinks: Obj of streams, output from components
Each driver operates on a key in the sources/sinks.
An important example is the DOM driver:
sources.DOM
lets you catch eventssinks.DOM
is a stream of vnodes (to be rendered)
The example app has two home-made drivers:
logDriver
logs every new state emissionlocalStorageDriver
saves/loads to LS
Components are composable
Component tree:
Internally a component will commonly use the Model View Intent pattern
The ConfirmButton
component in example adheres to this.
Outermost component has entire state (like redux store)
Adapted for child component via lenses
Most example components look like this.
- NeoCycle
- Callbags