These are chat archives for jdubray/sam

16th
Aug 2016
Jean-Jacques Dubray
@jdubray
Aug 16 2016 02:34
would scalajs run on the server? what kind of runtime would they use? can scalajs run in the browser as well?
Jean-Jacques Dubray
@jdubray
Aug 16 2016 11:46
@vforvalerio87 I completed the sample, it's all working now. I can share the node.js code if you'd like
It is simulating a slow start/stop
Scott Conklin
@srconklin
Aug 16 2016 14:44

I have discovered a quirk with my SAM design that I want to point out. I am not sure the best way to solve it as I believe that I should not have to conditionally update the UI. (which is in part the point of a SAM approach) The issue occurs under the following conditions.

Imagine a very simple form; 2 textboxes (which should grow in number later). I have intentionally avoided the use of a save button to persist the user input and wish to simulate the behavior of a react component that I once used in that an action is fired on the onBlur event of each textbox which triggers the reactive loop. (user input proposed to model -> model updated -> state.render -> view.display) which results in a complete rewrite of the view.
It all works, but has the symptom that when one clicks or tabs directly to the next textbox, it is not immediately available.. i.e. it cannot accept the focus and a second click is required to activate it which gives it a "sluggish" feel. I am not using a DOM diff lib.
Any thoughts on how to solve this? should I have to adopt like seen in the TODO Vanilla JS example where the data is saved on click of a save button?

Edward Mulraney
@edmulraney
Aug 16 2016 15:44
i havent properly read your problem but isn't it a matter of tracking the active text box and onFocus'ing it on load?
tracking in the model that is
Jean-Jacques Dubray
@jdubray
Aug 16 2016 15:52
@srconklin @edmulraney Focus is a general problem in any Web framework
the way I have handled so far is in nap()
I have implemented a "query field" that runs some queries based on the key pressed (after each keypressed event) this is what the code in nap() looks like:
var _nextAction = (model: any) => {

        if (model.focus) {
            console.log('refocusing query field '+ model.focus) ;
            setTimeout(function(){
                var el: any = document.getElementById(model.focus) ;
                if (el) {
                    el.focus();
                    var val = el.value; //store the value of the element
                    el.value = ''; //clear the value of the element
                    el.value = val; //set that value back.  
                }
            }, 20);
        }

    } ;
I believe a similar approach should work to solve your problem
You have to use a delay (setTimeout) to make sure the focus happens after the view has been rendered
Edward Mulraney
@edmulraney
Aug 16 2016 16:10
instead of setTimeout you could render the input with autofocus=true
Jean-Jacques Dubray
@jdubray
Aug 16 2016 16:12
looks like it would be easier then, I'll give it a try
Edward Mulraney
@edmulraney
Aug 16 2016 16:13
althought it looks like you would need the setTimeout approach if you're targetting mobile safari users (pretty likely)
doesnt look supported on mobile safari
Jean-Jacques Dubray
@jdubray
Aug 16 2016 16:13
ouch
Edward Mulraney
@edmulraney
Aug 16 2016 16:16
the new IE!
Scott Conklin
@srconklin
Aug 16 2016 17:20
@edmulraney I am not sure I follow the suggestions given here... how would autofocus=true help. This issue happens when clicking on any textbox while the Onblur of the the textbox you are leaving is firing and rendering the view. Where should I be setting the autofocus=true?
Edward Mulraney
@edmulraney
Aug 16 2016 17:21
yeah so the onBlur triggers re-render and your render code would have something like:
<input ... autofocus="`${model.textbox.id === thisTextboxId}`">
the onBlur could send the textbox that needs to be focused. either the textbox being tabbed to, or the one that lost focus
Scott Conklin
@srconklin
Aug 16 2016 17:25
the onBlur could send the textbox that needs to be focused.
How do i know what that is if a user is just randomly clicking between one of several textboxes in a form
Edward Mulraney
@edmulraney
Aug 16 2016 17:27
getting the textbox they're clicking would be hard cos onBlur would fire first
Scott Conklin
@srconklin
Aug 16 2016 17:27
yea, that is what i mean. not sure how to cleanly implement something like that
@jdubray not sure I understand what you are proposing in nap() either... what is in the value in the incoming model.focus property?
Edward Mulraney
@edmulraney
Aug 16 2016 17:31
the onFocus of the next clicked input could dispatch an action saying render me focused
Scott Conklin
@srconklin
Aug 16 2016 17:31
maybe I did not describe the issue that I having well, it is not that i want to set a particular field to have a default focus.. it is the rendering (from an onBlur) is preventing the user from activating the textbox while rendering is still happening. maybe onBlur is a bad idea to update the model?
Jean-Jacques Dubray
@jdubray
Aug 16 2016 17:31
just true/false, it is just an indicator that we need to trigger that code
Edward Mulraney
@edmulraney
Aug 16 2016 17:32
your model.focus is an element ID not a boolean
Scott Conklin
@srconklin
Aug 16 2016 17:32
@edmulraney interesting... I could try that.
Jean-Jacques Dubray
@jdubray
Aug 16 2016 17:32
It it is something you need to before triggering an action, that is possible too, though bending a bit the SAM patterns. React does it the same way
Scott Conklin
@srconklin
Aug 16 2016 17:33
@jdubray what bends the rules of SAM?
Edward Mulraney
@edmulraney
Aug 16 2016 17:33
@srconklin agreed - this isnt about a default focus, as it would change with every render. its just about setting the text input the user is intending to focus. either none (clicks away from input), or another text field
Jean-Jacques Dubray
@jdubray
Aug 16 2016 17:34
you can check this sample
var Spinner = ({action}) =>  (
            <div id="spinner-component">
                <button onClick={() => { 
                        action({spinner: "spinner"})
                        document.getElementById("spinner").className = "loader"
                    }
                }>
                  Start spinning! 
                </button>
                <div id="spinner" className=""></div>
            </div>
          )
that line is:
document.getElementById("spinner").className = "loader"
You should avoid direct DOM manipulations
Edward Mulraney
@edmulraney
Aug 16 2016 17:35
@jdubray in react the focus is maintained even after re-render
this problem isn't visible in react
Scott Conklin
@srconklin
Aug 16 2016 17:42
@jdubray sorry, must be dense... not sure what I am meant to take away from the sample.... document.getElementById("spinner").className = "loade
@jdubray oh, i think you are saying what not to do.. this is an example of a direct dom manipulation.
Scott Conklin
@srconklin
Aug 16 2016 17:58
@jdubray never mind. I see what you mean now with your nap() solution higher up.... works great! thanks
Jeff Barczewski
@jeffbski
Aug 16 2016 18:26
@jdubray I believe they would be using scala on the server via the JVM and would just be using scalajs to reuse much of that same code for React Native. I believe that scalajs runs in the browser now too. I was reading on the scalajs website and I think they have it stabilized and running where ever js runs.
I don't know whether scalajs would run on the server but I would guess that it would via Node.js.
Jeff Barczewski
@jeffbski
Aug 16 2016 19:21
I've created a new library redux-logic that should help React/Redux users with implementing the main features of the SAM pattern, namely where to intercept and perform the acceptance logic and the NAP logic. With redux-logic they can simply implement validate and process hooks to perform that functionality. https://github.com/jeffbski/redux-logic
I put a mention about implementing SAM pattern with it in the readme https://github.com/jeffbski/redux-logic#implementing-sampal-pattern
I have a variety of examples including a countdown timer inspired by @jdubray's launch app https://github.com/jeffbski/redux-logic#examples
I'd love to hear your thoughts.
devin ivy
@devinivy
Aug 16 2016 19:25
@jeffbski a first pass, i quite like how it looks :)
i was wondering if something like this were out there
Jeff Barczewski
@jeffbski
Aug 16 2016 19:25
I was wondering too and couldn't find anything that fit my liking.
devin ivy
@devinivy
Aug 16 2016 19:28
i'm interested in looking one level lower, if any of the implementation details of redux-logic might point at some good general-purpose middleware patterns.
one thing i wonder about with redux is if we should simply be writing more middleware in our apps!
Jeff Barczewski
@jeffbski
Aug 16 2016 19:29
Yeah, I think we've only scratched the surface of what could be done.
That's certainly a possibility. I think we'd need to build in a nice way to dynamically append middleware safely (rather than replacing all middleware and possibly losing state) but then it might be possible to create some functionality pieces that could be composed together.
Basically middleware building blocks.
Jeff Barczewski
@jeffbski
Aug 16 2016 19:35
If we had the right ones to build on, I'd certainly love to simply make redux-logic a thin layer over the top of them :-)
devin ivy
@devinivy
Aug 16 2016 19:37
the hapijs server framework for node came-up with a great plugin model as a response to express middleware. i wonder if a similar thing could happen with redux.
it's an issue of composability. SAM is certainly interested in that issue. nesting parent/child SAM containers should be something that works.
Jeff Barczewski
@jeffbski
Aug 16 2016 19:39
Yeah, I'm a big fan of hapijs. It has a nice API that grew out of frustration and fragility with express use in large teams.
We used it at MasterCard and it worked out excellent. Being able to put all your code into plugins and then compose was phenomenal.
Jean-Jacques Dubray
@jdubray
Aug 16 2016 19:42
@srconklin I guess you cannot fully eliminate direct DOM manipulations. I believe HTML6,7,8... should target constructs that remove the need for DOM manipulation in functional HTML. At this point, it's pretty clear that functional HTML is HTML's best friend.
@jeffbski that's fantastic news. Really excited to take a look later today!
Jeff Barczewski
@jeffbski
Aug 16 2016 19:43
:-)
@devinivy I think having some sort of way to compose redux in that fashion would be great. I would especially want it to be able to compose over time with the ability to use dynamically loaded bundles. So for large apps they don't have to load everything on the first page, they can load in additional functionality (reducers, actions, logic/middleware) as they navigate to different parts of the app.
devin ivy
@devinivy
Aug 16 2016 20:08
:thumbsup:
Scott Conklin
@srconklin
Aug 16 2016 20:26
Sorry to bring this up again. but I thought i had it worked out.... I am still having an issue with how to make the form operate after an update from on Onblur on the textarea as eeen in the fiddle below.. If you type something in the textarea and then click the link you will see nothing happens, click it again and it works.. (that the symptom of the problem with no solution applied)
my attempt to use onFocus on the 'Time' inputboxes to dispatch an action to fire a NAP to let it gain the focus is sending the system into an endless loop. open dev console and then blur out of the textarea into one of the "time" input boxes.
https://jsfiddle.net/sconklin/qfz27mtm/
hopefully someone can point me in the right direction.