Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Activity
    Jean-Jacques Dubray
    @jdubray
    It's preferable to not use data.xxx = model.yyy in the action
    The action should be simply transforming the data passed from the view (changing units,...) and user input validation (but not integrity validation, that will be done in the model)
    Michael Solovyov
    @msolovyov
    here's my attempt at the list app, http://codepen.io/msolovyov/pen/qbvYpv?editors=1010
    I needed to add a state for when we're editing as opposed to adding
    Jean-Jacques Dubray
    @jdubray
    thank you Michael. Yes that works, I like states :-)
    That being said, I also wanted to show that the pattern does not degrade too much when you don't use them. I understand that State Machine semantics can translate into very verbose code and I'd trade state for the delineation of business logic into actions, model and next-action-predicate without second thoughts.
    Jean-Jacques Dubray
    @jdubray
    As we talked before, I understand your reservations about my silly string concatenations, but I feel a lot better when I don't use templates and databinding, they tend to erode the intent of the patent that the View is a function of the Model. It you absolutely have to use a framework, I would prefer something like React or Cycle.js
    In the end I just want to show that you can build great looking Web apps without a framework. As I mentioned before, the ngrx list app, took nearly 10 minutes to install on my Mac (npm install)
    Gunar Gessner
    @gunar
    who calls the nap function and when?
    Jean-Jacques Dubray
    @jdubray
    The state object/element, after the state representation (aka the view) has been rendered
    This is where you could serialize actions when needed, for instance the counter example I keep coming up with does not work when concurrent actions are expected (you'd be presenting stale values)
    You can only execute one action at a time (on a given model) and all the others have to be queued. When you are dealing with a typical GUI and only the user can send actions, you block the even loop until the new state representation is rendered (or if you don't want to block, you queue it up in nap())
    Jean-Jacques Dubray
    @jdubray
    unlike what Mykola Bilokonsky (@mbilokonsky) was saying, to separate actions from model is not an anti-pattern at all (how would it be?), however, if you don't have the nap() function, you'd run concurrency issues. Again, this is standard TLA+ regardless of what @brucou is saying.
    Michael Solovyov
    @msolovyov
    Thanks for your input. I understand that it's not hard coded relationship and it's up to the developer to keep the code strict to follow sam dataflow. This was also a way for me to learn vue.js. I'll give react and cycle a try for the same examples and see how they fare. In vue.js it's pretty easy to make the view be based off state exposing different actions which I liked.
    Michael Solovyov
    @msolovyov
    I'll be looking for a pattern or abstraction to make the model.present code cleaner, something without all those if statements
    maybe the command pattern
    Gunar Gessner
    @gunar
    So, I am building a example using Redux-React-SAM. Redux is handling all Store mutations inside the Store (Model). I'd love to have your feedback https://github.com/gunar/sam-redux
    Bor González Usach
    @bgusach
    Hello there, just have a small question that kind of prevents me from doing some toy applications and starting to grasp this SAM thing. When using functions to create the views (instead of templates or JSX, etc), how do define the event handlers? In the examples I have seen some stuff like return '<button onclick=somefunction(somedata)>', but I don't see that going a long way: what if I don't have a reference (even within a namespace) in the global scope? Thanks.
    Gunar Gessner
    @gunar
    @bgusach using functions that return html is an implementation that @jdubray likes but is not at all necessary for SAM. I myself find it hard to use after knowing about React/VirtualDom.
    Jean-Jacques Dubray
    @jdubray
    There is no requirement whatsoever to do so, or even use HTML at all. This is just a pattern that simply states that the view is created as a function of the model, in a similar way to React.js. The same thing could be achieved in Objective-C/Swift, Java (Android SDK), ...
    Bor González Usach
    @bgusach
    I know, but for me it is about HTML and JS. And I really prefer good old javascript over a yet another framework (actually I found about SAM because of a comment on a blog post about the gazillion tools you need for JS development). And I think that it is easier to grasp the essence of something instead of getting distracted with yet-another-cool-thing (that cycle.js for instance)
    Jean-Jacques Dubray
    @jdubray
    a big THANK YOU!!
    Bor González Usach
    @bgusach

    So no easy fix for my problem? :D

    By the way @jdubray, what are your opinions about Ember? It offers some solutions to some of your problems. For instance, the models on the client don't have to match exactly what you are retrieving from the server. First you have a so-called "adapter" that can modify the data before it comes in or gets out, and then (and most importantly) your client models can have computed properties, e.g. if you have a Person model, and the age is coming from the server, you can define a property that computes on the fly "young" or "old" based on the age attribute.

    Jean-Jacques Dubray
    @jdubray

    sorry, I am not sure I fully understand your question.

    what if I don't have a reference (even within a namespace) in the global scope? Thanks.

    You'd have to dispatch the action in some ways, passing the corresponding parameters. Have you seen the example with Cycle.js?

    Jean-Jacques Dubray
    @jdubray
    Since the view is "generated" from the State which knows the allowed actions (and how to reach them) I don't see how you would not "have a reference".
    Bor González Usach
    @bgusach

    @jdubray the problem I see is that, if I have a function myAction, and I want it to be bound to the onclick, I have to write (as a string) something like onclick="myAction". But that will only work if that function is reachable from the global scope, which is something you want to avoid at all costs when developing serious JS applications.

    If I pack my whole application within an object that acts as a namespace, for instance MYAPP, and I expose my function there, I could write onclick="MYAPP.myAction", but still it would be better not to do so, and somehow bind the handler in another way.

    Gunar Gessner
    @gunar
    @jdubray I've put your Rocket example in a Fiddle. I've added a new button "Dummy Action" to test the nap() function. As I imagined, as your nap() doesn't know if it already has set a timer or not, it may set multiple timers i.e. running any other action during the countdown sets another timer. The end result is the same as these multiple timers don't interfere with one another, still, this could become a problem scaling. I don't like having to store a flag (mutate the state) just to indicate that a timer has been set. Do you know of any other solution?
    Jean-Jacques Dubray
    @jdubray
    @bgusach when you consider that the view is "generated" (as in code generation), then there is no need whatsoever to bind handlers another way. You are thinking that someone writes the code, when in reality someone wrote the generator that wrote the code.
    That's the absolute beauty of V = f(M)
    sorry, I am an old MDSE guy (can't help it)
    @gunar yes and no, because remember, unlike Redux / Sagas, SAM sequences precisely action-model-state. If you look at Redux thunks, they write a "script" regardless of the control state reached. That is fundamentally flawed. That is why I wanted to talk to Dan originally, because Redux is so close, but at the same time, it's leading people in the wrong direction. We are back to the usual action-oriented spaghetti.
    Front-End Architecture is such a perfect use case for SAM, because precisely it is a state machine. That's why FEA failed for the past 40 years, because we all ignored the state machine beneath.
    Jean-Jacques Dubray
    @jdubray
    SAM works, because its semantics are precise enough. State machines don't work when you start writing (S1, A,B,C, S2)
    Because After A, B may not be allowed, you can't arbitrarily write it that way
    Gunar Gessner
    @gunar
    Yes it's awesome not to have to worry about entering invalid states, but imagine a very complex app sending numerous actions, that'd trigger many timers. From a SAM perspective that's not a problem at all, but has performance costs on the browser. But I guess that's beyond the scope of this discussion.
    Jean-Jacques Dubray
    @jdubray
    Performance, IMHO is never a problem these days. Whenever there is a performance bottleneck we always found a way to fix it (virtual-Dom for instance).
    Remember, you also don't have to follow the exact semantic of SAM if you know what you are doing. In other words, that's what we have been doing for decades, writing state machines as a series of actions. The problem is that we rarely know what we are doing and SAM provides just enough constrains to eliminate most problems without much overhead.
    Algorithms tend to not require patterns like SAM, so I am not suggesting that we start using SAM everywhere all the time. I am saying however that SAM semantics (TLA+) work everywhere all the time, so when you see value over more "optimized code" you should go back to the basics of SAM.
    Jean-Jacques Dubray
    @jdubray
    That's what AWS is doing when they use TLA+. They write some code, but it's buggy, and the only way for them to find the bug is to "simulate" their code with TLA+. However for optimization reasons, they would not write it following the TLA+ semantics
    Does that make sense?
    Gunar Gessner
    @gunar
    "Simulate"? They rewrote parts of their software in TLA+ patterns just to better understand the system?
    Jean-Jacques Dubray
    @jdubray
    yes, this is what TLA+ is, it's not a programming language, it is a formal method to analyze code
    Since I learned about TLA+, I have looked at ways to use the semantics as you code so you have less bug to analyze later...
    I am lazy :-)
    Gunar Gessner
    @gunar
    Awesome
    Jean-Jacques Dubray
    @jdubray
    But again, that's not a way to write all your code.
    I'll never make that claim
    adonirammedeiros
    @adonirammedeiros
    @jdubray how do you compose larger SAM components with small ones? There's some way to do this?
    Jean-Jacques Dubray
    @jdubray
    It works at the view level, view can call actions at any level. comp
    I can't claim you can nest n-level, but 2-3 levels should be ok.