gistfile1.js

function app(interactions) {
  return interactions.get('thing', 'click')
    .startWith(0)
    .scan(-1, (x,y) => x+1)
    .map(number => 
      h('div', [
        h('p', `Counter: ${number}`),
        h(`my-element`, {ref: 'thing'})
      ])
    );
}

I'm 100% with @ryanflorence on this one. This was immediately the first and biggest problem I saw when reading through the examples, and the whole reason I even came across this conversation (and the lengthy conversations in the repo issues), because I was sure this had raised alarm bells for others too (it had). This isn't just a matter of changing how we think in functional vs OO patterns: this is bad practice.

Class names have no place as event identifiers. Any CSS selector is going to be hugely problematic, and IDs will be a nightmare (no more re-usable elements, and you better hope the ID you choose isn't being used anywhere else in the app). Conventions can't solve problems, they are hacks to manage problems which shouldn't exist in the first place.

Right now, Cycle has effectively zero scoping of events. Scoping it to the div it was applied to in the DOM means single page apps (the primary target audience of frameworks like Cycle) have all events effectively globally scoped, so namespace collisions in any long-term complex scaling app are inevitable and managing multiple re-usable atomic elements on the same page becomes a huge pain in the ass.

It seems the only solutions to the lack of scoped events and hijacking CSS selectors for events is "use a naming convention". I'm sorry, but that's just shit. These problems need to be solved at a fundamental level.

They are an immediate Big Fucking Red Flag to anyone working on serious apps (not Todo MVC) with large teams. I would love to use Cycle, but would be a clusterfuck until these issues are resolved.