These are chat archives for jdubray/sam

8th
Jul 2016
Fred Daoud
@foxdonut
Jul 08 2016 01:56
@mnichols thank you for your response. I'm kind of getting somewhere in trying to integrate Riot with Meiosis. I'll try to get an example up soon, would love to hear your thoughts on it.
Mike Nichols
@mnichols
Jul 08 2016 01:57
Thanks for the effort @foxdonut ! I'm anxious to compare where you end up with my attempts.
Mike Nichols
@mnichols
Jul 08 2016 04:23
@foxdonut wrt to riotjs , the approach i am taking with the view.js methods when invoked by state.representation is to return metadata describing the behavior of the riot.mount or riot.update. So view.started = (model) => { return { tag: 'started-panel', mountable: true, opts: transform(model) }}. It seems like that is the 'representation' according to my view-model and the display call invokes riot according to the representation meta passed into it.
Fred Daoud
@foxdonut
Jul 08 2016 11:46
@mnichols that looks interesting, I'm anxious to see your example. I am having a lot of trouble getting something like tag: 'started-panel' (i.e. the tag being determined dynamically) to work with Riot.
Robert Blixt
@devghost
Jul 08 2016 12:00
Hi, if I want to partially update a page what options do I have using SAM?
Jean-Jacques Dubray
@jdubray
Jul 08 2016 12:04
@devghost that's usually very easy to do using <div> elements. The state representation is a structure that returns the "content" of each div. In general:
State -> what needs to be displayed
View -> where it needs to be displayed
Theme -> how
let me find an example
In the TODOMVC sample you can see how the state representation is decomposed into different parts: https://github.com/jdubray/sam-samples/blob/master/todomvc-app/mods/view.js
(it's in the view, but I would put it in the State function, if I had to write it today)
return ({ 
        todoHeader: theme.header(intents),
        todoList: theme.list(model.items, model.displayActive, model.displayCompleted, intents), 
        filters: theme.filters(model.displayActive,model.displayCompleted,model.count,model.completedCount, intents) 
    });
Robert Blixt
@devghost
Jul 08 2016 12:09
@jdubray thanks! Will digest the code, but looks neat and tidy.
Jean-Jacques Dubray
@jdubray
Jul 08 2016 12:09
This is where the state representation will be mounted:
<section class="todoapp">

            <header class="header">

                <div id="todoHeader"></div>

            </header>
            <!-- This section should be hidden by default and shown when there are todos -->
            <section class="main">

                <div id="todoList"></div>

             </section>
            <!-- This footer should hidden by default and shown when there are todos -->
            <footer class="footer">
                <!-- Remove this if you don't implement routing -->
                <div id="filters"></div>

            </footer>
        </section>
As you can see, by matching the state representation properties with the div identifier, you can have a simple forEach loop to update all the elements. You may also optimize the rendering by omitting properties that do not require an update.
Yes, it's really easy to achieve.
Fred Daoud
@foxdonut
Jul 08 2016 13:21
@mnichols Here is a first attempt of your slideshow example with Meiosis+Riot: http://codepen.io/foxdonut/pen/xOXKmL?editors=1010
Jean-Jacques Dubray
@jdubray
Jul 08 2016 13:22
very nice!
is the slider a "time travel" capability? (looks like it)
Fred Daoud
@foxdonut
Jul 08 2016 13:24
Yes:
Jean-Jacques Dubray
@jdubray
Jul 08 2016 13:25
really cool
Fred Daoud
@foxdonut
Jul 08 2016 13:26
slideshow.gif
Thanks!
Jean-Jacques Dubray
@jdubray
Jul 08 2016 13:27
it's very nice to be able to support new Web frameworks so easily!
Fred Daoud
@foxdonut
Jul 08 2016 13:27
Notice that besides time-travel, you can also edit the model values in the textarea to see how the view renders
slideshow.gif
Sorry for the multiple upload.
So yes if you edit the text in the second text area and it is valid JSON, it will re-render the view with those values.
The first text area is the proposal.
Jean-Jacques Dubray
@jdubray
Jul 08 2016 13:31
very nice
Fred Daoud
@foxdonut
Jul 08 2016 13:31
@jdubray thank you, that is one of my biggest goals with Meiosis, that the view layer can be what you want, all you need is a simple adapter and the rest of the code remains the same, just simple JS functions.
Fred Daoud
@foxdonut
Jul 08 2016 13:55
@jdubray I am very grateful for all your work and ongoing discussions.
Jean-Jacques Dubray
@jdubray
Jul 08 2016 14:08
same here, thank you.
Mike Nichols
@mnichols
Jul 08 2016 15:19
Looks cool @foxdonut . It's unclear to me where predicates for determining the control state reside here.
Fred Daoud
@foxdonut
Jul 08 2016 15:25
@mnichols The control state determines the representation and the next action. Next action is handled by Meiosis with the nextAction property. As for determining the representation, I want to add that to the example, but I cannot until I find out how to render a tag in Riot where the tag name is determined and changed at runtime. So until then, the logic is in the view with the show=... attributes.
Whether it is with riot-tag= or subtag, it either doesn't work or only works the first time and can't change after that. I must be doing it wrong. Would love to see a working example.
Fred Daoud
@foxdonut
Jul 08 2016 15:31
Something like <div riot-tag={model.tag}></div> and model.tag changes.
Vincent Jo
@chiwoojo
Jul 08 2016 15:37
@foxdonut that slider is cool
Fred Daoud
@foxdonut
Jul 08 2016 15:37
Thanks Vincent!
Vincent Jo
@chiwoojo
Jul 08 2016 15:38
@jdubray hey JJ, I'm implementing intents in my app, and I was wondering if the mapping can be a function that returns a string.. I'm doing this:
Screen Shot 2016-07-08 at 8.38.32 AM.png
works fine but was wondering if there is a better way
Jean-Jacques Dubray
@jdubray
Jul 08 2016 15:46
in general I pass parameters available to the component as part of the intent call. As I understand your example index is available in the component.
Vincent Jo
@chiwoojo
Jul 08 2016 15:48
Screen Shot 2016-07-08 at 8.47.33 AM.png
yea, it looks like this.. I pass the index in to create a custom string in the intent
Jean-Jacques Dubray
@jdubray
Jul 08 2016 15:48
Otherwise I only marshal parameters that I do not want the component to know about such as an action I'd for the dispatcher
I am in the bus now, but will send you a sample.
in 15 min
Vincent Jo
@chiwoojo
Jul 08 2016 15:49
thx!
Mike Nichols
@mnichols
Jul 08 2016 16:04
@foxdonut this was why I changed my perception of what the 'representation' is. I am not sold it has to be markup...Since the representation is just the viewModel transformed from the model and the view.js is also in control of where it is displayed, I return riot metadata from view.js calls and then consume that metadata inside the display call, mounting or updating as required. Instead of using riot-tag I wonder if the containing element simply scaffolds with classNames and the display call would mount to the nodes discovered that way; eg riot.mount(domNodeFromSelector, tagName, viewModel) (http://riotjs.com/api/#a-namemount-doma-riotmountdomnode-tagname-opts).
Fred Daoud
@foxdonut
Jul 08 2016 16:26
@mnichols when I tried using riot.mount, it did not work well for me. With apologies for repeating myself, would love to see a working example. :)
Even just a dead-simple example of mounting a tag and then mounting a different tag, thus "replacing" the view.
Mike Nichols
@mnichols
Jul 08 2016 16:27
@foxdonut no apology needed! after some meetings I'll see if I can repro the issue and throw up a codepen
Fred Daoud
@foxdonut
Jul 08 2016 16:30
@mnichols thanks! maybe I'll take another stab at it. It was late last night and I may have been staring at the code for too long.
Fred Daoud
@foxdonut
Jul 08 2016 17:35
@mnichols I finally got a simple dynamic tag example working: http://codepen.io/foxdonut/pen/NAvaoW?editors=1010
I'll see if I can use this to refactor the Meiosis+Riot Slideshow example to use State representation to render the representation, and remove the logic from the view.
Jean-Jacques Dubray
@jdubray
Jul 08 2016 18:09
@chiwoojo sorry, I got into a meeting I was not expecting (an impromptu SAM presentation). I got a wow!
So I was thinking a bit more about the function in the bus, it's actually a great idea to decouple the event/intent signature from the view components.
So far I have used static intents, such as:
intents: {
            edit: mount+'.actions.edit({',
            save: mount+'.actions.save({',
            delete: mount+'.actions.delete({',
            filter: mount+'.actions.filter({',
            search: `dispatch({__action:'search',`
        },
the last one is based on a generic dispatcher
The view component then uses the intent as:
onclick="return ${intents['delete']}'id':'${person.id}'});
Jean-Jacques Dubray
@jdubray
Jul 08 2016 18:15
but the signature of the intent is decided in the component which is not ideal. Using a function would allow the event/intent signature to be driven by the application, while the component designer would simply call that function.
that's very nice
Mike Nichols
@mnichols
Jul 08 2016 18:32
i think i disagree with the inversion of the contract. as a view component developer i want to bind to contracts and it seems like the consuming application should be in charge of rejecting or interpreting what those intents are.
Fred Daoud
@foxdonut
Jul 08 2016 19:33
@mnichols I figured out what was giving me problems: updating the tag programmatically vs as a result of event handling:
So if you look at this example, initially there are calls made to tags[0].update({ view: "..." }); to indicate which tag to render.
Those same calls are made if you press on the yellow or quack button.
The initial call, and the call made in setTimeout, don't work. (You can see some logs in the console as well.)
The calls made after clicking on the buttons, do work. Why is that? Something to do with programmatic call vs call made from event handler?
Mike Nichols
@mnichols
Jul 08 2016 20:34
When you need to change on the nextTick you need to call update. riot will bind to DOM event handlers and call update automatically but obviously if you mutate after that you will ned to inform riot to update
Jean-Jacques Dubray
@jdubray
Jul 08 2016 21:09
@mnichols I trying to find the least amount of coupling between the components and the application logic, why would it be bad for the component to be provided the event message structure? The component would only provide the event property values, that way the component can be assembled in different applications?
Fred Daoud
@foxdonut
Jul 08 2016 21:11
@mnichols how do I inform riot to update? riot.update() does not seem to help.
Fred Daoud
@foxdonut
Jul 08 2016 21:38
Scratch that. It does help. Thanks again for your patience @mnichols :)
Here is the Meiosis+Riot Slideshow example with the logic out of the view and into the state/representation: http://codepen.io/foxdonut/pen/RRLWvw?editors=1010
Vincent Jo
@chiwoojo
Jul 08 2016 21:43
@jdubray oh man that's great news about the presentation; I'm interested in hearing more about it.. If I understood correctly about what you are saying, that would be great to just call the function without passing in any params. I was thinking of an alternative way to do action/intent mapping which is that inside of the intent object, I would use jquery or vanillajs to grab the value from the DOM. So the intent translation stage would grab the value which would then pass to the action.. What do you think?
Jean-Jacques Dubray
@jdubray
Jul 08 2016 23:15
yes, that's kind of the idea.