These are chat archives for jdubray/sam

24th
Aug 2017
Radosavljevic Slobodan
@radosavljevic
Aug 24 2017 09:18
Thanks so much. I really like the approach, I could even say now that React is SAM compatible :D
Fred Daoud
@foxdonut
Aug 24 2017 10:43
@radosavljevic happy to hear it :)
Janne Siera
@jannesiera
Aug 24 2017 11:11
@radosavljevic why would React with props not be SAM compatible?
Radosavljevic Slobodan
@radosavljevic
Aug 24 2017 12:26
@jannesiera yes, using only props is SAM compatible, but until now I didn't used ReactDOM.render in my representation so I used some kind of Provider component that later passed props or context to other components, which I didn't like at all :)
Jean-Jacques Dubray
@jdubray
Aug 24 2017 15:03
@foxdonut nice, so the virtual DOM algorithm is capable of maintaining state between the render calls?
Janne Siera
@jannesiera
Aug 24 2017 15:42
@jdubray vdom doesn't hold state. You just have diff and patch
Jean-Jacques Dubray
@jdubray
Aug 24 2017 15:55
so it reparses the HTML for every rendering?
Janne Siera
@jannesiera
Aug 24 2017 16:30
What do you mean by 'reparses'? Feels like I might be misunderstanding you.
VDom works this way:
  1. You create an in-memory representation of the html
  2. You give it to VDom and it renders it to the page
  3. When you update you create a new in-memory representation
  4. You give it to VDom and VDom diffs it with the previous in-memory representation that you gave it
  5. VDom updates the actual DOM where it found differences (and does this as optimally as possible)
So, working against the VDom is stateless (you re-create the in-memory representation however you want). But the VDom itself contains state (The previous representation)
That's bascially it's purpose
To provide a functional API on top of an imperative API (the actual DOM)
Jean-Jacques Dubray
@jdubray
Aug 24 2017 16:53

Step 4 does not look stateless, since it retains the previous in-memory representation:

You give it to VDom and VDom diffs it with the previous in-memory representation that you gave it

I was just wondering how @foxdonut approach would work in that case. It looks like render is called each time, unless ReactDOM retains a relationship between the element and the in-memory representation that was last rendered
Janne Siera
@jannesiera
Aug 24 2017 17:04
So, working against the VDom is stateless (you re-create the in-memory representation however you want). But the VDom itself contains state (The previous representation)
So, yes.
Radosavljevic Slobodan
@radosavljevic
Aug 24 2017 17:38
@jdubray what you make of it?
I find React very easy to work with if I don't think about state or God forbid some global side-effects, so it's really just a very cool view engine
Jean-Jacques Dubray
@jdubray
Aug 24 2017 17:41
@radosavljevic sure, I think "view engines" are good. ES6 template literals are ok (with a few hints to avoid rendering the whole page each time) but proper vdom algorithms are better, no question about it.
As I mentioned before I am concerned with the overall programming model, clearly @foxdonut found a way to use the best part of React without having to deal with the React programming model.
I like JSX better than Angular templates too
Radosavljevic Slobodan
@radosavljevic
Aug 24 2017 17:43
Yes, that's why I love this message board, its clear purpose is to find real facts.
Jean-Jacques Dubray
@jdubray
Aug 24 2017 17:43
:+1:
I am also wondering what are the advantages of Flyd over straight functional wiring.
Radosavljevic Slobodan
@radosavljevic
Aug 24 2017 17:46
me too.
devin ivy
@devinivy
Aug 24 2017 17:47
@jdubray for one, consider how to deal with the diamond in both cases
helps you avoid glitches
Radosavljevic Slobodan
@radosavljevic
Aug 24 2017 17:52
Thanks @devinivy
Janne Siera
@jannesiera
Aug 24 2017 18:03
Who doesn't think as React as a cool view-engine? Anyone writing React apps right now is doing React+Redux. React doesn't force you to use local state.
You can just as easily use React+SAM if that's what you prefer.
To me, React = Declarative View Components
Jean-Jacques Dubray
@jdubray
Aug 24 2017 18:06
I like as few dependencies as possible
@devinivy yes, I understand RP, but when you control the rendering would these glitches occur? I never have this problem.
works well
devin ivy
@devinivy
Aug 24 2017 18:12
@jdubray i see what you mean, but i also think there are many valid ways to control rendering, and that might include flyd's ability to control intermediate/glitchy states.
this is coming from someone who doesn't use flyd, just using my imagination.
not everyone wants to explicitly control rendering. honestly in my experience the natural mechanisms out there get you a long way, and factoring reactive code well is a much bigger issue for me.
Jean-Jacques Dubray
@jdubray
Aug 24 2017 18:14
I hear you, I am wiring agnostic. Probably just my old brain that resists adding yet another formalism
Radosavljevic Slobodan
@radosavljevic
Aug 24 2017 18:18
SAM version of @foxdonut ReactDOM.render() :thumbsup:
devin ivy
@devinivy
Aug 24 2017 18:24
@jdubray i appreciate that too :)
Jean-Jacques Dubray
@jdubray
Aug 24 2017 18:28
Looks my next project will be React based then!
devin ivy
@devinivy
Aug 24 2017 18:29
fun! what wiring will you reach for?
btw if you want to use immutable data with plain js objects, i highly suggest https://github.com/mariocasciaro/object-path-immutable
Jean-Jacques Dubray
@jdubray
Aug 24 2017 18:30
don't know yet! I'll do some research
Radosavljevic Slobodan
@radosavljevic
Aug 24 2017 18:31
yes, there'll be a lot of takeaways if @jdubray choose to share it with us here :)
devin ivy
@devinivy
Aug 24 2017 18:31
@foxdonut congrats on your talk :) when is that?
and will there be video?
Radosavljevic Slobodan
@radosavljevic
Aug 24 2017 18:36
@jannesiera yes, you are absolutely right about React = Declarative View Components, it's just people can't see that because other things you mention, especially because many developers don't fully understand basic concepts, an this is where SAM is most valuable... it uncovers many holes in understanding of the data flow -> representation.
as @jdubray says, it's very important where is the computational step, many take it like magic, sometimes this is OK but mostly lead to making systems more complex.
I was one of those developers... :)
Jean-Jacques Dubray
@jdubray
Aug 24 2017 18:56
:+1:
Happy I can share what I learned over the years, Dr. Lamport's work is what changed everything for me (and just to be fair, ReactDOM too)
It's hard to express how much I wish I had known about all this 20 years ago when TLA+ was coming out. I know that Dr. Lamport is not the greatest communicator (he says that himself) and I am worse than him, but it's a shame because his work really deserves to be known.
Fred Daoud
@foxdonut
Aug 24 2017 19:06
@devinivy thanks! the conf is Sept. 25-26. Unfortunately, it seems the talk will not be recorded, much to my sadness.

@jdubray I like your SAM+ReactDOM.render example. Also, I like flyd streams because they are simple and minimal, but of course they are not required for implementing the Meiosis pattern. Here is a bare-bones minimal example of the pattern:

let model = initialModel;
let render = null;
const update = modelUpdate => {
  model = modelUpdate(model);
  render(model);
};
const view = createView(update);
render = model => renderView(view(model));
render(initialModel);

Where renderView is the function that uses your vdom library, such as ReactDOM.render. Here is an example using picodom for a truly truly minimal implementation! :)

Jean-Jacques Dubray
@jdubray
Aug 24 2017 19:19
:+1:
Jean-Jacques Dubray
@jdubray
Aug 24 2017 19:43
Here is the picodom implementation, not much different, had to change the onClick to onclick, other than the render method everything else is unchanged
Marcus Feitoza
@mfeitoza
Aug 24 2017 19:44
Google created Incremental DOM, but the syntax is a mess:
https://google.github.io/incremental-dom/#about
function renderPart() {
  elementOpen('div');
    text('Hello world');
  elementClose('div');
}
Jean-Jacques Dubray
@jdubray
Aug 24 2017 19:44
@foxdonut thank you!
devin ivy
@devinivy
Aug 24 2017 19:44
@mfeitoza yes not sure if it's a good API, but at least they're clear that it's a very low-level API.
i think incremental dom is really interesting
Jean-Jacques Dubray
@jdubray
Aug 24 2017 19:45
@mfeitoza for me anything other than JSX or ES6 templates is a non starter. I use angular templates because I have no choice.
devin ivy
@devinivy
Aug 24 2017 19:45
if you're working within "the platform"
Marcus Feitoza
@mfeitoza
Aug 24 2017 19:46
@jdubray absolutely JSX is awesome and I never tried ES6 for rendering and to be honest I prefer hyperscript
Fred Daoud
@foxdonut
Aug 24 2017 19:48
@jdubray welcome! excellent, so used in this way hopefully React is more manageable. Also, as you have noticed, then it becomes trivial to use one vdom library or another, your setup is very easy to adapt and then you just use that vdom's way of creating views. There are several solid choices besides React: Preact, Inferno, Snabbdom, Mithril.
Marcus Feitoza
@mfeitoza
Aug 24 2017 19:48
I started a new project and now I will put SAM in practice in a medium/big project. And of course I will share my experiences.
Mithril <3
Fred Daoud
@foxdonut
Aug 24 2017 19:49
@mfeitoza agree! did you see on the mithril channel that lichess made a mithril → snabbdom change? I'm curious about the reason for the switch.
Marcus Feitoza
@mfeitoza
Aug 24 2017 19:51
@foxdonut i'm not aware about
Jean-Jacques Dubray
@jdubray
Aug 24 2017 19:51
the "onclick" casing difference between picodom and react is annoying...
Fred Daoud
@foxdonut
Aug 24 2017 20:10
@jdubray most vdoms use onclick so you could say React is annoying for using onClick :wink:
not to mention onChange (React) vs oninput (most other vdoms)
Jean-Jacques Dubray
@jdubray
Aug 24 2017 20:11
:+1:
Jean-Jacques Dubray
@jdubray
Aug 24 2017 21:44
I found this being a good metaphor for SAM built apps
every "part" in a SAM implementation can be reasoned about individually along with the overall (wired) structure