These are chat archives for jdubray/sam

9th
Jul 2016
Fred Daoud
@foxdonut
Jul 09 2016 02:52
@mnichols I added the Meiosis-Riot slideshow example to https://github.com/foxdonut/meiosis-examples/blob/master/index.html with credit to you, is that acceptable?
Jean-Jacques Dubray
@jdubray
Jul 09 2016 05:58
blob
This is a new slide from my presentation on SAM
This is why IMHO, FRP will fail (as it is). It does not model application state mutation properly. Immutability is irrelevant/does not solve any problem.
Mike Nichols
@mnichols
Jul 09 2016 16:17

@foxdonut This looks great, although the first example (where the template is doing the conditional showing) seems like it is irrelevant/deprecated by your more elegant solution. You and I ended up at the SAME PLACE inside the representation call, except I dont just return the tag-name in response to predicate. So while you do this:

if (this.startable(model)) {
      return "startable";
    }

I am doing this

// learner.js
if(this.startable(model)) { 
return {
this.view.startable(model)
}

//view.js
this.startable = (model) {
var opts = transformModelToOpts(model);
return {
tag: 'startable',
opts: opts
}

Then view.js just has to:

this.view.display = (representation) {
riot.mount(representation.tag, representation.opts)
}
Edward Mulraney
@edmulraney
Jul 09 2016 16:38
@foxdonut I'm trying to see how you've got around the issue of associating UI events with actions for standard html template string rendering. Looking at your todomvc/vanillajs example, it seems you just create a separate file 'ready.js' which sets event handlers on dom elements via renderer.delegate. Is this still your approach?
Fred Daoud
@foxdonut
Jul 09 2016 16:50
@mnichols indeed the second example is a better approach. As for returning just the tag, it was all I needed so I tried to keep it simple.
@edmulraney for plain html strings and vanilla js, yes.
I wouldn't use plain html strings and vanilla js for anything beyond simple, though.
Fred Daoud
@foxdonut
Jul 09 2016 17:18
@mnichols also this doesn't seem to work outside an event handler without a call to update: riot.mount(representation.tag, representation.opts)
Mike Nichols
@mnichols
Jul 09 2016 17:30
@foxdonut yes that is correct. I also pass along a mountable param in the representation to inform the riot call what is should do. since the view.js is mapping to the state being requested and it is supposed to know 'where' bits are rendered, it doesnt seem to break responsibility
@foxdonut here is an example of the view.js I am working with:
export default stampit()
.props({
    riot: riot
})
.init(function(){
    let tags = {};

    const transformContentViewer = (contentViewer, mountable) => {
        let { slides, total, currentSlide } = contentViewer;
        return {
            slides,
            total,
            currentSlide,
        }
    }
    const mountOrUpdate = ({ tag, mountable, opts }) => {
        if(!tag) {
            return;
        }
        if(mountable || !tags[tag]) {
            return tags[tag] = this.riot.mount(tag, opts);
        }
        tags[tag].forEach( t => { return t.update(opts); } )
    }

    this.startable = ({ contentViewer }) => {
        return {
            tag: 'content-viewer',
            mountable: true,
            opts: transformContentViewer(contentViewer)
        }
    }
    this.started = ({ contentViewer }) => {
        return {
            tag: 'content-viewer',
            mountable: false,
            opts: transformContentViewer(contentViewer)
        }
    }
    this.display = (representation) => {
        console.debug('view','#display', representation);
        return mountOrUpdate(representation);
    }
})
Jean-Jacques Dubray
@jdubray
Jul 09 2016 18:07
After the presentation yesterday, I feel I have a reasonable path to explain why SAM?
1/ Stateful Component models don't work -> (data) model cannot be fragmented and bound to UI components
2/ FRP goes in the right direction (single state tree, unidirectional data flow) but immutability is the problem
3/ What truly distinguishes SAM is it's ability to distinguish mutation from assignment
This is an assignment:
counter = counter + 1
This is a state mutation:
var proposal = counter + 1 ; counter.accept(proposal).then(learn) ;
what do you think?
Fred Daoud
@foxdonut
Jul 09 2016 19:46
@jdubray +1. I think it's especially important to emphasize what "a state mutation", or "a step", is, and how only one happens at a time.
Jean-Jacques Dubray
@jdubray
Jul 09 2016 20:34
I was trying to capture it with "then", is that not enough?
I was also trying to keep it at the elevator pitch level, i.e. what's really different about SAM, without necessarily expressing all the nuances
Fred Daoud
@foxdonut
Jul 09 2016 21:37
Sounds good!