These are chat archives for jdubray/sam

6th
Apr 2017
Paolo Furini
@pfurini
Apr 06 2017 14:34
Hi to all.. I just started exploring new patterns/architectures for building SPAs, and I have a (maybe silly) question: if you know Elm (http://elm-lang.org), is it possible to use the SAM pattern with it, or its opinionated "Elm Architecture" pattern is already embracing it?
Jean-Jacques Dubray
@jdubray
Apr 06 2017 17:17
It's possible, Redux/Elm is using a pattern that can be described as follows:
Event->Update(model)->render(View)
SAM is a slightly different structure for Update(model), instead of one big bucket, SAM suggests that it's better to use three buckets: Actions, Model, State + nap() (nap is part of State function)
What confusing is that Redux is calling "events" actions, actions cannot be a mere data structure.
It's just impossible to have any discussion with these communities.
Paolo Furini
@pfurini
Apr 06 2017 17:21
I know for sure that the Elm author has very strong opinions, and he's not willing to change his mind on some aspects of the language, or the Architecture
Jean-Jacques Dubray
@jdubray
Apr 06 2017 17:22
blob
SAM is just a factoring of an event handler
It does not even require that you use functional HTML ( V = f(M))
I have created an Angular2 sample that uses publish/subcribe to update the view.
all elements are important, you cannot neglect one.
Paolo Furini
@pfurini
Apr 06 2017 17:26
Interesting.. I'm currently developing in Aurelia, so that example could be more readable to me
Jean-Jacques Dubray
@jdubray
Apr 06 2017 17:27
This is a non starter for SAM: Two-Way Databinding
Paolo Furini
@pfurini
Apr 06 2017 17:27
I know, and that's the reason I started to look elsewhere
Jean-Jacques Dubray
@jdubray
Apr 06 2017 17:27
you can only use One Way data binding (Angular2).
All you have to do is generate events for V->M updates
then the State function can generate the view properties for Data Binding.
It's a big Kludgy if you ask me, but if you have no other choice, that's how I would do it.
Paolo Furini
@pfurini
Apr 06 2017 17:30
So, in theory, this achievable in Aurelia too
Jean-Jacques Dubray
@jdubray
Apr 06 2017 17:30
yes, but you need to abstract the databinding from the reactive loop.
Paolo Furini
@pfurini
Apr 06 2017 17:32
Then it fits better with React, for example.. I know you're against such libraries, but I'm trying to mix the availability of already written components, with the benefits of SAM..
Jean-Jacques Dubray
@jdubray
Apr 06 2017 17:32
It's quite a bit of extra work, but I think it's doable, you need to be in a position where:
a/ you generate events from the view
b/ the view waits for property updates
Paolo Furini
@pfurini
Apr 06 2017 17:34
I see.. where can I find the Angular2 example?
Jean-Jacques Dubray
@jdubray
Apr 06 2017 17:35
Angular2 is a lot simpler than react. The problem with React is that it's too "reactive". The setState({...}) will kill them.
Paolo Furini
@pfurini
Apr 06 2017 17:35
And another concern.. if I re-use a third-party component in my application, it can potentially break the rules, right?
I mean in whatever framework of choice, even a vanilla JS one
I like vanilla.js
This is the most complete vanilla.js sample: https://github.com/jdubray/startbootstrap-clean-blog/
Jean-Jacques Dubray
@jdubray
Apr 06 2017 17:42
Angular2 looks a bit intimidating at first but you very quickly go into a "cookie cutter" mode and SAM allows you to keep 100% of your business logic outside Angular2
The Angular2 CLI is very helpful, you don't have to mess with Webpack at all.
SAM also allows you to move app logic from the browser to the server or back at pretty much any time, even move it to AWS Lambda if you want, because it's 100% Javascript.
Paolo Furini
@pfurini
Apr 06 2017 17:44
The problem I face every time I start a new web project for a client, is that they demand a lot of interactivity, nice looking components, etc.. and I can't afford build a lot of them from scratch.. so I need to put some (or a lot) of ready-made components at work.. but how well they work together? how they consume data or manipulate data? most of the time I have no control on them
Jean-Jacques Dubray
@jdubray
Apr 06 2017 17:46
I have done many projects where I start with an HTML5 template and build an entire app with it.
Paolo Furini
@pfurini
Apr 06 2017 17:48
An example: I decide to write a SPA in Angular2/4 or whatever, and my client demands a highly interactive data grid.. we know that the big components companies out there uses their own "data adapters", like Telerik or Syncfusion.. how can I integrate such components with SAM?
Jean-Jacques Dubray
@jdubray
Apr 06 2017 17:48
I can take any of these HTML5 templates and create a Web app from it. I just create "themes" like this: https://github.com/jdubray/startbootstrap-clean-blog/blob/master/components/theme.js
Paolo Furini
@pfurini
Apr 06 2017 17:49
So you're also using JQuery components, or the like?
Jean-Jacques Dubray
@jdubray
Apr 06 2017 17:49
So it depends if you need to response to keypressed events, that's the only tricky thing I found so far.
Paolo Furini
@pfurini
Apr 06 2017 17:50
What if some of them are programmed to "take control" of the data binding, like telerik components?
Jean-Jacques Dubray
@jdubray
Apr 06 2017 17:51
yes, JQuery works great. The view is the view with SAM, 100% decoupled from the app logic, just make sure you stay with event / properties paradigm
the best is to not use data binding, if you have to, just use one way, keep a layer of abstraction separate from SAM. That's not very hard.
Paolo Furini
@pfurini
Apr 06 2017 17:53
Yeah, but we need components that are written like black boxes, and the telerik data grid is not written like that..
Jean-Jacques Dubray
@jdubray
Apr 06 2017 17:53
The reason I created SAM was precisely because I felt calling an API and rending data was way too hard. That's what it does best.
Paolo Furini
@pfurini
Apr 06 2017 17:56
Have you ever used a heavy control like a data grid in your apps? I'd like to see an example of that coupled with SAM pattern..
Jean-Jacques Dubray
@jdubray
Apr 06 2017 17:57
Only in Angular2
I just completed a big project that was about displaying parameterized reports (regions, products,...). Data was thousands of rows.
(paged of course)
It depends if you need to do edits in that table. In our case, it was read-only. That's of course a lot simpler.
Paolo Furini
@pfurini
Apr 06 2017 18:01
By data grid I mean an interactive one, like this one I used in several past projects: https://datatables.net
Fred Daoud
@foxdonut
Apr 06 2017 18:01
@jdubray what do you recommend as a code example for Angular2 + SAM? Would it be https://github.com/jdubray/sam-samples/tree/master/angular2-admin-master-2.0.0 or something else?
Jean-Jacques Dubray
@jdubray
Apr 06 2017 18:02
yes, the SAM components are in dashboard
@pfurini again, the only problem I have seen is when you need to manage keypressed events. If you can limit your use case to displaying an input field and submit it, it's totally doable.
Even keypressed events are not that hard, but I have never done it on a table, only a search field.
Paolo Furini
@pfurini
Apr 06 2017 18:04
Data grid components are very heavy in terms of interactions, they handle a lot of mouse events, and potentially each column can have filtering/search controls, input boxes, etc.
Jean-Jacques Dubray
@jdubray
Apr 06 2017 18:08
yes, I have never done it, that's a different game altogether.
Paolo Furini
@pfurini
Apr 06 2017 18:08
So I'd have to wrap every possible input to feed an action into the "pipeline".. achievable, but it's not that practical
Jean-Jacques Dubray
@jdubray
Apr 06 2017 18:10
well, that's what you would need to do with Redux or ELM too, we feed off the same stream of events.
Paolo Furini
@pfurini
Apr 06 2017 18:10
Good point..
Yeah, I'd need to put the same effort in wrapping such a grid for Elm, I didn't realised that until now.. :worried:
I need to study more on this.. so you think it's better to try SAM with Angular 2 like in the example above, or something like https://github.com/foxdonut/meiosis along with React could be a good solution too?
(disclaimer: I don't love NG too much..)
Jean-Jacques Dubray
@jdubray
Apr 06 2017 18:21
If there is a datagrid control for Angular2 then you should be able to wrap all the events that you care about easily (assuming there are not too many per project) (only the one that generate events you care about).