These are chat archives for jdubray/sam

29th
Jul 2016
Jean-Jacques Dubray
@jdubray
Jul 29 2016 02:21
sounds like a fun thing to do for the week-end :-D
Riccardo
@riccardoferretti
Jul 29 2016 11:00
@jdubray I was looking at the parent/child example (https://github.com/jdubray/sam-samples/tree/master/react-child-instance) - is this still the best example to check?
Jean-Jacques Dubray
@jdubray
Jul 29 2016 12:32
Yes, I don't think I have another example. A parent/child SAM implementation is relatively trivial, the parent needs to instantiate the child as it renders the corresponding view, once the child is ready to return control to the parent, it presents a proposal to the parent's model.
React makes it a bit harder to wire the SAM implementation outside the React components/programming model. That's why Redux has all this "connect" ceremony, but other than that, it would look about the same for any Web framework.
Scott Conklin
@srconklin
Jul 29 2016 16:56

blockquote A parent/child SAM implementation is relatively trivial, the parent needs to instantiate the child as it renders the corresponding view, once the child is ready to return control to the parent, it presents a proposal to the parent's model.

I have been looking for an example for this after searching this forum on all the discussions about components and parent child implementations after trying to reason about who would take on what responsibility .. e.g: still not clear if it is best practice for a child component to have its own model, state, view , action stack or not.. etc..

would it be much to create an example that just uses plain JS
I have been thinking about how a SAM implementation would look for the equivalent of the components tutorial in cycleJS with passed in props and how the output is merged into the main app stream. http://cycle.js.org/components.html
Can a quick example of this nature be put together fairly easily?

Jean-Jacques Dubray
@jdubray
Jul 29 2016 17:03
A child instance would make sense in a couple of scenarios:
1/ the model is running on the server (user session) and the UX for the current activity is best implemented with part of the model running on the client (e.g. a complex form/wizard that submits its data back to the server on completion)
2/ when you truly have independent/reusable model fragments (model composition) and you don't want to make the implementation of the model/state more complex
Scott Conklin
@srconklin
Jul 29 2016 17:05
Would a reusable slider "widget" that displayed max and min values and labels that when operated returned a value that could affect something in the app be a good scenario?
http://jsbin.com/seqehat/2/edit?html,js,output
Jean-Jacques Dubray
@jdubray
Jul 29 2016 17:06
You truly need two models, and in general two state representations (and hence two nap() functions). The way to enter a child component is via an action that presents its proposal to the child model. Actions are always autonomous.
Scott Conklin
@srconklin
Jul 29 2016 17:07
but the models and state representation could be encapsulated in the slider "control" (for a lack of a better term) that can be accessed/referenced via props passed in, no?
Jean-Jacques Dubray
@jdubray
Jul 29 2016 17:08
The problem with the slider is that there is no "submit"
so you would not know when to return control to the parent
Scott Conklin
@srconklin
Jul 29 2016 17:08
no, buy there is a user action taken when you slide the slider, purely reasonable UI experience
Jean-Jacques Dubray
@jdubray
Jul 29 2016 17:09
yes, I agree, but you'd have to have to decide when you return control to the parent
Scott Conklin
@srconklin
Jul 29 2016 17:09
oh i see
Jean-Jacques Dubray
@jdubray
Jul 29 2016 17:10
imagine a parent running on the server, you would have the same question whether you use SAM or not
You could set a timer in nap() and if you have not change the value is 200ms, perhaps you can return control to the parent
that would be easy to do
Scott Conklin
@srconklin
Jul 29 2016 17:11
I see what you are saying.. I thinking to rigidly about encapsulating reusable UI controls
Jean-Jacques Dubray
@jdubray
Jul 29 2016 17:12
You'd have to check on the lastTime the value changed rather than the value itself to avoid glitches (like you are sliding, but you happen to be at the same value 200ms later)
Yes, that makes sense for reusable components
but, I think components are a tiny bit bigger than a single slider, in your example you would manage both sliders together.
I would not have a single model per slider, though it's ok to do so.
Scott Conklin
@srconklin
Jul 29 2016 17:16

well that is where the strategizing comes in that i have been having a hard time with.... to make or compoent or not; how much responsibility of the component; how to communicate with them and how to make the parent app implement it etc..

i took it on myself to try and create SAM implementation of the same tutorial that i used to learn cycleJS when i first discovered it and I find myself failing misreably

I am completely unsure how i would do this in SAM using only JS
Jean-Jacques Dubray
@jdubray
Jul 29 2016 17:31
SAM is really about designing components that publish events and letting the state representation orchestrate where and how they display.
The slider is a bit tricky, let me work on it over the week-end.
Jean-Jacques Dubray
@jdubray
Jul 29 2016 17:47
Looks like I would have to use a library like this: http://rangeslider.js.org/
I am assuming that Cycle.js uses similar techniques under the cover
Scott Conklin
@srconklin
Jul 29 2016 17:50
hmm. I thought that cycleJS managed that easily because that is the nature of streams
@jdubray technically the slider was just practice to use SAM and plain JS to build a component not a specific need.. Maybe a better example of parent child or components is to do one that does not use React. That might be more useful to more people.
Jean-Jacques Dubray
@jdubray
Jul 29 2016 17:55
no, the problem is not stream... it is focus. Under the cover it is doing the same thing.
wiring brings no value
Scott Conklin
@srconklin
Jul 29 2016 18:00
ok forget that for now... to specific. I think a better example would be to just do a non -React version of this.
https://github.com/jdubray/sam-samples/blob/master/react-child-instance/index.html
I would like to see how you props, logic control etc would be managed if you were just using SAM and JS
Jean-Jacques Dubray
@jdubray
Jul 29 2016 18:16
I can do both at the same time
As I understand it, the default HTML5 version of the slider would not let you update the DOM http://demo.tutorialzine.com/2011/12/what-you-need-to-know-html5-range-input/
Jean-Jacques Dubray
@jdubray
Jul 29 2016 18:22
so I guess, that solves the focus problem
I'll focus on the parent/child in vanilla.js
but there is really no mystery to it
blob
Scott Conklin
@srconklin
Jul 29 2016 18:58
@jdubray thanks. I am sure you are right about it not being a mystery, but I am having a block on how to do it and an example would help.
@foxdonut thanks. That is interesting... has elements of the one done in cycleJS. I will take a look at that as soon as I can.
Jean-Jacques Dubray
@jdubray
Jul 29 2016 23:45
@srconklin here is the sample: https://github.com/jdubray/sam-samples/tree/master/vanilla-child-instance
I got a bit lost on how to use "this" ((@)#$@#) so I resulted to parent.xxx where it should be this.yyy but I don't have time to figure it out. I should stick to ES6.