These are chat archives for jdubray/sam

23rd
Jul 2017
Janne Siera
@jannesiera
Jul 23 2017 16:44
Jj, I'm still trying to wrap my head around not only SAM but also the current state of front-end architectures/frameworks. In your articles and this channel it has been mentioned multiple times that 'templates' are quote-on-quote 'dead'. While I'm trying
To give functional Html a go, I dont quite see the reasoning of moving from template to in-code view building. Could you elaborate on this sentiment, or point me in the right direction to read up on this?
Jean-Jacques Dubray
@jdubray
Jul 23 2017 16:52
@jannesiera Janne, thank you for joining this forum. Templates force you to learn an unnecessary "language", bringing no value at all, while enforcing an anti-pattern: two-way data binding.
Let's take Angular2 for instance, which I reasonably like, even though the amount of boiler plate and the template language are simply horrific
When you look at a "dynamic form"
<div>
  <form (ngSubmit)="onSubmit()" [formGroup]="form">

    <div *ngFor="let question of questions" class="form-row">
      <df-question [question]="question" [form]="form"></df-question>
    </div>

    <div class="form-row">
      <button type="submit" [disabled]="!form.valid">Save</button>
    </div>
  </form>

  <div *ngIf="payLoad" class="form-row">
    <strong>Saved the following values</strong><br>{{payLoad}}
  </div>
</div>
you are forced to learn this unfamiliar template language with no support from the editor!
Compare that to an ES6 template literal (but it's not a template, just functional HTML)
Jean-Jacques Dubray
@jdubray
Jul 23 2017 16:58
It could look like this:
<div>
  ${payload ? `<div class="form-row">
                                  <strong>Saved the following values</strong><br>{{payLoad}}
                            </div>` :  `
  <form>
    ${questions.map( question => `
    <div  class="form-row">
       ${df-question(question)}
    </div>` ).join('\n')}
    <div class="form-row">
      <button type="submit" ${form.valid ? '' : 'disabled'} onclick="${callAction(intents.answerQuestions, `{ ... }`)}"`>Save</button>
    </div>
  </form>
`
</div>
Janne Siera
@jannesiera
Jul 23 2017 17:03
That was an incredibly fast response, thank you.
Jean-Jacques Dubray
@jdubray
Jul 23 2017 17:03
you are welcome
AngularX would be much better if they allowed template literals, including TypeScript validation!
Janne Siera
@jannesiera
Jul 23 2017 17:06
I consider templates essential for cooperation with our designers. We are a small team and especially for short deadlines the help of our design team - proficient in html and Css, but not quite comfortable with javascript - can be invaluable.
Jean-Jacques Dubray
@jdubray
Jul 23 2017 17:06
well template literals are even better
Janne Siera
@jannesiera
Jul 23 2017 17:09
Having a simple DSL (moustache-like) would be very easy to teach the design team without too much cognitive overhead, and they would be comfortable with not only adjusting Css, but also with moving around elements when necessary. Besides, they have expressed interest in working with something like web components to build their html - which would constitute a company wide DSL in itself.
I actually just encountered this in a functional ui experiment I ran for one of our views where I select the elements in an html template and set classes and some text conditionally
Depending on the state/model passed on to the view.
Jean-Jacques Dubray
@jdubray
Jul 23 2017 17:12
I understand that I am a developer not a web designer, but I consume Web templates/designs very easily. I don't think there is any need for a Web designer to use any kind of DSL. They can focus on the design and I can code from their designs (which I am incapable of producing)
Janne Siera
@jannesiera
Jul 23 2017 17:13
We had an instance where we needed to move some stuff around and I didn't have time to do it, but the designer I was working with felt comfortable to do it since it was just plain html.
While she is very uncomfortable touching any javascript.
Jean-Jacques Dubray
@jdubray
Jul 23 2017 17:14
If your function generates plain HTML, a Web designer can touch it up
JavaScript allows me to do very sophisticated stuff and really bring the design to life. I have trouble to believe a designer without coding skills can do the same with a DSL, but I may be wrong/biased.
I don't know if you looked at that project but that's pretty much my starting project for the work I do: https://github.com/jdubray/startbootstrap-clean-blog
It's also easy to use the good parts of JQuery (not the DOM manipulation part), last year we spent a good couple of weeks just to get a date/time picker running on Angular2. File upload is pretty fun too!
Jean-Jacques Dubray
@jdubray
Jul 23 2017 17:19
SAM works with Angular, so it's not a problem, but as a personal choice, I much prefer ES6 template literals/functional HTML over a template language (did we speak about debugging?)
Janne Siera
@jannesiera
Jul 23 2017 17:25
So could you say it's more of a personal preference than an industry best practice? I'm mostly surprised by the strong language against templates in some of the articles, especially given our specific use case. I mostly wanted to verify if there wasn't anything I missed. If I'm correct, then something like Vue could be a great candidate for us. Using templates most of the time, but having the option to go 'low level' in case of need.
Victor Noël
@victornoel
Jul 23 2017 17:29
Actually, with vscode, you get completion and typing in angular templates (https://marketplace.visualstudio.com/items?itemName=Angular.ng-template). Also, seriously, I find the template you showned much more readable than the javascript code you showed! especially with the loop in it. Still, I agree about the two-way databinding problem, but it's not inherent to templates, it is just a mistake to use two-ways databinding components (and actually, it's not so much problematic as long as the bound datastructure is local to your component and is just there to hold data pertaining to the form for example).
Jean-Jacques Dubray
@jdubray
Jul 23 2017 17:31
Let's go with personal preference then. Not sure why anyone would want to learn a template language, but it may be just me.
Victor Noël
@victornoel
Jul 23 2017 17:31
:)
Janne Siera
@jannesiera
Jul 23 2017 17:32
Okay, good to know. Either way we would avoid two way data binding.
Jean-Jacques Dubray
@jdubray
Jul 23 2017 17:33
Vue is right now the closest to SAM compared to any other framework, even their TLA is A-ction M-utation S-tate ...
Victor Noël
@victornoel
Jul 23 2017 17:34
Anyway, as you said, it does not contradict SAM. Even though, as we discussed the other day when I cleaned the angular sample app, angular makes you want to bind observables to your template, so the State function gets kind of hidden inside either selectors on the store (when using something like redux to implement the model mutator part of SAM) or in a pubsub mechanism as you did. I don't know if it's a problem or not, I haven't played enough with all of this :/
@jdubray vue without even including vuex?
Jean-Jacques Dubray
@jdubray
Jul 23 2017 17:35
sorry, with vuex
Not sure why anyone would want to use vue without vuex.
Victor Noël
@victornoel
Jul 23 2017 17:35
ok, I don't know them at all apart from a little reading :)
Jean-Jacques Dubray
@jdubray
Jul 23 2017 17:36
The other argument of course is once you use a framework you buried your feet in concrete. Just ask the Angular1.x projects
Janne Siera
@jannesiera
Jul 23 2017 17:37
In what way are SAM and vuex similar and what are their differences exactly?
Jean-Jacques Dubray
@jdubray
Jul 23 2017 17:37
I lost a company in the 90s for that same reason, it would not have existed without that framework, but I tend to be allergic to dependencies. Languages tend to be backwards compatible.
Victor Noël
@victornoel
Jul 23 2017 17:38
@jannesiera the question should be "in what way vue/vuex complies to SAM?" because they are not a the same level of abstraction, SAM is more a pattern than a framework :)
Janne Siera
@jannesiera
Jul 23 2017 17:38
I was hoping SAM would help us with being less reliant on one front-end framework and help us if we want to replace/transition it in the future.
Jean-Jacques Dubray
@jdubray
Jul 23 2017 17:38
From what I read, vuex is missing nap(), I'll have to double check what they do with State, but Action/Mutation and Action/Model are pretty much the same.
At a minimum SAM will keep 100% of your app logic outside the framework, that means that a transition from Angular 1.x to Angular2 would possibly be 10 times less work.
Daniel Neveux
@dagatsoin
Jul 23 2017 17:39
Nop you can have nap with mutation subscription.
Jean-Jacques Dubray
@jdubray
Jul 23 2017 17:40
When I seem people loading Angular2 components with business logic and CRUD, I feel sorry for them.
Daniel Neveux
@dagatsoin
Jul 23 2017 17:40
(With vuex)
Jean-Jacques Dubray
@jdubray
Jul 23 2017 17:40
good to know
Janne Siera
@jannesiera
Jul 23 2017 17:46
Now, in regards to SAM I have a lot of questions, from very general to very specific. I hope I can pick your brain in the following days and weeks about that. But first I would like to look at more of your code samples as u didn't have the time yet. One thing I wanted to ask already, though. What do you mean exactly when you say model? This term has been used so many times in so many ways that it has lost all meaning for me. I'm sure it has a very well defined meaning to you but which one, exactly? Do it think about it as a bag of data? Or a complete state full component with its own specific Api? I'm not very well versed in cs terminology and something tells me my college professors didn't know what they were talking about half the time either.
Jean-Jacques Dubray
@jdubray
Jul 23 2017 18:24
sure, any time.
The Model is the application as a single-state-tree and a set of properties (think of a JSON object). The Model controls all application states mutations and invokes the state function once a mutation step is complete (in response to an action's proposal).
So yes, it's a bag of data, but isolated from the outside world. Actions should not access the model to create the proposal and the state function should compute the state representation which is the input to the view components.
The only method to the model is model.accept(proposal) (also called "present" instead of accept).
Jean-Jacques Dubray
@jdubray
Jul 23 2017 18:29
In general people don't like my style of implementing the mutations (acceptors) because they all start with an if statement:
      if (proposal.someData) {
          ... mutate state
      }
that style is essential to preserve a many-to-many relationship between actions and acceptors.
You should avoid a strong coupling between the action's proposal and the acceptor which will be triggered.
There is no getters/setters on the model. Only the State function is able to access it but not mutate it.
The model should be synchronized, I think vuex does that nicely. Redux is a pure (sync) function so it does it by design, but I don't like that implementation.
Unfortunately there is not an agreed upon definition of what we call Action, Model or even State. Everyone throws it's own definition (including myself, though I have tried to aligned them with TLA+, the temporal logic of actions)
View Components should only listen to properties (computed form the model) and send events that trigger an action.
Jean-Jacques Dubray
@jdubray
Jul 23 2017 18:34
There should be no application logic or application state in the view components. It is a big anti-pattern to do so.
Actions translates events into a proposal (validate, transform and enrich with API calls)
State function is a bit more abstract but not much. It's purpose is to decouple the model from the view components
Jean-Jacques Dubray
@jdubray
Jul 23 2017 19:28
To be honest, I still don't see the light, I can't believe anyone would think that's a great alternative to template literals:
<div [ngSwitch]="value">
 <ng-container *ngSwitchCase="0">Text one</ng-container>
 <ng-container *ngSwitchCase="1">Text two</ng-container>
</div>
In ES6 it would be:
<div>
     ${(value === 0) ? 'Text one' : 'Text two'}
</div>
I can't think of a single case where I would want to use a template language or feel it would be a major step forward.
The way I work is I let designers create their template in HTML5/CSS3, with some cool JQuery components (DataTables, C3, ...) and I continuously incorporate their changes, into the SAM's view components (aka the "theme").
Nivani
@Nivani
Jul 23 2017 20:20
A few weeks ago I mentioned I had written down some ideas on how I would wire SAM borrowing ideas from ngrx/store and Victor Savkin. A first working version is ready: https://github.com/Nivani/todo-sam
It still needs a bit of work, but all the elements are there.