Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
gbut
Mar 28, 2008

😤I put the UN🇺🇳 in 🎊FUN🎉


You'd probably want a computer property that gives you totalTrue based on what children report. Also, if you override isTrue on parent component with each child event, you won't be able to count how many are true.

So, data isTrue should be an (empty at first) array. You should probably rename it to childrenResponses or something.

Then on the event callback, don't override, but just push the value into the array

totalTrue computed property then can filter out false responses from that array, and returna the length

You can than easily count totalFalse, and totalResponses the same way, just by adjusting the filter. (Filter out true-s, or do not filter, respectively)

Having a computed property makes it easy to bind to a display component of sort, and keeps it declarative and reactive.

E: mobile typos and clarity

gbut fucked around with this message at 21:37 on May 4, 2019

Adbot
ADBOT LOVES YOU

The Merkinman
Apr 22, 2007

I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!
Oh isTrue is just a placeholder, I was going to make a unique one for each child. Didn't think about the array though.

Why is my stuff returning a function and not true false? Also does the computed go on the children or parent?

teen phone cutie
Jun 18, 2012

last year i rewrote something awful from scratch because i hate myself
Is learning client graphQL even worth it if your company's backend team has absolutely no plans on transitioning from a RESTful API? Has anyone found learning GraphQL in their spare time useful for future interviews?

I'm watching these F8 talks about the new Facebook.com, and it seems awesome, but the client can't really utilize it without a compatible backend, yeah?

prom candy
Dec 16, 2005

Only I may dance
It's buzzy and fairly easy to learn so if you're job hunting you may as well spend an evening on it so you can put it on your resume.

Vincent Valentine
Feb 28, 2006

Murdertime

I personally really like graphql and with apolloclient it's my preferred system for personal projects. Will I ever use it in a job, though? Probably not.

HaB
Jan 5, 2001

What are the odds?

The Merkinman posted:

I'm just trying to do a basic Vue app where a component calls an API, gets true or false, and emits that to the parent. The parent tallies up the multiple true false values (as there are multiple children calling different APIs) and says how many are true.
Is this a wrong way of doing things? Or something super innovative? Because I can't find anywhere to explain what I'm doing wrong as every basically tutorial either omits code in their instructions that's needed to work or just plain doesn't work anyway.

my child component has
code:
mounted () {
    axios
      .get('some/api/here)
      .then(response => {
        this.value-is-true-or-false = response.data;
        this.$emit('childsays', this.value-is-true-or-false )
      })
  }
my parent has
code:
<childComponent @childsays="checkChild"></childComponent>
...
data () {
    return {
      isTrue: Boolean
    }
  },
methods: {
    checkChild (value) {
      this.isTrue = value
    },
    totalTrue() {
	// this.isTrue returns a function() not true/false???
	}
},
  mounted(){
    this.totalTrue();
  }
</template>
....
<script>

If you're keeping a running total of true/false values, why is isTrue in your parent a boolean? Why do you have that variable at all?

Instead of totalTrue, why not something in your parent like:

code:
...
data() {
  return {
    trueCount = 0;
    falseCount = 0;
  }
}

methods: {
  // a nitpick, but this isn't a great function name.  You are listening for a child to emit an event, not "checking" it.  I'd rename to something like
  // onChildEvent, onChildUpdate, onChildResolve?  It's an event listener, and those usually start with the word 'on' to indicate that, and the event name.
  // at any rate, something more obvious to indicate what you're actually doing.
  
  checkChild($event) {
    // you wouldn't assign a value in the parent called isTrue every time ANY of the child components updates.  Having that value in the parent
    // implies that the parent itself can ONLY be either true or false at any given time.

     // also: I believe you want $event.value here but log it out to see what it's returning.
    // this is likely why your isTrue is coming back as a function, because that's what the emitter is returning.
    $event.value ? trueCount++ : falseCount ++;
  }
}
Not sure what your totalTrue function was going to be doing, but you can just display the true/false counts somewhere in the template with {{}}, plus I don't think totalTrue was going to work like you thought it would, since you are storing isTrue as a single boolean, and since your event listener was updating it every time, it's a crapshoot as to what the value is going to be at any given call.

Hope all that helps. Let me know if you have any questions and I'll do my best.

Edit: just saw responses which came in as I was typing out my reply. gbut's response is another way to go. Also: another nitpick: regardless if it was a placeholder or not, making your function names explicit from the very start is a really good habit to pick up. Reason being, if you are in the habit of naming variables a and functions isTrue, etc., you may eventually find yourself on a HUGE time crunch and never get time to go back and change those, and now you've pushed code into production that's going to be a lot more difficult to read down the road, all because of placeholder variable/function names.

Sorry if that comes off condescending, but I am the guy who has to mentor the interns at my job, and they do stuff like that all the time, so it's reflex now to try and break those habits when I see them. Always code as if it's going into production and someone who has never seen it is going to have to read it in 6 months, when even your own memory of it is fuzzy. Yeah it's just a test app or whatever, but it's still sound advice.

HaB fucked around with this message at 14:32 on May 5, 2019

teen phone cutie
Jun 18, 2012

last year i rewrote something awful from scratch because i hate myself
What's a good publicly available API for getting images based on a keyword and dimension size? Is Flickr still the recommended one?

teen phone cutie fucked around with this message at 01:56 on May 6, 2019

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Vincent Valentine posted:

I personally really like graphql and with apolloclient it's my preferred system for personal projects. Will I ever use it in a job, though? Probably not.

I'm using it right now in a project at work and it's pretty neat. The render-prop pattern the React Apollo client locks you into is kind of "meh", but it's really nice overall.

smackfu
Jun 7, 2004

Yeah, people are all into it where I work because you can just throw new crap into an api without worrying about versioning or release coordination. Very handy if the API producer and consumer are different teams.

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

Sounds like a good way to end up with a terrible mess.

prom candy
Dec 16, 2005

Only I may dance

Lumpy posted:

I'm using it right now in a project at work and it's pretty neat. The render-prop pattern the React Apollo client locks you into is kind of "meh", but it's really nice overall.

Someone's made a third party hooks version that works very well. Phone posting and lazy to find the link but it's react-apollo-hooks. I've been using it in prod for a couple months.

Sistergodiva
Jan 3, 2006

I'm like you,
I have no shame.

Is there any good way to create a scaffolding generator? The ultimate would be to be able to just run a command and input stuff like project name and generate gitignore, some pre-installed packages and configs for linting etc.

Kinda tired of how badly setup some of our projects are

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Sistergodiva posted:

Is there any good way to create a scaffolding generator? The ultimate would be to be able to just run a command and input stuff like project name and generate gitignore, some pre-installed packages and configs for linting etc.

Kinda tired of how badly setup some of our projects are

For what technology stack? Shell scripts are really easy to write, so making your own is pretty basic. Set up a project “right”, then copy your history of that to a file, and you’re most of the way there. Not sure if Windows has something similar , but I imagine it has.

Lumpy fucked around with this message at 12:58 on May 8, 2019

Sistergodiva
Jan 3, 2006

I'm like you,
I have no shame.

Lumpy posted:

For what technology stack? Shell scripts are really easy to write, so making your own is pretty basic. Set up a project “right”, then copy your history of that to a file, and you’re most of the way there. Not sure if Windows has something similar , but I imagine it has.

React for now. Something like cra or create next app but with my custom linting, gitignore, precommit hooks maybe some babel plugins.

Just kinda tired of commited ide configs, embarassing console.logs in production etc.

I guess I could just do a repo and have them clone. But some config like dir and project names would be nice.

ddiddles
Oct 21, 2008

Roses are red, violets are blue, I'm a schizophrenic and so am I
Anyone been using React.lazy and Suspense in production?

Been wondering how granular you should be with your lazy loading? For example, if I have a product details page, and all its data is from a single API request, should I lazy load all the individual components that render when that data is loaded and wrap them all in a suspense container? Or just lazy load the main visual component container that gets rendered when the logic container grabs the data and wrap that in a Suspense?

susan b buffering
Nov 14, 2016

Sistergodiva posted:

Is there any good way to create a scaffolding generator? The ultimate would be to be able to just run a command and input stuff like project name and generate gitignore, some pre-installed packages and configs for linting etc.

Kinda tired of how badly setup some of our projects are

There’s a Python project called cookie-cutter that is meant for this.

my bony fealty
Oct 1, 2008

prom candy posted:

Someone's made a third party hooks version that works very well. Phone posting and lazy to find the link but it's react-apollo-hooks. I've been using it in prod for a couple months.

I'm glad you posted this bc im about to start a small project today for work and I was planning on using react-apollo-hooks but wasnt sure how stable it is. I've used it quite a bit for personal stuff with no problem so Imma just go ahead and do it.

Guessing Apollo will have official hooks supports faaaiirrrllly soon though, maybe a few months?

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

my bony fealty posted:

I'm glad you posted this bc im about to start a small project today for work and I was planning on using react-apollo-hooks but wasnt sure how stable it is. I've used it quite a bit for personal stuff with no problem so Imma just go ahead and do it.

Guessing Apollo will have official hooks supports faaaiirrrllly soon though, maybe a few months?

Seems that way: https://github.com/apollographql/react-apollo/pull/2892

teen phone cutie
Jun 18, 2012

last year i rewrote something awful from scratch because i hate myself
Where do I find good talks about web apis and v8, the event loop, call stacks, etc?

I want to learn more about this language I write with everyday

smackfu
Jun 7, 2004

Sistergodiva posted:

Is there any good way to create a scaffolding generator?

We use yeoman at work for this and it works well enough: https://yeoman.io

Basically a template project and a little bit of JS that prompts you for some variable that can be filled into the template.

My only complaint is that we use npx to run it, to make sure we have the latest version, and npx is deathly slow since apparently it downloads all the packages from scratch every time.

Harriet Carker
Jun 2, 2009

I’m doing 30 min. phone interviews for senior React devs. Good question ideas? We want to hire someone that can take an existing project and some requirements and implement new features without much hand-holding.

Nolgthorn
Jan 30, 2001

The pendulum of the mind alternates between sense and nonsense
I'm trying to take myself back to my react days. Ask them if they know the reason for the following convention:

code:
class MyComponent extends React.Component {
	constructor() {
		this.myMethod = this.myMethod.bind(this);
	}

	myMethod() {
	}
}
And find out whether they lose their poo poo.

The Fool
Oct 16, 2003


I know the answer and wouldn't lose my poo poo, does that mean I can have the job?

Nolgthorn
Jan 30, 2001

The pendulum of the mind alternates between sense and nonsense
I'm sorry the correct answer was to spout off like a madman about how you would have designed React differently.

Harriet Carker
Jun 2, 2009

I wouldn’t ask that - it’s not necessary anymore with ES6 and arrow functions or functional components.

Munkeymon
Aug 14, 2003

Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.



Nolgthorn posted:

I'm sorry the correct answer was to spout off like a madman about how you would have designed React differently.

I would talk about how I would have designed ES6 differently :smuggo:

Nolgthorn
Jan 30, 2001

The pendulum of the mind alternates between sense and nonsense
People like you are a menace

Scaramouche
Mar 26, 2001

SPACE FACE! SPACE FACE!

I would ask if you could rename REACT to something else what it would be. FREEACT? FREAKOUT? INACT?

The Fool
Oct 16, 2003


Scaramouche posted:

I would ask if you could rename REACT to something else what it would be. FREEACT? FREAKOUT? INACT?

FAKEOUT

my bony fealty
Oct 1, 2008

"React isn't actually reactive," I say smugly as I boot up a new Svelte 3.0 project

fwiw the binding stuff is because of how classes are implemented not anything React specific ya? but really who cares hooks for life

Paranda
Jun 9, 2003

dantheman650 posted:

I’m doing 30 min. phone interviews for senior React devs. Good question ideas? We want to hire someone that can take an existing project and some requirements and implement new features without much hand-holding.

How they would design a simple hypothetical component that that takes a list of items of unknown height, but only renders enough of them to reach a given maxHeight prop. I use this one a lot and the answers range from awful to sophisticated even at some of the more senior levels.

RobertKerans
Aug 25, 2006

There is a heppy lend
Fur, fur aw-a-a-ay.
Wierd thing I can't figure out. I've got some state in a plain TS React app where the relevant Context looks basically like this:

code:
interface Block {
  id: string;
  backgroundColor?: string;
  // some other properties
}

interface WorkspaceState {
  blocks: Record<string, Block>;
  blockIds: string[];
  selectedBlocks: Record<string, null>;
}
I can add blocks; one gets created, id is generated, gets added to the blocks field, id gets added to the blockIds field. I map over the blockIds to render blocks.

I can click to select/deselect blocks, and they get added/deleted from the selectedBlocks field respectively. When they are selected I can do stuff to them like delete them or change the background colour.

What I don't get is that if I change the WorkspaceState to this, which to me is a bit clearer and gives me iterable data structures rather than plain objects:

code:
interface WorkspaceState {
  blocks: Map<string, IBlock>;
  selectedBlocks: Set<string>;
}
And then, for example, (state.selectedBlocks.has(id)) ? do blah instead of (id in state.selected blocks) ? do blah. Or to iterate over them, state.selectedBlocks.forEach instead of Object.keys(state.selectedBlocks).forEach. Or for a rendering loop over all of the blocks, [...state.blocks.keys()].map(... instead of state.blockIds.map(.... etc.

And the app goes from being nippy to super duper slow. Like, everything just stops being usable. It still works, it's just feels like it's going through treacle, and everything is an update or few behind, visually. So for example if I select a block, it doesn't show that until a few more things have been clicked - I can inspect the state and see that it has updated, but React is not reflecting that. I'm just a bit baffled. I remember getting similar issues when I did the same on a Redux-backed app last year, and just thought I'd made some stupid mistake and forgot about it, and then I'm seeing the same behaviour as soon as I switch from using objects (+ arrays of IDs where necessary) to Maps/Sets.

qntm
Jun 17, 2009

Scaramouche posted:

I would ask if you could rename REACT to something else what it would be. FREEACT? FREAKOUT? INACT?

I'd like to introduce my new front-end framework, Overreact

"That name is a little--"

IT'S A LITTLE SHUT THE HELL UP, NOBODY ASKED YOU

Ruggan
Feb 20, 2007
WHAT THAT SMELL LIKE?!


Paranda posted:

How they would design a simple hypothetical component that that takes a list of items of unknown height, but only renders enough of them to reach a given maxHeight prop. I use this one a lot and the answers range from awful to sophisticated even at some of the more senior levels.

Can you give us some of the answers you’ve heard on both ends of the spectrum?

Vincent Valentine
Feb 28, 2006

Murdertime

dantheman650 posted:

I’m doing 30 min. phone interviews for senior React devs. Good question ideas? We want to hire someone that can take an existing project and some requirements and implement new features without much hand-holding.

That's honestly not much to go on. "Have you worked in react before? Explain your history with it. Have you worked in an established codebase? Explain how old/large." Covers the big two.

After that, give them a list of items and ask them to implement a search component and a filter component. They should search/filter on keypress with debounce. That checks all the boxes you asked.

To be honest, I'm not sure "can implement requirements" necessarily constitutes Senior. Will they be alone on the front end? You said without much hand holding so I imagine if there is anyone their time is valuable, but how many are we talking?

The Fool
Oct 16, 2003


Ruggan posted:

Can you give us some of the answers you’ve heard on both ends of the spectrum?

I'm curious too, I can think of a couple different ways but suspect my methods are terrible to middling.

prom candy
Dec 16, 2005

Only I may dance

dantheman650 posted:

I’m doing 30 min. phone interviews for senior React devs. Good question ideas? We want to hire someone that can take an existing project and some requirements and implement new features without much hand-holding.

Ask what they think about Hooks and what custom hooks they've built. Anyone who's rear end deep in React land has probably been thinking about that a lot lately. Ask about how to use the context API. Ask about how they would approach needing to share state between components that are far away from each other in the tree. Ask about how they would diagnose and solve a performance problem in an app. IMO a senior person should have a pretty broad understanding of all this stuff and be excited to talk about it. I also like to ask people who they follow on Twitter or what dev blogs they read or whatever. The best programmers that I helped hire were always just really passionate in general.

That question above about the maxHeight component is great too.

Nolgthorn
Jan 30, 2001

The pendulum of the mind alternates between sense and nonsense
The last react app I had the pleasure of working on was slow and bogged down by all the rendering that was going on, they were even updating redux with the scroll position. So I think I'd try to figure out how much they understand about the amount of work React is actually doing under the hood.

Ruggan
Feb 20, 2007
WHAT THAT SMELL LIKE?!


Paranda posted:

How they would design a simple hypothetical component that that takes a list of items of unknown height, but only renders enough of them to reach a given maxHeight prop. I use this one a lot and the answers range from awful to sophisticated even at some of the more senior levels.

Here's a first pass on how I would do this.

https://codesandbox.io/s/ovrv2ork26

Adbot
ADBOT LOVES YOU

Paranda
Jun 9, 2003

Ruggan posted:

Here's a first pass on how I would do this.

https://codesandbox.io/s/ovrv2ork26

For a phone interview I wouldn't expect them to live code, but yeah I'm looking to hear them describe something like what you implemented, using refs, and then grabbing the height on the element. Surprisingly, a decent # of candidates can't even think of how to do it at all. Sometimes there are some bluffing answers like claiming they can predict the height based on attributes on the elements in the list but falls apart quickly. The interviews that go really well for me personally are when the person firstly does describe a working basic component like what you've got, and then delves more into if/how they would vary their design. Like "yeah writing it like X is good and simple to understand but layout thrashing is a drawback. If we care about that because (reasons), then I could do Y" and so on

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply