Skip to content

Instantly share code, notes, and snippets.

@markerikson
Created June 13, 2016 03:35
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save markerikson/15e9098d6eed804cd4fcfd4b98a092a9 to your computer and use it in GitHub Desktop.
Save markerikson/15e9098d6eed804cd4fcfd4b98a092a9 to your computer and use it in GitHub Desktop.
Redux and forms chat

[10:36 PM] acemarke: @Francois Ward : hey, you guys have a whole bunch of apps going on. Any thoughts on forms? https://news.ycombinator.com/item?id=11890229
[10:39 PM] Francois Ward: yeah. They're generally non-standard forms (like task lists, etc) or one off text fields, etc, rarely full blown forms, so it's not a problem that we tackled a whole lot. Some people are experimenting with redux-form, because the v5 API is pretty simple and essentially just reduces typing (::shrugs::). The new API in v6 is very different and is much more intrusive, so there's less interest in that.
[10:39 PM] acemarke: "more" intrusive? I though the point was that it was less so
[10:39 PM] Francois Ward: Personally, I feel like forms in any substantial, high quality product need to be properly designed and engineered, so using a generic form framework will never give you "quite" the thing your designer may want, so I prefer hand coding them.
[10:39 PM] acemarke: pick-and-choose, more pinpoint-ish, rather than "wrap the entire component"
[10:40 PM] Francois Ward: like, the way validation works, etc, is never -exactly- the way you want it.
[10:40 PM] acemarke: (vague impression from skimming the issue)
[10:40 PM] Francois Ward: forms are so easy to do too in Redux, adding a framework just adds complexity
[10:40 PM] acemarke: so I guess the big question is, how chunky would you make your controlled form input actions?
[10:40 PM] Francois Ward: nah, the previous version was just properties on vanilla html
[10:40 PM] acemarke: dispatch per-keystroke, on blur, ...?
[10:40 PM] Francois Ward: the new version adds redux-form specific components
[10:41 PM] Francois Ward: @acemarke depends on the form. Depends on the designer's vision.
[10:41 PM] Francois Ward: Any framework or tool that is opinioned about that is dead on arrival in my book.
[10:41 PM] Francois Ward: So a perfect one would simply give you an API to link fields via a function, and on whatever event you want you'd trigger that and it would do the boilerplaty-part.
[10:42 PM] Francois Ward: but at that point you're 90% of the way to hand-coding.
[10:44 PM] Francois Ward: From that HN thread (going on HN for javascript advices is masochism at best, but whatever...)

"The alternatives seem to be storing the state in the component in which the typing is happening, or in the parent Controller, and then only generating update actions against the store when some "finished typing" event occurs (i.e. onBlur or timeout). Of course this seems to go against the idealistic implementation of Redux where all the state is stored in that one state object and it's immutable."
[10:44 PM] Francois Ward: Sounds like that guy has the right idea, minus the last sentence.
[10:44 PM] acemarke: yup, that's what I'm doing in my app
[10:44 PM] Francois Ward: Thats one case where (for larger forms where it could be inefficient), local state is useful
[10:44 PM] Francois Ward: as a temporary cache to reduce amount of updates to the global store.
[10:44 PM] Francois Ward: the data ends up in the global store anyway
[10:44 PM] Francois Ward: just only once it's relevent.
[10:44 PM] acemarke: exactly
[10:45 PM] Francois Ward: for small forms and stuff, I still just go straight to global state.
[10:45 PM] Francois Ward: I also make very liberal use of debouncing...which is why you need the intermediate state (I much prefer controlled components, so if you debounce and don't have an intermediate state, well, typing will do nothing, lol)
[10:45 PM] acemarke: the perf aspect is something to keep in mind, but probably a premature optimization. On the other hand, I just don't want to see that many small actions in my log
[10:46 PM] Francois Ward: nah
[10:46 PM] Francois Ward: its not premature in this case
[10:46 PM] Francois Ward: even simple cases will go to a crawl if you're not careful
[10:46 PM] Francois Ward: the one we keep hitting is when typing in a field affects the current route, too (like, when the url reflects the current input so it's deep linkable)
[10:47 PM] Francois Ward: turns out modifying a url is flipping expensive
[10:47 PM] acemarke: (side note: maybe it's just that I've never touched routing, but I feel like that alone counts for at least 1/3 - 1/2 of "Javascript Fatigue")
[10:47 PM] Francois Ward: Yes.
[10:48 PM] acemarke: basically the controlled input problem writ large
[10:48 PM] Francois Ward: Well, that's the thing...people will disagree, but the centralized state and the reason Redux got so popular, was because decentralized state is such a problem.
[10:48 PM] acemarke: except also affecting loaded components, data, etc
[10:48 PM] Francois Ward: and then you hit routing, and you have kind of 3 state.
[10:48 PM] Francois Ward: the url itself, the router (which is usually in sync), and your redux store.
[10:48 PM] Francois Ward: and then things get complicated.
[10:49 PM] Francois Ward: the new withRouter HoC component implementation to make it play ball with Redux helps a lot.
[10:49 PM] Francois Ward: but I strongly feel we need a router made and designed from stratch with centralized state in mind (I know Dan disagrees, but...)
[10:49 PM] Francois Ward: its not even "with redux in mind". Redux is just one implementation of a very common idea, popularized by other frameworks like Elm Architecture, Om, etc.
[10:50 PM] Francois Ward: and they'd all benefit from that solution.
[10:50 PM] Francois Ward: I only looked quickly at Elm routers, so I dunno if there's anything interesting there.
[10:50 PM] Francois Ward: React Router's history (the hard part of routers) is open source and standalone, so anyone who's smarter than me could take a stab at it.
[10:53 PM] acemarke: (side side note: I keep feeling like I ought to be blogging about... something, but not sure what I'd talk about. Feel like I don't have much "original" to say, I just collect what everyone else has put together and collate it. My forte seems to be answering specific questions one-on-one.)
[10:53 PM] Francois Ward: Most of the interesting topics at this point IMO involve real world, production apps. The maintenance part.
[10:54 PM] Francois Ward: Thats why the anti-boilerplate movement is so big right now.
[10:54 PM] Francois Ward: because everyone is still in the "starting from scratch phase"
[10:54 PM] Francois Ward: and Redux is terrible at that.,
[10:54 PM] acemarke: I mean, maybe I could write up how my own proof-of-concept form HoC works or something
[10:54 PM] Francois Ward: Redux is fantastic at maintaining a large, frequently modified application.
[10:54 PM] Francois Ward: And thats where the gap in published info is.
[10:54 PM] acemarke: yeah. I've got a million project startup links collected at this point, really looking to fill out the intermediate/advanced use cases
[10:55 PM] Francois Ward: and then when someone publishes stuff right now, the entire thing is "Look at how we reduced boilerplate by adding a ton of complexity and essentially rewriting Angular 2 in Redux!"
[10:55 PM] Francois Ward: .
[10:56 PM] Francois Ward: I actually hope MobX grows more popular so people can use the right tool for the right job and we can go back to solving problems instead of trying to make Redux into something it's not.
[10:56 PM] acemarke: like http://blog.mgechev.com/2016/04/10/scalable-javascript-single-page-app-angular2-application-architecture/ ?
Minko Gechev's blog
Scalable Single-Page Application Architecture
In order to have better understanding of the following blog post you should be familiar with the fundamentals of the object-oriented and functional programming. I also strongly encourage you to explore the redux pattern.
[10:56 PM] acemarke: or more like that Radical thing?
[10:57 PM] Francois Ward: Smaller scale than that.
[10:57 PM] Francois Ward: Things like, "here's a small, real world problem that is encountered frequently, and here's how we solved it with idiomatic redux".
[10:57 PM] Francois Ward: LIke, one that by now has a lot of published solution is the debounced or throttled promise ordering problem.
[10:59 PM] Francois Ward: The Cloudflare open sourcing UI thing was cool too, but their entire premise is reducing boilerplate. That wasn't very interesting IMO.
[10:59 PM] Francois Ward: but something LIKE IT would be interesting.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment