Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Cycle.js – A functional and reactive JavaScript framework for predictable code

cycle.js.org

Post reply on HN
Print view View original

1–10 of 64 posts

Re: Cycle.js – A functional and reactive JavaScript framework for predictable code

#2

Post by jakelazaroff »

Cycle is really cool, and I'd love to see reactive programming become more popular, but after trying it out for a project it has a few ergonomics issues that keep me from using it as my primary web framework.

- Dynamic lists of components are really annoying to create. In Cycle, the happy path is calling every component function in your app at startup to set up the data flow graph, and then your reactive operators handle the actual logic. With dynamically added or removed components, you get a stream of "sinks" and then have to splice them into your data flow somehow.

- Circular dependencies are cumbersome. If a parent passes a value to a child which can change that value in the parent, you essentially have to create a stub stream in the parent, use it to derive the parent's state and then "imitate" the output of the child as well.

That said, Cycle has a lot of great ideas that I want to become more mainstream. If you have a free weekend, try it! The creator André Staltz's blog is also a good read: https://staltz.com/

Re: Cycle.js – A functional and reactive JavaScript framework for predictable code

#4

Post by XCSme »

The code looks a bit messy to be honest, maybe it's just the variable naming. `const input$ = sources.DOM.select('.field').events('input')` Why not name it the same as the DOM function `querySelector` ? `const name$ = input$.map(ev => ev.target.value).startWith('')` Wouldn't in this case `name$` be a boolean, but then `map` is called on a boolean. I just find the syntax very confusing.

Re: Cycle.js – A functional and reactive JavaScript framework for predictable code

#5

Post by typon »

XCSme wrote: post #4

The code looks a bit messy to be honest, maybe it's just the variable naming. `const input$ = sources.DOM.select('.field').events('input')` Why not name it the same as the DOM function `querySelector` ? `const name$ = input$.map(ev => ev.target.value).startWith('')` Wouldn't in this case `name$` be a boolean, but then `map` is called on a boolean. I just find the syntax very confusing.

What makes you guess that `name$` is a boolean?

Re: Cycle.js – A functional and reactive JavaScript framework for predictable code

#6

Post by projectramo »

XCSme wrote: post #4

The code looks a bit messy to be honest, maybe it's just the variable naming. `const input$ = sources.DOM.select('.field').events('input')` Why not name it the same as the DOM function `querySelector` ? `const name$ = input$.map(ev => ev.target.value).startWith('')` Wouldn't in this case `name$` be a boolean, but then `map` is called on a boolean. I just find the syntax very confusing.

Perhaps you were thinking of “name?” Because there is nothing about “$name” that implies it’s a Boolean

Re: Cycle.js – A functional and reactive JavaScript framework for predictable code

#7

Post by sritchie »

typon wrote: post #5
XCSme wrote: post #4

The code looks a bit messy to be honest, maybe it's just the variable naming. `const input$ = sources.DOM.select('.field').events('input')` Why not name it the same as the DOM function `querySelector` ? `const name$ = input$.map(ev => ev.target.value).startWith('')` Wouldn't in this case `name$` be a boolean, but then `map` is called on a boolean. I just find the syntax very confusing.

What makes you guess that `name$` is a boolean?

I think the poster is assuming that .startWith(“) returns a Boolean, yeah?

Re: Cycle.js – A functional and reactive JavaScript framework for predictable code

#8

Post by jakelazaroff »

XCSme wrote: post #4

The code looks a bit messy to be honest, maybe it's just the variable naming. `const input$ = sources.DOM.select('.field').events('input')` Why not name it the same as the DOM function `querySelector` ? `const name$ = input$.map(ev => ev.target.value).startWith('')` Wouldn't in this case `name$` be a boolean, but then `map` is called on a boolean. I just find the syntax very confusing.

By convention, anything suffixed with $ is a stream. input$ is a stream of input events on all elements matching the selector ".field". The declaration for name$ says to take that stream of events and turn it into a stream of the value of those events, and to seed it with an empty string as the initial value.

Reactive programming is a paradigm shift and definitely tough to wrap your head around at first. André Staltz (the creator of Cycle) has a good intro here: https://gist.github.com/staltz/868e7e9bc2a7b8c1f754

Post reply on HN