thoughts on BOSS pattern for components

[sdebaun]

Bunch Of Stinkin' Streams

WIP

// root/index
export default sources => {
  const response$ = _authedResponse$(sources.auth$, sources.queue$)

  // contains all the user*$ and redirect*$ streams
  // this feels ugly as hell
  const userSources = _userSources(sources.auth$, sources.firebase)

  // OR:
  const {
    userProfileKey$, userProfile$, redirectOnLogin$, redirectOnLogout$, redirectOnUnconfirmed$
  } = _userSources(sources.auth$, sources.firebase)

  const page$ = nestedComponent(
    sources.router.define(_routes),
    {...sources, ...userSources, response$}
  )

  const queue$ = _authedTask$(sources.auth$, glean('queue$',page$))

  const route$ = Observable.merge(
    glean('route$',page$), userSources.redirectUnconfirmed$
  )

  const sinks = glean('DOM', 'auth$', [page$])
  return {queue$, route$, ...sinks}
}

// appframe
export default sources => {
  const appBar = AppBar(sources)
  const sideNav = SideNav(sources)

  const children = [appBar,sideNav]

  const DOM = combineLatestObj({
    appBarDOM: appBar.DOM,
    sideNavDOM: sideNav.DOM,
    headerDOM: sources.headerDOM,
    pageDOM: sources.pageDOM,
  }).map(_DOM)

  const sinks = glean('auth$','queue$','route$',children)
  return {DOM, ...sinks}
}

[sdebaun]

https://github.com/sdebaun/sparks-cyclejs/blob/refactor-appmenu/src/components/AppMenu/index.js

first attempt with this pattern at a lower-level component

[TylorS]

I really like the way that the AppMenu looks using this pattern. It keeps functions small, simple and focused on a single problem.