|
Several things like believing that the store changes before the reducers were executed, mapStateToProps being how the store was updated, etc. Relatively minor things that all kinda added up. Also the expectation that React lifecycle methods were absolutely required if using Redux and confusion over how to propagate changes in a store down to a subscribed component, and an overall misunderstanding of the unidirectional flow. It seemed that the contractor/expert agreed with my assessment and understanding of the situation much more than he did with the tech lead. It was just kind of frustrating to see that I had more knowledge and familiarity with than he did, even though my coworker and I were struggling to apply what we learned from tutorials and the documentation to the code we're working with, thanks to our weirdass approach. It just felt like we've had lots of unnecessary frustration and blockage across the team that could have been avoided by our tech lead actually researching and thinking things out at the beginning. It's been pretty tough and I'm just annoyed and resentful, I guess.
|
# ? Feb 28, 2017 23:32 |
|
|
# ? Jun 8, 2024 05:58 |
|
Pollyanna posted:Several things like believing that the store changes before the reducers were executed, mapStateToProps being how the store was updated, etc. Relatively minor things that all kinda added up. Also the expectation that React lifecycle methods were absolutely required if using Redux and confusion over how to propagate changes in a store down to a subscribed component, and an overall misunderstanding of the unidirectional flow. It seemed that the contractor/expert agreed with my assessment and understanding of the situation much more than he did with the tech lead. It was just kind of frustrating to see that I had more knowledge and familiarity with than he did, even though my coworker and I were struggling to apply what we learned from tutorials and the documentation to the code we're working with, thanks to our weirdass approach. Sounds more like he doesn't LIKE React (I can relate!) and is simply refusing to learn/embrace it.
|
# ? Mar 1, 2017 00:01 |
|
Forgall posted:Could you expound on this a little? I'm learning react and redux and I'm worried I might be misunderstanding things as well. Spend a night and really understand event sourcing. Fowler's always a good resource: https://martinfowler.com/eaaDev/EventSourcing.html Also try doing some functional programming tests on Hacker Rank. Functional patterns make a lot of sense in React/Redux. Redux and Elm are designed to embrace event sourcing and functional programming at their core, so stop fighting against it and shoehorning in other things. Those two things alone will put you ahead of most other front-end developers.
|
# ? Mar 1, 2017 00:09 |
|
Pollyanna posted:believing that the store changes before the reducers were executed Your tech lead ain't fulfilling their job title if they're confused about such a basic redux concept. Your frustration is understandable.
|
# ? Mar 1, 2017 00:31 |
|
Pollyanna posted:Several things like believing that the store changes before the reducers were executed, quote:mapStateToProps being how the store was updated, etc. quote:Relatively minor things that all kinda added up. quote:Also the expectation that React lifecycle methods were absolutely required if using Redux and confusion over how to propagate changes in a store down to a subscribed component, This just seems like he put almost zero effort into researching or using it on toy projects before unleashing his bad ideas on an actual project. He could've invested a few days and actually had a clue what the gently caress he was doing. I'm irrationally angry about this.
|
# ? Mar 1, 2017 04:22 |
|
Kekekela posted:How could you keep thinking this after trying it? What kind of crap was he doing to make this quasi-work? Look at this guy who never wrote his own code:
|
# ? Mar 1, 2017 13:56 |
|
Yeah, my coworker and I have very little faith in our tech lead, given that he has such poor familiarity with the framework/library, and given our poor source code. This is the same guy who goes dark for days on end redoing our deployment pipeline over and over, the most recent refactoring of which somehow made us unable to get any of our code changes to show up in local development. He didn't even test the code to make sure it still worked with his changes before merging his PR in himself. Insanity aside, how do you handle a debounced function for delayed live input in Redux? We have a couple inputs that are uncontrolled due to the need to debounce them so we aren't calling the API on each change, but that requires some statefulness and unpredictability. Is there a more event-sourcey way to wait for X ms before firing an API call? What's the recommended approach? Pollyanna fucked around with this message at 14:53 on Mar 1, 2017 |
# ? Mar 1, 2017 14:48 |
|
I just use debounce but I may be missing something in your use case.
|
# ? Mar 1, 2017 14:56 |
|
Kekekela posted:I just use debounce but I may be missing something in your use case. Yeah, do this. Slap that on your key / update handlers.
|
# ? Mar 1, 2017 15:06 |
|
We are using debounce, actually...I suppose it might be easier to explain with an example (don’t worry about the details, sorry about the formatting). In one of our components, we have an element (from React-Bootstrap) as such:code:
This element is part of a class-based React component that has a few helper functions: code:
code:
The latter of which is debounced in the constructor: code:
This approach requires some statefulness in the component, and as such complicates it a bit more. We've had issues with our components' statefulness being a source of confusion for a few developers, so I'm wondering if there's a way to accomplish this that doesn't require class methods on a larger component and keeping state in it. Is there a way to do this by relying on the Redux store or something?
|
# ? Mar 1, 2017 15:29 |
|
Pollyanna posted:This approach requires some statefulness in the component, and as such complicates it a bit more. We've had issues with our components' statefulness being a source of confusion for a few developers, so I'm wondering if there's a way to accomplish this that doesn't require class methods on a larger component and keeping state in it. Is there a way to do this by relying on the Redux store or something? Uncnotrolled inputs shouldn't touch / interact with the store. That is why they are "uncontrolled". One solution might be to have the input update internal state always *and* call a debounced function that does something. I made an example here: https://jsfiddle.net/cvmkfk39/1/ (EDITED with bonus comments!) You could obviously make it so the debounced function is passed in as a prop to make it reusable and what not. Or you could always just use this: https://www.npmjs.com/package/react-debounce-input Lumpy fucked around with this message at 16:28 on Mar 1, 2017 |
# ? Mar 1, 2017 16:21 |
|
Had time to work on my React CRUD again today, but I think I may have hit the point where I have to use Redux. I'm hoping there's a way to just create delete and update functions with just React, as I really don't want to implement Redux this late into development I have a parent component that has a state that looks something like this after entering information: JavaScript code:
JavaScript code:
My parent is where the state is being stored: JavaScript code:
JavaScript code:
|
# ? Mar 1, 2017 17:19 |
|
Grump posted:Had time to work on my React CRUD again today, but I think I may have hit the point where I have to use Redux. I'm hoping there's a way to just create delete and update functions with just React, as I really don't want to implement Redux this late into development Pass in a delete handler to the list component, and call it w/ the ID? Simplified example: JavaScript code:
|
# ? Mar 1, 2017 17:56 |
|
yeah. I tried that exactly thing earlier actually. After putting this is my delete function, I was getting the error "Cannot read property 'people" of undefined": JavaScript code:
|
# ? Mar 1, 2017 20:20 |
|
Grump posted:yeah. I tried that exactly thing earlier actually. The method passed into the child component needs to be bound to your parent instance so it knows which object's "this" to mutate. Their are many ways of doing this as shown here: http://egorsmirnov.me/2015/08/16/react-and-es6-part3.html
|
# ? Mar 1, 2017 20:30 |
|
Worked like a charm! Thanks! Now for the update feature....
|
# ? Mar 1, 2017 20:47 |
|
Grump posted:Worked like a charm! Thanks! Countdown to you discovering storing data as a combination of a list of IDs _and_ a map of objects keyed by ID can be a lot easier / better than storing a list of objects....
|
# ? Mar 1, 2017 20:51 |
|
I just learned that my local library has a subscription to Lynda.com, and I've started into the React Essential Training course by Eve Porcello. The course seems alright, but I've hit my first snag. The course (and others of hers, as far as I can see) uses webpack as a bundler. I'm OK with that, but the configuration webpack.config.js file from one of the exercises isn't working with the current version of webpack. code:
code:
e: And if anyone knows any great courses / authors on Lynda, feel free to pass that on.
|
# ? Mar 6, 2017 06:17 |
|
I have a textarea in an angular template whose width I can adjust, but not its height:code:
|
# ? Mar 6, 2017 06:22 |
|
Newf posted:I just learned that my local library has a subscription to Lynda.com, and I've started into the React Essential Training course by Eve Porcello. The course seems alright, but I've hit my first snag. I think it's worth learning how to use webpack 2. I think they redid the way to set loaders, every react tutorial that I've been going through that uses webpack 2 has the config set up this way. Install the following npm packages: code:
code:
code:
|
# ? Mar 6, 2017 06:30 |
|
Newf posted:I just learned that my local library has a subscription to Lynda.com, and I've started into the React Essential Training course by Eve Porcello. The course seems alright, but I've hit my first snag. https://webpack.js.org/guides/migrating/ Rename 'loaders' to 'rules', 'query' to 'options'.
|
# ? Mar 6, 2017 15:11 |
|
Rocko Bonaparte posted:I have a textarea in an angular template whose width I can adjust, but not its height: Angular has no special bindings regarding the size of textarea. Have you tried using CSS to set the size?
|
# ? Mar 6, 2017 18:39 |
|
Another React-Redux question. I want to use React-Bootstrap's Modal component, which seems to require a binding to a visibility state and a callback to set that state to false. My initial attempt was to add a couple action creators and a reducer to set a portion of the store for visibility, but I'm not sure how to pass in the section of the store. For mapStateToProps, how do I combine two different parts of the store e.g. state.topStore.mainComponent and state.topStore.visibilityStore? Can thecode:
part be combined somehow?
|
# ? Mar 6, 2017 22:01 |
|
Sure thing.code:
e: Bonus points for using ES6 destructuring instead of repeating the state.topStore dereference. ynohtna fucked around with this message at 22:31 on Mar 6, 2017 |
# ? Mar 6, 2017 22:25 |
|
Pollyanna posted:Another React-Redux question. I want to use React-Bootstrap's Modal component, which seems to require a binding to a visibility state and a callback to set that state to false. My initial attempt was to add a couple action creators and a reducer to set a portion of the store for visibility, but I'm not sure how to pass in the section of the store. For mapStateToProps, how do I combine two different parts of the store e.g. state.topStore.mainComponent and state.topStore.visibilityStore? Can the Your question is very confusing. Is your modal used throughout the app? Then maybe it makes sense to have it's visibility in the app store. If not, then why doesn't the parent component just track that locally and pass a function and bool to it? Why would you need to combine the two parts of the store into one "thing"? What is wrong with: code:
|
# ? Mar 6, 2017 22:27 |
|
Yeah I don't know what the gently caress I'm talking about either. I made it easy on myself and just directly did setState stuff to handle it. /dusts hands Also don't get me started on our stupid store approach. It's hellish Pollyanna fucked around with this message at 22:50 on Mar 6, 2017 |
# ? Mar 6, 2017 22:43 |
|
Pollyanna posted:Yeah I don't know what the gently caress I'm talking about either. You are identifying code smells, asking questions, staying open to learning, and taking expedient action whilst trying to operate in an suboptimal work environment. You're doing fine, my friend. Keep at it.
|
# ? Mar 7, 2017 00:08 |
|
I haven't paid attention to the frontend world of web development for a couple years now. I'm thinking about picking up a frontend framework to add to my toolkit, but I'm using a more traditional SQL Server DB and it deals with sensitive information, so I can't have something that binds or queries directly from the database. Anything that fits this that isn't jQuery (since I'm familiar with jQuery and will hopefully be using it alongside this)? ASP.NET of some flavor will be used if it matters. Is there anything new in the CSS world that's worth knowing about?
|
# ? Mar 7, 2017 00:53 |
|
Modest Mouse cover band posted:I haven't paid attention to the frontend world of web development for a couple years now. I'm thinking about picking up a frontend framework to add to my toolkit, but I'm using a more traditional SQL Server DB and it deals with sensitive information, so I can't have something that binds or queries directly from the database. Anything that fits this that isn't jQuery (since I'm familiar with jQuery and will hopefully be using it alongside this)? If you're not rendering anything state heavy on the client (think webapp) then frameworks like Angular and libraries React/Vue, etc. are overkill and shoehorning them isn't smart. Razor is an excellent templating language, so don't be afraid to use it. You wouldn't want client JS to interact with a database anyways - use MVC for your API layer. Also, I'd personally be really frustrated with any project that was using jQuery in 2017 without a very good reason. Legacy code, legacy browser support, and some horrible peer dependency like what SignalR has are the only acceptable reasons in my book. Check out http://youmightnotneedjquery.com/ As far as CSS goes, just use SASS (https://sass-guidelin.es/). You might want to look at something like Pure.css as a newer, lighter alternative to Bootstrap if you don't have UX making demands of you. If anyone is ever looking for "what should I look into this year", Thoughtworks is a great place to start: https://www.thoughtworks.com/radar or you could check out http://stateofjs.com/ for a more front-end specific place. luchadornado fucked around with this message at 01:55 on Mar 7, 2017 |
# ? Mar 7, 2017 01:52 |
|
Modest Mouse cover band posted:I haven't paid attention to the frontend world of web development for a couple years now. I'm thinking about picking up a frontend framework to add to my toolkit, but I'm using a more traditional SQL Server DB and it deals with sensitive information, so I can't have something that binds or queries directly from the database. Anything that fits this that isn't jQuery (since I'm familiar with jQuery and will hopefully be using it alongside this)? React/Redux is my suggestion. No binding, its "just" JS, you can apply what you learn elsewhere, you can ditch React or Redux and keep the other to experiment more, and using those two learned me some functional programming stuff to boot! If you want a "compiles to JS" try Elm. For CSS, flexbox is oldish but supported enough to use and it's awesome.
|
# ? Mar 7, 2017 04:55 |
|
ASP.net core MVC is actually nice if you decide not to go down the JavaScript path after all.
|
# ? Mar 7, 2017 08:52 |
|
Lumpy posted:For CSS, flexbox is oldish but supported enough to use and it's awesome. Yeah, this is possibly the single best thing in CSS from the last 10 years: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
|
# ? Mar 7, 2017 15:52 |
|
These two articles also helped me understand flexbox much better: Animated Guide to Flexbox and Even More About How Flexbox Works because I'm dumb and need moving pictures to keep my attention.
|
# ? Mar 7, 2017 16:12 |
|
I always forget how to use flexbox, and constantly need to refer to this cheatsheet: http://www.sketchingwithcss.com/samplechapter/cheatsheet.html
|
# ? Mar 7, 2017 19:10 |
|
Grump posted:I always forget how to use flexbox, and constantly need to refer to this cheatsheet: Awesome cheatsheet, bookmarked!
|
# ? Mar 7, 2017 21:14 |
|
Flexxx box! http://flexboxfroggy.com http://the-echoplex.net/flexyboxes/
|
# ? Mar 7, 2017 21:22 |
|
I've used flex a little before but I had no idea...
|
# ? Mar 7, 2017 22:14 |
|
Is it worth it already? A couple years back had to always create special rules just in case some IE9 user ran in the site and even some versions of firefox, so I just didn't bother with it.
|
# ? Mar 9, 2017 15:56 |
|
Nowadays it should be mostly fine according to the relative usage chart on caniuse. http://caniuse.com/#search=flex Edge is fine, but IE11 of course remains buggy in it's usage of Flexbox, so if you have a majority of customers using older PCs, it may be best to avoid it or test the hell out of it before release.
|
# ? Mar 9, 2017 16:05 |
|
|
# ? Jun 8, 2024 05:58 |
|
Flexbox is great, but if you happen to work for a company that insists on older IE support (like I do, ugh), you should stay away from it.
|
# ? Mar 9, 2017 21:57 |