These are chat archives for jdubray/sam

27th
Oct 2016
Rick Medina
@rickmed
Oct 27 2016 02:15
@metapgmr_twitter thank you! I'll review it while grokking sam
Charles Rector
@chuckrector
Oct 27 2016 02:44
oh, hah! i ended up moving my textFocus stuff out of my state representation and into nap() too at some point. glad to know i had a decent instinct
i am elbows deep in converting the example to TypeScript now, since we may be soon migrating our work codebase over to it
that is, i can get some experience with that at the same time
side projects are so great for killing multiple birds with one cool stone
Jean-Jacques Dubray
@metapgmr_twitter
Oct 27 2016 13:15
I like TypeScript a lot more than I would have thought (OO). They did a really good job at keeping the power of JSON and adding enough structure to be useful, but to be frank I use a lot of "any" types.
I use strummer for message validation
Edward Mulraney
@edmulraney
Oct 27 2016 13:23
I'm not too keen on TypeScript. I prefer Flow Type. You get static type checking without the whole OO ecosystem thrown in
Fred Daoud
@foxdonut
Oct 27 2016 13:24
@edmulraney what do you mean by OO ecosystem? I use TypeScript for typing, but I don't use classes nor OO, just interfaces and functions.
Edward Mulraney
@edmulraney
Oct 27 2016 13:24
fair, everything ive seen with typescript tends to be encouraging OO style, heavy use of classes etc.
what do you use interfaces for?
Jean-Jacques Dubray
@metapgmr_twitter
Oct 27 2016 13:25
It's clearly an OO language, but I's second Fred's opinion that you can lose as little as you need.
Fred Daoud
@foxdonut
Oct 27 2016 13:30
what do you use interfaces for?
For defining my own types, or for defining service interfaces
Example,
export interface Ajax {
  getJSON: <T>(url: string) => Promise<T>;
}
So the code gets passed (ajax: Ajax) and can call ajax.getJSON<Array<Todo>>(url) and get back a Promise<Array<Todo>>
Without being tied to the implementation. The Ajax passed in can use axios and later be switched to something else, with minimal code changes.
Fred Daoud
@foxdonut
Oct 27 2016 13:35
I would also use an interface to define the Todo type, e.g.
interface Todo {
  id: number;
  done: boolean;
  description: string;
  somethingElse?: string; // optional property
}
Fred Daoud
@foxdonut
Oct 27 2016 13:44
@metapgmr_twitter I say this just in humour, regarding the use of the any type :)
Edward Mulraney
@edmulraney
Oct 27 2016 13:44
fair. i'd probably just do something like
function ajaxClient(client) {
    function getJSON(url) {
    }
}
if i envisaged changing ajax client in a project
Fred Daoud
@foxdonut
Oct 27 2016 13:46
gradual-type-systems.gif
Edward Mulraney
@edmulraney
Oct 27 2016 13:46
haha
Fred Daoud
@foxdonut
Oct 27 2016 13:46
^^ using the any type ;)
Edward Mulraney
@edmulraney
Oct 27 2016 13:47
yeah
Fred Daoud
@foxdonut
Oct 27 2016 13:47
@edmulraney I don't understand. Your code has no types.
Edward Mulraney
@edmulraney
Oct 27 2016 13:47
well you'd pass around your interface which enforces the shape of an ajax client type
whereas id probably just initialise a client and use that
so its still only one place in the code to change, if the ajax client changes
Fred Daoud
@foxdonut
Oct 27 2016 13:48
yeah but
what does the code using the client look like?
Edward Mulraney
@edmulraney
Oct 27 2016 13:49
probably on app init: global client = ajaxClient(axios)
then its a global
this is specific for an ajax library tho. probably a better comparison is enforing a User type or something
Fred Daoud
@foxdonut
Oct 27 2016 13:50
globals, ugh
and also
you still don't have types.
Edward Mulraney
@edmulraney
Oct 27 2016 13:50
ajax clients usually come in global :)
its not so bad
Fred Daoud
@foxdonut
Oct 27 2016 13:51
client.booyah() will only fail at runtime.
Edward Mulraney
@edmulraney
Oct 27 2016 13:53
its quite a big buy in to define everything as types tho
Fred Daoud
@foxdonut
Oct 27 2016 13:53
well we're taking about using types. if you don't want to use types, you just use regular JS.
Edward Mulraney
@edmulraney
Oct 27 2016 13:54
sure - there's definitely a need for using type, e.g. writing your own libs
but i meant more like this
function(blah: string)
but you can do Interfaces in flow too
Fred Daoud
@foxdonut
Oct 27 2016 13:55
on a large project with many devs, using types pays off as you change something and what you break shows up immediately at compile time and in your editor. on a small one-person project, perhaps it's not as much worth the effort.
and yes of course it makes sense when you are writing a lib to be consumed by others.
Edward Mulraney
@edmulraney
Oct 27 2016 13:56
i really missed types when I left the .NET world. was a C# dev for long time. loved Types, loved SOLID, design patterns, etc etc.
but then i developed an enterprise app in JS
using basic functional practices
and didnt miss types. or anything OO
and that was in a team of 7, working with other teams
we didn't hit type issues
i missed static typing tho
and useful error messages!
Fred Daoud
@foxdonut
Oct 27 2016 13:59
yeah, I agree.. I use types but stay clear of OO.
Jean-Jacques Dubray
@metapgmr_twitter
Oct 27 2016 14:16
It's like everything, we should fight the "monadism" of programming paradigms ("everything is a X" where X is a class, function, stream, state machine ...). All these concepts are individually useful, they are a big drag when used in a monadic way. Progamming is polyadic.
Zach Dahl
@schtauffen
Oct 27 2016 15:19
I agree. OOP isn't horrible but applying it to every problem all the time leads to a lot of horrible code. FP problem space is much larger though and has less issues when applied to everything I think :) (disclaimer: yes I'm biased) I still use OO paradigms on occasion (object.create > new !!)
Jean-Jacques Dubray
@metapgmr_twitter
Oct 27 2016 15:30
I agree!
devin ivy
@devinivy
Oct 27 2016 15:48
"monadism" is sort of a confusing term since "monad" has a specific meaning in computing
but what you're saying resonates with me
Jean-Jacques Dubray
@metapgmr_twitter
Oct 27 2016 15:58
Ultimately we all understand now that factoring functional or reactive programming above a OO language is a poor choice of formalism
JavaScript is popular because it is not monadic
I trust that more and more people will figure this out
Edward Mulraney
@edmulraney
Oct 27 2016 16:00
that's always been one of javascripts strengths. multi-paradigm
Jean-Jacques Dubray
@metapgmr_twitter
Oct 27 2016 16:05
It's amazing it remained hidden for so long.
Jean-Jacques Dubray
@metapgmr_twitter
Oct 27 2016 16:24
next.js a server-side React-based JavaScript framework
Edward Mulraney
@edmulraney
Oct 27 2016 16:27
looks cool
Rick Medina
@rickmed
Oct 27 2016 17:16
is there a page with the pros/cons of sam?
devin ivy
@devinivy
Oct 27 2016 17:59

@metapgmr_twitter see the definition in there for "monad in Technology"?

monad in Technology Expand
theory, functional programming
/mo'nad/ A technique from category theory which has been adopted as a way of dealing with state in functional programming languages in such a way that the details of the state are hidden or abstracted out of code that merely passes it on unchanged... [it continues]

promises are perhaps the most familiar non-trivial monad in js.
not to distract from what you are saying!
but it made me double-take
Jean-Jacques Dubray
@metapgmr_twitter
Oct 27 2016 18:07
@rickmed I'd say the pros are generally similar to Redux, with notable additions like side effects/async friendly and no requirement around immutability. The cons, I don't see too many (considering there are now a library, meiosis, which facilitates the implementation of the pattern in various web frameworks).
I can easily accept that I am biased an unable to see cons
The big one I see is that your business logic is 100% outside a framework/library so it can move freely from the browser to the server, even AWS Lambda. You can even integrate 3rd party actions using 3-legged OAuth.
Rick Medina
@rickmed
Oct 27 2016 18:20
Which pros specifically would you say it shares with redux?
Jean-Jacques Dubray
@metapgmr_twitter
Oct 27 2016 18:21
Composition
Unidirectional data flow
Freedom from DSLs/Templates (if you want)
Explicit mutation
Static mental model
For instance, Angular2 "best practices" would encourage you to create "smart" view components with lots of business logic in it, inter component communication... SAM gives you the opportunity to create "dumb components" without the constraint of a library like Redux.
SAM even supports time travel (there are a couple of implementations, one on the browser, one on the server).
Rick Medina
@rickmed
Oct 27 2016 18:26
I agree with the last statement which is what is lead me interested in sam. Elm/redux try to maintain a fractal/component based business architecture but I find it in the long run awkward for 2 reasons: 1) components (depends on the app) will need to communicate to each other. 2) Since the network is a bottleneck, it needs to exist a coordinator to manage that resource. That leads to scattered business logic (reducers/elm-update, thunks/sagas/whatever, etc)
But I have yet to learn how sam solves this problems in a structured way (that doesn't lead to spaghetti code)
Jean-Jacques Dubray
@metapgmr_twitter
Oct 27 2016 18:28
Have you looked at SAFE (state action fabric)?
That's probably the biggest difference with any other approach, SAM is "step" based so it's able to coordinate interactions in a much cleaner way.
SAM's structure does not require ancillary state machines where you keep track of your async stuff, you never need to do things like setting "fetching" properties to keep track of what's in flight.
nap() is also a very important aspect, far superior to sagas because it does not break the "single state tree" principle. Sagas have their own state tree, making quite iffy when other parts of the business logic need to know what stage the saga is at.
Jean-Jacques Dubray
@metapgmr_twitter
Oct 27 2016 18:34
With SAM, the business logic is divided in three buckets (Action, Model and State) but unlike React the delineation is (again IMHO) much cleaner.
Rick Medina
@rickmed
Oct 27 2016 18:34
sam is an interpretation of tla+ for the front end, correct?
Jean-Jacques Dubray
@metapgmr_twitter
Oct 27 2016 18:34
yes correct,
I want to emphasize that's my interpretation, and I am open to discuss it.
However I feel the closer we are to TLA+ semantics the stronger the pattern is
Rick Medina
@rickmed
Oct 27 2016 18:45
Cool. I've been reading a bit about tla+ and I think I get it at least the safety part. I need to understand it more to have an informed discussion :). Are there parallel concepts for tla+'s safety and liveness in sam?
Jean-Jacques Dubray
@metapgmr_twitter
Oct 27 2016 18:47
I don't talk often about safety and livelyness, but that's another big plus, because you can define forbidden states and monitor them. It's a very powerful concept. I implemented these concepts in the STAR library which can be used to manage complex API orchestrations.
I had started to use TLA+ concepts to create a robust orchestration mechanism, until I realized it had lots of value in the Front-End too.
In SAM, safety and liveliness would fit in the State function.
Rick Medina
@rickmed
Oct 27 2016 18:51
got it. I'm going through the http://sam.js.org/ page now...
Jean-Jacques Dubray
@metapgmr_twitter
Oct 27 2016 18:53
I didn't want the pattern to be too complicated, but I hope I am close enough to TLA+ that people can implement as far as they need from it. At a minimum the STAR library fits inside the SAM pattern structure (but I cheated since I inferred SAM from my work on STAR :-).
bkinsey808
@bkinsey808
Oct 27 2016 20:15
Just popping in to say "Aloha" from Hawaii
Jean-Jacques Dubray
@metapgmr_twitter
Oct 27 2016 20:17
@bkinsey808 Ben, welcome! The last few posts talk about the differences between SAM and Redux
Charles Rector
@chuckrector
Oct 27 2016 20:18
aloha nui loa!
bkinsey808
@bkinsey808
Oct 27 2016 20:21
Seems like "state" is on ppl's minds lately in the ng2 community http://blog.oasisdigital.com/2016/managing-state-angular-2/
Jean-Jacques Dubray
@metapgmr_twitter
Oct 27 2016 20:25
yep, looks like there still some work left to do in that space (which is ok)
thank you for sharing that post
Rick Medina
@rickmed
Oct 27 2016 21:34
a few questions to check if I'm getting sam right ... :)
Jean-Jacques Dubray
@metapgmr_twitter
Oct 27 2016 21:34
sure
Rick Medina
@rickmed
Oct 27 2016 21:38
the whole model (global atom) is passed to the view function (however is implemented: react, vanilla, etc), right? lets say in my view I need to show a set of data (of the model) but showed in a different way (eg: I need to show the info sorted by name in a part of the ui and sorted by id in another part), ie, data derived from the model, where would that logic be?
Jean-Jacques Dubray
@metapgmr_twitter
Oct 27 2016 21:39
not exactly, sometimes, just because it is simple I write code that way. The idea behind the pattern is that there is a difference between the model (property values) and the state (representation).
The model is passed to the state function which compute the state representation which is then fed to the view components.
The state representation can be props/observables, json, innerHTML content, even closures.
The state function decouples the view components from the model.
Anything computed from the model would be in the state function, as "state representation".
The state function is also responsible for invoking the next-action-predicate (nap). Nap computes whether, given the new state, there are actions that need to be triggered (they are aka automatic actions).
In redux, this is where Sagas would fit, except that unlike Sagas which are stateful, nap is a stateless function (uses the model and/or state representation) as an input.
Charles Rector
@chuckrector
Oct 27 2016 21:44
i did that same thing in my view originally -- passed the model directly. but then @devinivy showed me how it would be better to compute an intermediate form in the state function. so, for example, my model contains some sprites, keyed by unique ids. and i have a "scene" that is an ordered list of those unique ids, for rendering. there is also highlighted & selected sprite id references in the model. in my view, it is easiest to just iterate through a flat array of sprites with some flags on them however, so in my state function i now compute a flat array in the appropriate order, while also computing isHighlighted or isSelected states for each sprite -- then my view can just dumbly output appropriate class names based on those flags, rather than doing a bunch of probing of the real model
Rick Medina
@rickmed
Oct 27 2016 21:44
so the state function is like a reselector (compute the state representaion part) + saga/thunk (invoke the nap part) in the redux world?
Jean-Jacques Dubray
@metapgmr_twitter
Oct 27 2016 21:45
Yes, as I understand it.
Zach Dahl
@schtauffen
Oct 27 2016 21:46
I don't understand how sagas are any more stateful than nap. sagas only take the input of the action to kick off an asynchronous action
Rick Medina
@rickmed
Oct 27 2016 21:46
got it. interesting. Off to understanding nap...
Zach Dahl
@schtauffen
Oct 27 2016 21:47
upon resolution they trigger another action, which I assume asynchronous things in nap have to do as well
Jean-Jacques Dubray
@metapgmr_twitter
Oct 27 2016 21:47
Sagas are based on function generator. Each time you yield you "remember" where you left of.
Rick Medina
@rickmed
Oct 27 2016 21:48
just to check. The model is the single source of truth and the state representations are "projections" of the former?
Jean-Jacques Dubray
@metapgmr_twitter
Oct 27 2016 21:48
You cannot access that "state" easily. Sagas are 100% stateful
yes, exactly, projection is a very good word for it
Zach Dahl
@schtauffen
Oct 27 2016 21:48
or "facade" as the gang of four would call it :)
Jean-Jacques Dubray
@metapgmr_twitter
Oct 27 2016 21:48
In particular you could have different state functions (Web, mobile, watch...)
Rick Medina
@rickmed
Oct 27 2016 21:49
using a bit of event sourcing lingo :)
Jean-Jacques Dubray
@metapgmr_twitter
Oct 27 2016 21:50
Just received an email from egghead.io : "One of the biggest pain points when developing Angular 1.x apps has always been managing application state."
no s...
Zach Dahl
@schtauffen
Oct 27 2016 21:50
lmao
my current assignment is angular 1.3. I don't hate it as much as I thought I would but I'm tiring of it quickly...
Jean-Jacques Dubray
@metapgmr_twitter
Oct 27 2016 21:52
We have also some SAM implementation for ng-1.x
Rick Medina
@rickmed
Oct 27 2016 21:55
so looking at the launcher example in the sam homepage: state.ready, state.counting... (all state methods) should return state representations (projections) derived from a single model, correct?
Jean-Jacques Dubray
@metapgmr_twitter
Oct 27 2016 21:55
yes, correct, in that example the state representation is computed as innerHTML, but it could be props / json too.
the connection with nap is that in general the "state" (ready, launched...) is reusable to derive the automatic actions if any.
Rick Medina
@rickmed
Oct 27 2016 21:56
awesome I'm on the right track...but then there is state.representation which I'm not sure what it does (also has an additional display param)
Jean-Jacques Dubray
@metapgmr_twitter
Oct 27 2016 21:58
In Angular2, the state function publishes "events" subscribed by components: https://github.com/jdubray/sam-samples/blob/master/angular2-admin-master-2.0.0/src/app/state/state.ts
This is what is passed to the view for display. In that case, the components are just divs.
model calls state.render(model),
state calls view.display(state.representation)
Rick Medina
@rickmed
Oct 27 2016 21:59
in all systems that would be one single function (eg: react.render), correct?
Jean-Jacques Dubray
@metapgmr_twitter
Oct 27 2016 21:59
but it really depends on the Web framework.
Yes, correct.
Though React requires a setState({}) to trigger render
Zach Dahl
@schtauffen
Oct 27 2016 22:00
I would like to read on TLA+, do you have a recommendation for the hyperbook vs specifying systems?
Zach Dahl
@schtauffen
Oct 27 2016 22:01
alright, thanks!
Jean-Jacques Dubray
@metapgmr_twitter
Oct 27 2016 22:04
Things clicked for me when I compared TLA+ to a state machine in the "Die Hard" example. Here is my blog post: http://www.ebpml.org/blog15/2015/01/tla-the-die-hard-problem/
That's when I realized that Dr. Lamport had invented a new (and much improved) formalism for state machines.
The important paragraph in the post is: "The action Big2Small should not decide on the outcome (how could it? it would mean that an external actor would have absolute knowledge of the system), it only expresses the intent. The state decides whether the intent is receivable, the type realizes the intent. "
Ultimately this is how TLA+, though I the time, it was not clear to me.
Jean-Jacques Dubray
@metapgmr_twitter
Oct 27 2016 22:09
The approximation that we have been using in our industry for decades is that the actions can:
  • assign property values
  • decide of the end state (after the action is applied)
    Both fundamentally flawed principles and the source of terrible inefficiencies and defects
By decoupling actions, model and state, SAM helps you avoid these mistakes