These are chat archives for canjs/canjs

5th
Apr 2018
Andrey Furs
@yganda
Apr 05 2018 06:49
@chasenlehara thanks!
Viktor Busko
@Lighttree
Apr 05 2018 12:09

Guys what is the best tutorials/examples to understand how Can.js app should manage its state and data flow ?
We are working for a while with Can.js and still don't have straightforward vision how application should handle its state. Mostly this is because of CanJS flexibility, because you can organize things in a different ways. This usually brings us to situation when we have many applications that organized in a different way. Even in CanJS examples similar things handled in a different ways from time to time.

Maybe it makes sense to create some video that will explain approaches and best practices ?

For example we already use "Data down / Actions Up" (https://dockyard.com/blog/2015/10/14/best-practices-data-down-actions-up) approach that you referenced in some... I don't remember where exactly actually, but I read it somewhere :D
But a lot of questions and misunderstanding happens when you have to pass props into deep of component tree. OR in case when you have component that you need in a completely different component tree branch. (For example "Shopping cart" which might react on different events in application from different components).
In React they have Context API (https://reactjs.org/docs/context.html) That solves this issue, in Angular there was... rootScope, maybe something different in ng2+.
Its frustrating when you think about how to deal with this in CanJS. We created some Define map that works like application store/root scope in one of our applications, but this is our own solution that not part of CanJS as framework, so we can't create reusable components that relies on this, because we can't guarantee that in another app we will have same approach.

Kevin Phillips
@phillipskevin
Apr 05 2018 14:57
I'm not sure there is any one place that has a great answer for you, @Lighttree
I think it would be a great proposal for a new guide / video
the most common solution is to:
  • put the state in the ViewModel closest to where it is needed
  • pass data to child components through bindings
like you mentioned, this can get difficult if you have to pass state to components several levels deep
you can use other approaches like modules that export singleton DefineMaps
or using your route.data directly
but both of these make things more difficult to test
Mohamed Cherif Bouchelaghem
@cherifGsoul
Apr 05 2018 15:12
@Lighttree to add to what @phillipskevin said in canjs we used to have AppState or GlobalState it's the same as your Application store/root it can hold shared props like if user is logged in or if isAdmin
What I do also is separate the component which is mainly UI and their state depends on the business logic
The business logic are in the parent components and the UI components are their children where the state is exposed