These are chat archives for jdubray/sam

25th
Apr 2016
Jean-Jacques Dubray
@jdubray
Apr 25 2016 01:01
The discussions on the redux side are surreal
https://twitter.com/dan_abramov/status/724199953950736384
@rnique yes SAM is just a pattern and there are many ways to implement it, including using your favorite stack.
Jean-Jacques Dubray
@jdubray
Apr 25 2016 01:28
Framework-Independent JavaScript Components
by @elijahmanor
http://elijahmanor.com/talks/plain-js-comps/#/Title
Roman NL
@rnique
Apr 25 2016 04:04
@jdubray Hi, do you consider the SAM pattern "complete", or are there any particular issues you are trying to polish? For instance, I got a bit confused because at ebpml.org you introduced a notion of a tuple (State,Action,Model) whose elements have a cyclic relationship. At sam.js.org (the name suggests that there will be an official implementation in JS?) I see you added the View element. Isn't the View however just another tuple of State, Action (User interaction), Model (DOM)?
Jean-Jacques Dubray
@jdubray
Apr 25 2016 05:05
@rnique The ebpml post dated prior to the InfoQ article. In SAM the view is the "State representation" as it should be, so the pattern is truly limited to State/Action/Model. I had actually started to use SAM last year on the server. It works really well for API orchestration for instance.
That being said, I would consider SAM "complete" in the MVC sense, I don't expect there would be a need to do the kinds of things that Dan is doing with Redux. He can't make up his mind as to what is the difference between an intent, an action or an event.
SAM is based on the foundation of state mutation, that is unlikely to change much further.
When you think of it, does it really make sense to use an MVI pattern where there is no state and action?
Worse, you don't even have a controller or a reducer where you can stuff liberally with just a bunch of code?
Jean-Jacques Dubray
@jdubray
Apr 25 2016 05:12
MVI patterns make things worse because now the "Model" implements all the code in one convenient place. Wait... that's also what the Reducer is doing, one convenient place where you can put all your code, and then one day you realize it does not quite fit all down there, so bring Sagas into the picture and then, then action creators, and then GraphQL because the View guys can't care less about Reducers, Thunks and Sagas, they just want data.
I am happy when people challenge the SAM factoring, but I'd be surprised if it doesn't hold the test of time, due to its TLA+ foundation.
Roman NL
@rnique
Apr 25 2016 06:11
Regarding Redux, I have a feeling (because I can't prove it) that the authors started to play with ideas "borrowed" from elm and re-frame and got caught by the growth while still refining their ideas. Reframe author indeed mentions possible plagiarism - that's his opinion, and re-frame looks much more solid as a concept, but was implemented in clojurescript and had smaller community.
brusand
@brusand
Apr 25 2016 06:25
@jdubray and that ?http://t3js.org/examples/
Extract : T3 is explicitly not an MVC framework. It’s a framework that allows the creation of loosely-coupled components while letting you decide what other pieces you need for your web application.
Roman NL
@rnique
Apr 25 2016 08:37
@brusand being a framework I see they already defined how it should work. what I didn't like there (maybe I didn't understand something) is that it doesnt allow modules to communicate with each other, it's kind of a service bus on client side. What if I want to use other framework for presentation, for example Web Components. Or maybe its purpose is to be presentation-centric (I mean, be the only one to handle presentation).
brusand
@brusand
Apr 25 2016 08:42
You can integrate it with react or backbone or else view framework.
I ll try to use it to package a d3 sam component and integrate it in third portal with only a JavaScript dependency. (Not dedicate to any framework)
Fred Daoud
@foxdonut
Apr 25 2016 12:49
@devinivy I love your quote, "easy to propose, accept, and learn" :star: @jdubray that should be the tagline for SAM :)
devin ivy
@devinivy
Apr 25 2016 12:51
haha! it's not too cringingly nerdy to be the tagline? :P
Jean-Jacques Dubray
@jdubray
Apr 25 2016 12:52
Do you mind if I pass on the offer? :-)
weepy
@weepy
Apr 25 2016 12:55
Who's getting married?
Jean-Jacques Dubray
@jdubray
Apr 25 2016 13:03
@brusand to be frank, I am not sure I like T3.js, the factoring is ... well ... here are some examples.
1/ behaviors go directly from Event to Rendering while "getting" what they need from the model
onclick: function(event, element, elementType) {

            if (elementType === 'delete-btn') {
                var todoEl = getClosestTodoElement(element),
                    todoId = getClosestTodoId(element);

                moduleEl.querySelector('#todo-list').removeChild(todoEl);
                todosDB.remove(todoId);

                context.broadcast('todoremoved', {
                    id: todoId
                });

            }
Jean-Jacques Dubray
@jdubray
Apr 25 2016 13:10
2/ modules seem to bundle actions and model, with some actions being directly tied to the View events
onclick: function(event, element, elementType) {

            // code to be run when a click occurs
            if (elementType === 'clear-btn') {
                this.clearCompletedTodos();
            }

        },
incidentally, the "onClick" event for both behaviors and modules does not hint towards a good factoring
devin ivy
@devinivy
Apr 25 2016 13:12
t3.js did not grab me either, for similar reasons.
Jean-Jacques Dubray
@jdubray
Apr 25 2016 13:15
looks like a big ball of mud with some vanilla pub/sub
brusand
@brusand
Apr 25 2016 13:16
OK ok :)
Jean-Jacques Dubray
@jdubray
Apr 25 2016 13:16
The list modules manipulates the model directly from the event handler (which should be an action)
onchange: function(event, element, elementType) {

            if (elementType === 'select-all-checkbox') {
                // This selector avoids grabbing the select-all checkbox
                var todoCheckboxesEls = moduleEl.querySelectorAll('#todo-list li input[type="checkbox"]');

                var shouldMarkAsComplete = element.checked;
                for (var i = 0, len = todoCheckboxesEls.length; i < len; i++) {
                    todoCheckboxesEls[i].checked = shouldMarkAsComplete;
                }

                if (shouldMarkAsComplete) {
                    todosDB.markAllAsComplete();
                } else {
                    todosDB.markAllAsIncomplete();
                }

                context.broadcast('todostatuschange');
            }

        },
dnson
@imnutz
Apr 25 2016 16:12
hi guys,
do you have any idea where to put the WebSocket in SAM?
i'm not sure if it should be in action or model
any suggestion?
brusand
@brusand
Apr 25 2016 16:19
In actions and présent received data to modèle
dnson
@imnutz
Apr 25 2016 16:37
@brusand thank you.
im thinking of "read" operator here, cos the websoket push data to the page
so maybe it should be in model?
brusand
@brusand
Apr 25 2016 16:43
Nextaction call send action with data to push
Roman NL
@rnique
Apr 25 2016 17:01
@imnutz I guess if you dont need to change state nor data, you can call model.present() from the onMessage function (that would be the Action actually).
Nathan Ridley
@axefrog
Apr 25 2016 22:27

MVI patterns make things worse because now the "Model" implements all the code in one convenient place. Wait... that's also what the Reducer is doing, one convenient place where you can put all your code, and then one day you realize it does not quite fit all down there, so bring Sagas into the picture and then, then action creators, and then GraphQL because the View guys can't care less about Reducers, Thunks and Sagas, they just want data.

@jdubray What do you mean by "all in one place"? I've come to realise with MVI that the model is best implemented fractally among components in the places it is needed.

i.e. very much not all in one place
Jean-Jacques Dubray
@jdubray
Apr 25 2016 23:55
@axefrog what I meant was that the code corresponding to the SAM's Actions, Model, and State is conveniently cobbled together in the model. Of course the Model itself being a Single State Tree will have a single point of entry, but as I mentioned before Actions and State (including nap()) need to be factored away from the model. Redux was the first one to realize that you just can't put everything in the Reducer but they went south from there.
Nathan Ridley
@axefrog
Apr 25 2016 23:57
When you say "can't just put everything in the reducer", I assume you're referring to the problem whereby you end up with repetition when multiple reducers need the same information?
Or something else?
Jean-Jacques Dubray
@jdubray
Apr 25 2016 23:57
Now, I am a bit worried by what you mean by "implemented fractally among the components in the places it is needed". Model and View must be absolutely decoupled.
@axefrog no I really mean the code that SAM would put in the Action and State
Nathan Ridley
@axefrog
Apr 25 2016 23:58
I was oversimplifying of course. I decouple the model from the view too. I'm talking about the fact that the model consists of both the pure data that is relevant externally to the client, and the data that is required to maintain the client's visual state.
Jean-Jacques Dubray
@jdubray
Apr 25 2016 23:58
In SAM, no one can access the model you cannot write something like model.getState()
Nathan Ridley
@axefrog
Apr 25 2016 23:59
I'll elaborate a bit further...
Jean-Jacques Dubray
@jdubray
Apr 25 2016 23:59
Yes please