Could you elaborate on this? I've been creating form heavy react apps for a couple of years now and haven't really come across anything that would make it 'a mess'.
I find that the biggest issue with forms and react is attempting to use lifecycle methods and local state to manage the behavior of the controls: at work, I’ve done a bunch of refactorings to replace local state and lifecycle methods with redux and logic in the render method of the parent components, and this has always led to simpler components and has fixed a lot of bugs caused by inconsistencies between props and state.
I think this is because you are using both state and props to manage the values of fields. I generally tend to use only props, with an onChange handler passed in from the parent component. This way, I can always have an up to date mapping of field names to values in the parent component, while simplifying state management in the child.
You made not need redux! Found lot's of projects where they plug redux an turns the project a completly mess. (connected components everywhere), actions to manage local component ui state..
You're right Dan, this is a great framework, but the code complexity behind it is insane. Of course a lot of that complexity is due to HTML/browser, we cannot ignore that.
However, part of that complexity is the fault of React. The choice of HOC vs. Component... two ways to do the same thing. There is also FastForm vs. Form. As we move on over time, now we have hooks being added as well. The mental complexity just to put a simple input on a page is overwhelming.
I think what I'm looking for is React to take some ownership and provide guidance out of the box for these core browser features under the React umbrella.
> I think what I'm looking for is React to take some ownership and provide guidance out of the box for these core browser features under the React umbrella.
So we need React on Rails? An opinionated collection of libraries that work on top on the React Runtime. I personally find this idea compelling.
There are a few of these sorts of things already. I'm not really talking about opinionated frameworks (or collections of various github projects stuff into a big meta project). https://reactjs.org/community/starter-kits.html
What I'm talking about is something more akin to this statement:
https://angular.io/guide/forms-overview "Handling user input with forms is the cornerstone of many common applications"
But isn't that something React wants to avoid? I remember reading somewhere that React does not want to recommend any approach to forms, routing, etc., but leave it to the user.
I mean, I don’t think it’s designed to “put an input on the page”. Tracking things like hover, dirty and pristine states, sync and async validation, etc, is an inherently complex problem.
If you just want to put an input on the page, that’s just three lines with React. (Especially with Hooks.)
I think redux is the only thing that can prevent a react project from becoming a mess: I’ve noticed that the major bug points in the app are where people try to use something else to manage state
I'd do something like this: have the user load up X dollars upfront. When they set the time they want to wake up, configure it such that if they don't hit a button on your site within half an hour from their wake up time, the money automatically deducts.
@mds101: Yes - the current sequence of messages allows for about 30min after the set wake-up time. Brainsync.
And I like the idea to add a balance. Would also limit the amount of partial / dummy records being submitted. Some people are cautious about giving their cc details to new services like this though, see e.g. wozmirek's comment further up. Any ideas how to give these users more confidence in the early days?
@mds101: I've added a $10 balance request for first donations if users get up late. Will monitor acceptance level and look forward to additional feedback!
Wouldn't this be resolved by setting a data-1x property (leaving the src/background-image property blank)and then running javascript to substitute the data-1x property for non-retina devices and data-2x property for retina devices?
Not that simple. That would be fine for a client-side app, but not for a public-facing site:
1) no javascript = no images. crawlers/bots/archival services won't see them - google might even penalize you for broken image sources. one error in your main js file and all images are toast. needs other workarounds.
2) longer page load times unless you use inline scripts
4) extensions like readability, pinboard, weheartit, etc, might break
If you are going to use this, you should use querySelectorAll('[data-2x]') to select the nodes, rather than getElementsByTagName('*') and then check if each node has a data-2x as is done in the article, for performance reasons[1] and to make your code simpler.
Hopefully we will not go out of business anytime soon ;)
But to answer your question, we host the tours ourselves and provide you with a small script to insert into your page. And in the event of us going out of business, we will provide an 'offline tour player script' which you can host yourself. This is something we are already developing for some of our clients, who require it for sensitive internal apps, so we should be able to open it up for everybody if the need arises.
It is a super specific product. We designed it to be simple and so one thing but to do it extremely well. In our opinion literally every webapp requires a guided tour. If not to explain the features on their landing page, then to guide users through the actual functionality of the app itself. So IMHO, there is a pretty large market for us. Over the next few weeks we will be writing about how our customers are using Easy Product Tours in their applications.
Could you elaborate on this? I've been creating form heavy react apps for a couple of years now and haven't really come across anything that would make it 'a mess'.