These are chat archives for jdubray/sam

23rd
Jun 2016
Jean-Jacques Dubray
@jdubray
Jun 23 2016 00:41
@foxdonut yes, that was my experience when I wrote the todomvc app. There is hardly any surprises, even the "gone fishing" app, felt very natural when you realize the state representation can also be a function.
Stardrive ENGG
@HighOnDrive
Jun 23 2016 06:07
@jdubray Caught your nodepdx video, think that went well. Thanks for shining a light and reminding us about the importance of looking before we leap :clap:
Edward Mulraney
@edmulraney
Jun 23 2016 07:02
@jdubray that presentation was really good. i noticed you called the acceptor accept rather than present, which is what I was saying made more sense the other day
that makes the pattern a lot clearer
is it fair to say the learner is akin to a view-model in a MVVM architecture? simply selecting various props and behaviour based off the model to supply the view with
Edward Mulraney
@edmulraney
Jun 23 2016 07:16
i think the talk highlighted that PAL seems to define the pattern more than SAM
Edward Mulraney
@edmulraney
Jun 23 2016 08:19
@jdubray how would you go about adding a second fishing canvas to your fishing example, so you can play in either canvas?
Edward Mulraney
@edmulraney
Jun 23 2016 10:57
equivalent of something like https://jsfiddle.net/ksepxm25/2/
but done the proper SAM way, without code dupe etc
Edward Mulraney
@edmulraney
Jun 23 2016 12:42
all the examples I've seen of SAM are very specific to a single purpose, or has multiple purposes but has all been globbed into single files, generally a single JS file. are there any examples that demonstrate a real app? i.e. file/folder separation and organisation. The SAFE example suffers from the same issues
Fred Daoud
@foxdonut
Jun 23 2016 12:43
@edmulraney : there is a todomvc example with separate files in the mods/ directory here: https://github.com/jdubray/sam-samples/tree/master/todomvc-app
I am also working on some Meiosis examples (Meiosis is a simple library that I am working on to facilitate the SAM pattern)
Edward Mulraney
@edmulraney
Jun 23 2016 12:45
nice, thanks @foxdonut
this was particularly what I was interested in:
view.display = (representation) => {

    // mount each component in the corresponding div
    Object.keys(representation).forEach(function(el) {
        const component = document.getElementById(el);
        component.innerHTML = representation[el];
    }) ;

    // clean up edited field
    const inputField = document.getElementById('new-todo') ;
    inputField.value = '' ;
} ;
Fred Daoud
@foxdonut
Jun 23 2016 12:47
@edmulraney my main concern with Meiosis is to facilitate creating components that become V = f(M). I am still working on the examples to hopefully come up with best practices.
Edward Mulraney
@edmulraney
Jun 23 2016 12:47
one to one mapping
nice - i'll have a look as Meiosis after I've finish with this example
Fred Daoud
@foxdonut
Jun 23 2016 12:48
in the todomvc example I am working on, // clean up edited field is implemented as nap()
Edward Mulraney
@edmulraney
Jun 23 2016 12:48
redux is V = f(M) too isn't it?
Fred Daoud
@foxdonut
Jun 23 2016 12:50
well.. let's not mix up the libraries, redux is a store, no views in redux
react is V = f(M), yes
Edward Mulraney
@edmulraney
Jun 23 2016 12:50
true. when used with react
devin ivy
@devinivy
Jun 23 2016 12:51
react-redux / connect()
that's the wiring for V= f(M)
Fred Daoud
@foxdonut
Jun 23 2016 12:52
@edmulraney besides applying the single state tree and single direction of data flow, in Meiosis you use the view library that you want, React, Snabbdom, Mithril, jQuery, just plain Vanilla JS (HTML strings), or anything else by writing a simple adapter. It's still work-in-progress, but the general idea is: http://meiosis.js.org/gd/big.html
Fred Daoud
@foxdonut
Jun 23 2016 12:59
ultimately my goal is to be able to create views out of components that you can call as regular functions: https://github.com/foxdonut/meiosis-examples/blob/todomvc-reorg/examples/todomvc/mithril/todoItem/view.js#L17
but these components are also wired with functions equivalent to model.present(), actions, and nap()
Fred Daoud
@foxdonut
Jun 23 2016 13:07
@jdubray I watched your presentation last night, I think you did well. Being already familiar with SAM, it's hard to tell if audience who had never heard of it, understood the concepts. Were there any questions afterwards, any discussion about the pattern?
Jean-Jacques Dubray
@jdubray
Jun 23 2016 14:38

Catching up, thank you for your comments. Yesterday afternoon, I was in a meeting with the CTO of a BigData startup which had just been acquired and he made my day. In essence he said,

I read a bit about SAM and I generally like it. I would say that we just spend 2 years building an Angular 1.x app and I would recommend anyone to keep as much of the business logic outside the framework as possible...

That felt pretty good as I was showing how SAM does that.
@foxdonut it was alright, I wish I could have been a bit more upbeat and crisp. About three people showed interest, so for a node conference that was a bit low, but that was the average engagement of the audience for other talks as well.
Jean-Jacques Dubray
@jdubray
Jun 23 2016 14:44
@edmulraney I still prefer "present" because it is more neutral accept/reject. I guess the pattern could evolve to have two kinds of methods (accept and reject) to give a hint as to the outcome of the action, or (accept, err).
Fred Daoud
@foxdonut
Jun 23 2016 14:45
personally I still think present is better than accept because when you call it, you are presenting the data to the model, you cannot tell the model, "accept this!"
Edward Mulraney
@edmulraney
Jun 23 2016 14:45
i suppose its just to do with it belonging to model
model is accepting something
Jean-Jacques Dubray
@jdubray
Jun 23 2016 14:46

@edmulraney

is it fair to say the learner is akin to a view-model in a MVVM architecture? simply selecting various props and behaviour based off the model to supply the view with

It's not just that, it's preparing the state representation and calling the nap function.

Edward Mulraney
@edmulraney
Jun 23 2016 14:46
something else is presenting something to the model
Fred Daoud
@foxdonut
Jun 23 2016 14:46
it is being presented with something.. it might not accept it.
Edward Mulraney
@edmulraney
Jun 23 2016 14:46
i suppose you can say the model is presenting something to itself
Jean-Jacques Dubray
@jdubray
Jun 23 2016 14:46
yes, that's my point, the action has no say. That being said it was difficult to talk about "acceptors" and use a "present" method.
Fred Daoud
@foxdonut
Jun 23 2016 14:47
the model doesn't present, the actions present
Edward Mulraney
@edmulraney
Jun 23 2016 14:47
its a function on model
but i see your angle
action triggers model.present
Fred Daoud
@foxdonut
Jun 23 2016 14:47
I am not set on the term "update" (naming is hard!), but in Meiosis I've separated the two functions, so actions call sendUpdate and models have a receiveUpdate function.
Jean-Jacques Dubray
@jdubray
Jun 23 2016 14:48
@edmulraney did you see the Tic-Tac-Toe engine sample? that's probably the most complete app at this point.
Fred Daoud
@foxdonut
Jun 23 2016 14:48
so models "receive" the update, and that function decides what to do with it (accept, reject...)
Edward Mulraney
@edmulraney
Jun 23 2016 14:48
its just present(model, value)vs model.present(value) but its not a big deal
Fred Daoud
@foxdonut
Jun 23 2016 14:50
the way I've organized it is that the view gets passed an actions object and then you can just call actions.sendUpdate(value).
Edward Mulraney
@edmulraney
Jun 23 2016 14:51
model.receive() makes more sense to me, but that may just be me
@jdubray tic-tac-toe engine - thanks that's a good one i'd forgot about
Jean-Jacques Dubray
@jdubray
Jun 23 2016 15:20

@edmulraney Do you still need to see that?

how would you go about adding a second fishing canvas to your fishing example, so you can play in either canvas?

I guess that's why I don't like OO, refactoring that sample is unpleasant... (e.g. make it an array of "ponds" to fish

Edward Mulraney
@edmulraney
Jun 23 2016 15:21
yeah I also don't favor OO, nor using this etc.
don't worry about coding anything. I was just curious what your approach would be
Jean-Jacques Dubray
@jdubray
Jun 23 2016 15:31

As I understand it, the problem is that you need to wire the UI as an array:

  • array of ponds
  • connected to an array of functions
  • making the model deal with an array is rather trivial, so that's not the issue
  • creating an array of "state representations" is not hard either, once the model is an array too
  • then we need to render the state representation which was the target of the event, that's not too hard too, as long as the view was captured as an array.

The difficulty will come into creating a state representation that can easily be mounted on a complex view like this.

So far all the examples I produced were <div id="x"> </div> stateRepresenation = { x: ...}.

In reality both the view and the stateRepresentation are ... trees (sigh).

var view = (function(canvas,net) {
        return {
            ...
            display(stateRepresentation) {
                if (this.ctx) {
                    stateRepresentation.rect(this.ctx,this.canvas) ;
                }
                if (stateRepresentation.fishes>0) {
                    var fishes = (stateRepresentation.fishes>1)? ' fishes!' : ' fish' ;
                    this.net.innerHTML = " you caught "+stateRepresentation.fishes+fishes ;
                } else {
                    this.net.innerHTML = "" ;
                }
            }
        } ;

})([canvas: document.getElementById('canvas'), net: document.getElementById('net')) ;
Jean-Jacques Dubray
@jdubray
Jun 23 2016 15:41
The good news is that you can wire the actions fairly dynamically since the event contains a reference to the element from which the event originated.
I guess that's were a framework would come handy -> @foxdonut
Edward Mulraney
@edmulraney
Jun 23 2016 15:47
yeah currently I haven't seen how SAM would work in a real app, i.e. navigation to different pages/features. the single view.display/state.representation makes it hard to figure out how to separate it all
Jean-Jacques Dubray
@jdubray
Jun 23 2016 15:53
So the "page" concept can easily be mapped to (control) states in the state representation. It's more a question how do you map a (URL) path to a context (model). This is not too hard, afterall a URL path is just another type of actions.
If you have a good example in mind, I can try to build it.
I think the one with the canvas was very informative, happy I spent the time building it. I feel SAM is very robust, but it is yet to be fully proven. Again, happy to hear if people disagree (I am by definition biased).
Fred Daoud
@foxdonut
Jun 23 2016 16:08
@jdubray @edmulraney indeed I also have an example of "dynamic" components here: https://github.com/foxdonut/meiosis-examples/blob/master/examples/labeled-sliders/sliderContainer/view.js#L9-L18
It's a dynamic list of labeled sliders, you have a labeled slider component, and a slider container component. Add/remove sliders, and each one has its data in the model.
labeled-sliders.gif
tried to add an animated gif of the demo, not sure if that worked...
Edward Mulraney
@edmulraney
Jun 23 2016 16:11
nice!
i was just making one of these for the fish pond
very good