|
ddiddles posted:Is there a best practice when using API calls in a React/Redux based site? That's it. An async action is fired, when the request / firebase update is done, you fire another action. For Firebase, you can do fancy stuff to listen to changes on the DB instance and have actions trigger automatically if you are in to that.
|
# ? Jan 25, 2017 22:26 |
|
|
# ? Jun 8, 2024 08:11 |
|
Lumpy posted:https://egghead.io/courses/getting-started-with-redux Just want to say I've been watching these videos and they've already helped me understand things a LOT better, thanks!
|
# ? Jan 25, 2017 23:25 |
|
Lumpy posted:That's it. One thing I'm unclear on, where exactly is the "fetch company data" action dispatched FROM? I mean, generally you might use an onClick or something to trigger the dispatching of an action, what do you use if you want to immediately dispatch the action when the component loads? Is it acceptable to use the lifecycle methods for this?
|
# ? Jan 25, 2017 23:32 |
|
The Wizard of Poz posted:Is it acceptable to use the lifecycle methods for this? I hope so. Otherwise I've been doing it wrong.
|
# ? Jan 26, 2017 00:21 |
|
The Wizard of Poz posted:One thing I'm unclear on, where exactly is the "fetch company data" action dispatched FROM? I mean, generally you might use an onClick or something to trigger the dispatching of an action, what do you use if you want to immediately dispatch the action when the component loads? Is it acceptable to use the lifecycle methods for this? Generally to have a component auto-load data you'd use componentWillMount and fire an action there if the state doesn't have what it needs.
|
# ? Jan 26, 2017 00:29 |
|
I don't understand why there is not much documentation on creating constructors in React. Are you even able to create constructors in React? Is this what they mean when they say React is only the "V" in MVC? Should I just do this stuff if Javascript and then render the results in React? Basically what I'm asking is how does something like this translate to React code? code:
teen phone cutie fucked around with this message at 05:39 on Jan 26, 2017 |
# ? Jan 26, 2017 05:35 |
|
e: never mind, that looks way more comprehensive VVV
Kekekela fucked around with this message at 06:16 on Jan 26, 2017 |
# ? Jan 26, 2017 06:06 |
|
Grump posted:I don't understand why there is not much documentation on creating constructors in React. Are you even able to create constructors in React? Is this what they mean when they say React is only the "V" in MVC? React is a library handling only the view part of an application. The only thing it's concerned about is creating components that will be rendered, and rendering the component to a target (99% of times that's the DOM on a web page, the other 1% is something like React-native where React is handling only the view part of a non-web application). How you create and modify data is entirely up to you. The only thing React asks you to do is to call Component.setState() when a state changes. code:
code:
I'm going to redo this with ECMAScript 6 too since it'll be nicer looking: code:
code:
edit: Also since I can be more specific to what you want to do, for your form component all you need to do is have a method on your component for when you want to create the person object (I'm going to assume it's something like "user pressing the enter key"). In that method just create the new person instance as if this was regular plain vanilla JS (because it is!), and push that instance to your array that is holding people (I'm guessing you want to pass the array in to the component as a prop). If you have another component that is rendering the contents of that array then you'll need to signal to that component that the array's contents have changed. Have the form component take in something that you can dispatch events on as a prop, and dispatch it with the new instance, then have the rendering component subscribe to that event and have the component call setState with the new array. setState triggers a call to render, render takes in the new state property with the array with your new person instance, and renders like normal. piratepilates fucked around with this message at 06:31 on Jan 26, 2017 |
# ? Jan 26, 2017 06:13 |
|
Possibly that example would be better if age was this._age or something, otherwise when it ticks all usages of the component.
|
# ? Jan 26, 2017 07:02 |
|
Grump posted:I don't understand why there is not much documentation on creating constructors in React. Are you even able to create constructors in React? Is this what they mean when they say React is only the "V" in MVC? To reiterate what piratepilates said in other terms: React *shouldn't* have that stuff in there. React renders what you tell it to, that's it. Obviously a simplification, but yeah, React is the V. Your model can be whatever you want (Redux, Angular, plain old JS you write yourself, an external API / Firebase) and you use actions to let the view inform the model (or controller, or whatever) that something happened in your app. Your code is then responsible for passing new state to your view when something changes outside of it (an API request completed or failed, etc.) In my React apps, React is about 10-20% of the code. You can build a functional, unit tested Redux app that's "feature complete" before you even npm -i react.
|
# ? Jan 26, 2017 17:40 |
|
So I'm having trouble justifying the use of standard HTML5 elements like number inputs since they only partially accomplish what the designers and POs want. The min and max properties on number fields don't prevent users from manually typing in numbers outside of those limits, so the designers+POs reject that approach. I was under the impression that we should favor HTML5 elements when possible, but we keep running into stupid issues with Firefox, Safari, and Edge as a result. Am I missing something here? Also I don't think the PMs and POs understand that I can't make entire tech stack/frontend framework decisions on my own. Hell, I'm not even a frontend engineer. Pollyanna fucked around with this message at 19:15 on Jan 26, 2017 |
# ? Jan 26, 2017 19:12 |
|
Pollyanna posted:So I'm having trouble justifying the use of standard HTML5 elements like number I puts since they only partially accomplish what the designers and POs want. The min and max properties on number fields don't prevent users from manually typing in numbers outside of those limits, so the designers+POs reject that approach. I was under the impression that we should favor HTML5 elements when possible, but we keep running into stupid issues with Firefox, Safari, and Edge as a result. Am I missing something here? You should be able to hook into the default input field and either attach an onchange or onkeypress and do validation there. If you only want users to type in 1-5, just straight up deny those inputs.
|
# ? Jan 26, 2017 19:14 |
|
That handles the manual input issue, yes, which is a shame since I expected min and max to be more powerful than that. It still doesn't help the HTML5 stuff and the fact that I thoroughly dislike frontend, but at least it can do something.
|
# ? Jan 26, 2017 19:19 |
|
Skandranon posted:You should be able to hook into the default input field and either attach an onchange or onkeypress and do validation there. If you only want users to type in 1-5, just straight up deny those inputs. Or be ghetto and use the pattern attribute and then get complaints that it doesn't work on blah blah blah.... Front End. Front End never changes.....
|
# ? Jan 26, 2017 19:29 |
|
Thanks piratepilates and Lumpy. Really helpful stuff!
|
# ? Jan 26, 2017 20:14 |
|
Pollyanna posted:That handles the manual input issue, yes, which is a shame since I expected min and max to be more powerful than that. It still doesn't help the HTML5 stuff and the fact that I thoroughly dislike frontend, but at least it can do something. I realize min/max doesn't prevent a user from entering a value outside of a range, but I'm pretty sure it will set some sort of flag on form submit, which can be hooked by whatever is performing your validation.
|
# ? Jan 26, 2017 20:37 |
|
HaB posted:I realize min/max doesn't prevent a user from entering a value outside of a range, but I'm pretty sure it will set some sort of flag on form submit, which can be hooked by whatever is performing your validation. And you can use the :invalid pseudoclass to make it an angry color and add an :after or whatever. E: to clarify, :invalid is set automatically if the input has invalid content (and is set to required, IIRC) Munkeymon fucked around with this message at 20:54 on Jan 26, 2017 |
# ? Jan 26, 2017 20:51 |
|
Munkeymon posted:And you can use the :invalid pseudoclass to make it an angry color and add an :after or whatever. I think the problem is the people complaining don't want just validation saying "You can't type that plz fix", but a hard lockdown on a bad value ever even appearing in the input box. Likely, because reasons.
|
# ? Jan 26, 2017 22:11 |
|
Skandranon posted:I think the problem is the people complaining don't want just validation saying "You can't type that plz fix", but a hard lockdown on a bad value ever even appearing in the input box. Likely, because reasons. That's exactly it. I feel that barring the user too much from entering certain inputs might just piss them off more than anything, really.
|
# ? Jan 26, 2017 22:25 |
|
^^you are the correct one here, yes^^Skandranon posted:I think the problem is the people complaining don't want just validation saying "You can't type that plz fix", but a hard lockdown on a bad value ever even appearing in the input box. Likely, because reasons. Yeah, they wrote up a requirement for a UI that's actually kind of annoying and counterintuitive to use (and hard to make accessible!), but neat in their heads. Then it probably got estimated to take as much time to implement as typing out the markup, just to ice that cake.
|
# ? Jan 26, 2017 22:28 |
|
On the topic of setting up grown-up projects, I wanted to bring up looking for projects on GitHub that are simply templates combining some of the major technologies. This doesn't entirely help you lay out lots of files, but it gives you a config people use for normally building and deploying their project. I was seeing a lot of that while I was figuring out how to get Webpack working with Karma and Jasmine. It would have been great to have found all that when I was first starting out, but it would have been impossible; they rely on knowing all the magic words already.Skandranon posted:So, when unit testing Angular apps, keep in mind your Angular code has to actually be there, as well as the libraries you are using, like Angular. So you have to load Angular, the code that defines your module, etc, before you start any tests. It's been a bit but I wanted to update that I did end up getting it working at the end of last week. I had to do some stuff to get it to recognize angular.mock and then was able to specify the module. It was just a little massaging after that. I guess all these unit test/Webpack examples online really are to put each test suite into its own bundle. I don't get why I'd want to do that. So all the stuff I was installing was setting me up for that, even though all I wanted to do was use my regular old bundle.
|
# ? Jan 26, 2017 22:39 |
|
Rocko Bonaparte posted:On the topic of setting up grown-up projects, I wanted to bring up looking for projects on GitHub that are simply templates combining some of the major technologies. This doesn't entirely help you lay out lots of files, but it gives you a config people use for normally building and deploying their project. I was seeing a lot of that while I was figuring out how to get Webpack working with Karma and Jasmine. It would have been great to have found all that when I was first starting out, but it would have been impossible; they rely on knowing all the magic words already. You don't need to use Webpack for your testing at all. You can build your application bundle via Webpack, then pass the completed bundle to be tested by your unit test framework, which is entirely separate.
|
# ? Jan 26, 2017 23:21 |
|
Pollyanna posted:That's exactly it. I feel that barring the user too much from entering certain inputs might just piss them off more than anything, really. Yeah after nearly 20 years in this business - I don't think I have EVER seen that strategy work. It makes the app feel aggressive/restrictive to the user. Let them type whatever and then validate when they try to save it. They will learn quickly as long as the validation error messages are clear. "Derp Range must be between 5 and 22 derps" I realize it's not your call and my last statements aren't directed directly at you - I mean the global "you".
|
# ? Jan 27, 2017 14:40 |
|
HaB posted:Yeah after nearly 20 years in this business - I don't think I have EVER seen that strategy work. It makes the app feel aggressive/restrictive to the user. Let them type whatever and then validate when they try to save it. They will learn quickly as long as the validation error messages are clear. "Derp Range must be between 5 and 22 derps" Has anyone published papers about these things? Seems very easy to test and would be very useful insight.
|
# ? Jan 27, 2017 16:34 |
|
piratepilates posted:Has anyone published papers about these things? Seems very easy to test and would be very useful insight. Yes, but the marketing department knows that they don't apply to *their* app.
|
# ? Jan 27, 2017 17:11 |
|
I like input fields with a minimum length check that run the check after the first keystroke. So you can't even enter a valid value without first triggering the errors.
|
# ? Jan 27, 2017 18:56 |
|
smackfu posted:I like input fields with a minimum length check that run the check after the first keystroke. So you can't even enter a valid value without first triggering the errors. I like password fields that have min/max length that a) don't actually correspond to backend restrictions and b) are not consistent across the application.
|
# ? Jan 27, 2017 19:18 |
|
Lumpy posted:Yes, but the marketing department knows that they don't apply to *their* app. Or our first-pass designers are just morons, in our case.
|
# ? Jan 27, 2017 20:25 |
|
smackfu posted:I like input fields with a minimum length check that run the check after the first keystroke. So you can't even enter a valid value without first triggering the errors. This is why it is important to know the difference between onChange and onBlur
|
# ? Jan 27, 2017 20:27 |
|
Pollyanna posted:This is why it is important to know the difference between onChange and onBlur Or to know how to write non-stupid onChange handlers
|
# ? Jan 27, 2017 22:21 |
|
Yeah, if you wanna validate during typing, debounce it and set some minimums so the user is actually done typing before you validate, especially if involves a server process.
|
# ? Jan 28, 2017 00:09 |
|
With the discussions the last week about Redux/React project structure, this article I just came across seems appropriate: https://medium.freecodecamp.com/scaling-your-redux-app-with-ducks-6115955638be#.geaggdjdi
|
# ? Jan 29, 2017 13:37 |
|
I'm tempted to just roll my eyes and say "whatever" at the people who want natural language forms exactly like https://www.ladderlife.com/get-quote and https://havenlife.com/term-life-insurance-quote.html and are unquestioningly pushing for us copying them down to the letter. I'm not a UX/UI designer, but I still feel like being THAT restrictive on things like date input might just annoy users. But, I'm also getting pushback on a PM over this (I don't know who else is in charge of design, user acceptance, etc. for this subject) who is really in the tank for it, so vv It'd be less effort and headache for me to just go with it, even if users end up disliking it. Edit: hahaha one of those date inputs doesn't even work right on mobile. Lumpy posted:With the discussions the last week about Redux/React project structure, this article I just came across seems appropriate: https://medium.freecodecamp.com/scaling-your-redux-app-with-ducks-6115955638be#.geaggdjdi Nice. I prefer the feature over function approach myself, it's much better organized. Pollyanna fucked around with this message at 18:05 on Jan 30, 2017 |
# ? Jan 30, 2017 18:00 |
|
Using an actual type="date" to enter a birthday is currently a bad idea because the Android date control only lets you jog one month at a time, defaults to the current date and is really easy to set to the current date (accidentally press any of the green part at the top of the overlay in the image below!), so any adult is going to have to tap a stupid button 200+ times to get anywhere near their birthday. Munkeymon fucked around with this message at 19:02 on Jan 30, 2017 |
# ? Jan 30, 2017 19:00 |
|
Munkeymon posted:Using an actual type="date" to enter a birthday is currently a bad idea because the Android date control only lets you jog one month at a time, defaults to the current date and is really easy to set to the current date (accidentally press any of the green part at the top of the overlay in the image below!), so any adult is going to have to tap a stupid button 200+ times to get anywhere near their birthday. gently caress it then, people are used to writing their birthdays down, so as long as the text approach is done in a smart fashion, it's fine.
|
# ? Jan 30, 2017 19:17 |
|
Munkeymon posted:Using an actual type="date" to enter a birthday is currently a bad idea because the Android date control only lets you jog one month at a time, defaults to the current date and is really easy to set to the current date (accidentally press any of the green part at the top of the overlay in the image below!), so any adult is going to have to tap a stupid button 200+ times to get anywhere near their birthday. You can tap the year to change it
|
# ? Jan 30, 2017 19:25 |
|
The Merkinman posted:You can tap the year to change it JFC what a poo poo stupid design but hey that's Google and therefore Android for you.
|
# ? Jan 30, 2017 19:47 |
|
e: wrong thred
|
# ? Jan 30, 2017 19:50 |
|
Munkeymon posted:JFC what a poo poo stupid design but hey that's Google and therefore Android for you. I also like the fact that cancel and OK are the same color. Totally minor compared to completely concealing some rather important functionality, but...
|
# ? Jan 30, 2017 20:26 |
|
|
# ? Jun 8, 2024 08:11 |
|
iOs is the same, went from a really discoverable UI to that flat stuff on which you just press things to see if they may interact. Don't get me started on 3d push that works on some models and not on others. That's what you get when stuff is "finished" but you just can't leave it alone.
|
# ? Jan 30, 2017 20:41 |