These are chat archives for canjs/canjs

14th
Feb 2018
Viktor Busko
@Lighttree
Feb 14 2018 17:12

Can someone explain visible difference between can observables and stream functionality ? LIke Kefir streams / toStream etc. What is possible with streams that isn't possible with observables ?

For example here: https://canjs.com/doc/guides/technical.html in section where redux-like approach described. There is point:
Having a single, ApplicationViewModel that contains all state, derived using can-define-stream from events dispatched on the ApplicationViewModel.
I cant understand why we need can-define-stream here ? Any observable will have change event as well.

like in 4.0 there is value stream added. But you could have same functionality in set before, isn't it ?
well...if your value was list pushing new items there didn't call set and with value it may be different, but still
Kevin Phillips
@phillipskevin
Feb 14 2018 17:24
streams allow you to define a property based on the current value of other properties as well as the change events of other properties
an example we often give is the City/State picker on http://www.place-my-order.com/restaurants
City changes
  • to the selected city
  • to null when any change event happens with state
withOUT streams you had to use a setter on state in order to accomplish this
Viktor Busko
@Lighttree
Feb 14 2018 17:28
So the benefit is in encapsulation of property behavior in one place right ?
Right - putting all the logic for each property within its own property definition is a big improvement
this is a trivial example... but in larger apps, you can end up with the definition for a property in many places across many different files
it's really easy for this pattern to snowball into a huge problem that makes your code very difficult to change without breaking something else
Viktor Busko
@Lighttree
Feb 14 2018 17:31
Ok thanks, I think I got the idea.
Kevin Phillips
@phillipskevin
Feb 14 2018 17:32
streams are a good solution to any problem like this
but they're pretty hard to learn
the value behavior is a lot simpler and solves most of the same problems
Frank Lemanschik
@frank-dspeed
Feb 14 2018 19:46
why do you think streams are hard to learn
they are a simple observe able
that emit values
Kevin Phillips
@phillipskevin
Feb 14 2018 20:32
because I've tried to teach them to people
and people find them confusing
Frank Lemanschik
@frank-dspeed
Feb 14 2018 20:36
hmmm i like teaching streams
i am at present preparing a biger series of streaming tutorials maybe your interrested in them will send you url once released
<form>
    <input class="x"> + <input class="y"> = <span class="result"></span>
</form>
Using most.js to make it reactive:
import { fromEvent, combine } from 'most'

const xInput = document.querySelector('input.x')
const yInput = document.querySelector('input.y')
const resultNode = document.querySelector('.result')

const add = (x, y) => x + y

const toNumber = e => Number(e.target.value)

const renderResult = result => {
    resultNode.textContent = result
}

export const main = () => {
    // x represents the current value of xInput
    const x = fromEvent('input', xInput).map(toNumber)

    // y represents the current value of yInput
    const y = fromEvent('input', yInput).map(toNumber)

    // result is the live current value of adding x and y
    const result = combine(add, x, y)

    // Observe the result value by rendering it to the resultNode
    result.observe(renderResult)
}
ups
with canjs all this is even much more easy
Kevin Phillips
@phillipskevin
Feb 14 2018 20:41
I like teaching streams too
Frank Lemanschik
@frank-dspeed
Feb 14 2018 20:42
yaa stream love
:D
i think they are the most logic for long running processes
Kevin Phillips
@phillipskevin
Feb 14 2018 20:42
but if you're teaching canjs and you need to solve the one problem mentioned above (resetting city when state changes), then having to teach all of streams is a bit of overkill
Frank Lemanschik
@frank-dspeed
Feb 14 2018 20:42
and the clean up is like magic
so out of memory managment view this is the holy gral
for any resource managment
did you use most.js ?
or only kefir if so look into most js it has magic stuff like multicast streams
i design whole apps with it i will even rewrite canjs to use only that :)
Thomas Sieverding
@Bajix
Feb 14 2018 20:44
I bet it would be easy to make most.js compatible with can-streams
Frank Lemanschik
@frank-dspeed
Feb 14 2018 20:44
but thats hard work i first start with can-quee
as a stream is a queue and most has shedulers
its all a dream
in some month a canjs app could be a monadic self healing stream
the ecosystem of most is growing to be the defacto framework of frameworks
Kevin Phillips
@phillipskevin
Feb 14 2018 20:46
I usually use RxJS
Frank Lemanschik
@frank-dspeed
Feb 14 2018 20:46
look into most you will laught about rhx
rx
see the benchmark but the ecosystem is also the most amazing
its also nativ promise compatible
so works for any canjs value ;)
here the amazing docs