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
Thermopyle
Jul 1, 2003

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

It's been awhile since I selected a routing solution for a react/redux app.

I'm a little disappointed to see that since I last picked react-router for a project a year or so ago that it doesn't seem to have progressed in the keeping-state-in-redux area.

I'm leaning towards react-first-router as a project I'm maintaining now already uses that, but I'm just wondering if anyone has any good patterns for using redux with react-router or thoughts about why we shouldn't be integrating urls and routing more into our redux state.

Adbot
ADBOT LOVES YOU

Ape Fist
Feb 23, 2007

Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.
I've been made an offer by another company, 10k on top of what I'm already on to head back to developing relatively complex angular applications. It's in line with what I want to do but I honestly get traumatised moving to new jobs because I get attached to my co-workers. The office at the new place is also kind of lovely, compared to my current one which is lovely tbh.

Ape Fist fucked around with this message at 10:07 on Sep 7, 2019

prom candy
Dec 16, 2005

Only I may dance
10k wouldn't be enough for me to leave a job I liked

RC Cola
Aug 1, 2011

Dovie'andi se tovya sagain

prom candy posted:

10k wouldn't be enough for me to leave a job I liked

Ask for more/work from home

Ape Fist
Feb 23, 2007

Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.

prom candy posted:

10k wouldn't be enough for me to leave a job I liked

I have a young family and it's ten thousand pounds in a city where ten thousand pounds is loving huge. So I don't get to make these kinds of decisions thinking solely about myself.

Social Animal
Nov 1, 2005

Ape Fist posted:

I have a young family and it's ten thousand pounds in a city where ten thousand pounds is loving huge. So I don't get to make these kinds of decisions thinking solely about myself.

If you think long term you’ll be happy with the new job then take it. The best job is one where you’re happy otherwise burnout happens. And that’s not good for you or a family.

teen phone cutie
Jun 18, 2012

last year i rewrote something awful from scratch because i hate myself
Can I just say how absolutely loving dumb it is that React router doesn't do diff checking on query params, so you have to implement you're own

JavaScript code:
shouldComponentUpdate(prevProps) {
  if(this.props.location.search !== prevProps.location.search) { return true }

  return false
}
At this point our app is too far gone to use another router, but still so annoying. I just wanted to vent.

Doom Mathematic
Sep 2, 2008

Grump posted:

Can I just say how absolutely loving dumb it is that React router doesn't do diff checking on query params, so you have to implement you're own

JavaScript code:
shouldComponentUpdate(prevProps) {
  if(this.props.location.search !== prevProps.location.search) { return true }

  return false
}
At this point our app is too far gone to use another router, but still so annoying. I just wanted to vent.

According to the documentation, a location object is never mutated. Whenever the location (including the query parameters) changes, an entirely new location prop should be passed in to your component, causing a re-render. So, it shouldn't be necessary to do this check manually.

Is it possible that some part of your code is modifying the location object directly to effect navigation, when it should be doing history.push?

Doh004
Apr 22, 2007

Mmmmm Donuts...

Ape Fist posted:

I have a young family and it's ten thousand pounds in a city where ten thousand pounds is loving huge. So I don't get to make these kinds of decisions thinking solely about myself.

The usual justification to get you to move without good cause (toxic environment, dying company etc) is a 25% raise. If the 10k hits that mark, go for it.

Social Animal
Nov 1, 2005

What site do you guys recommend to look for jobs these days?

Vincent Valentine
Feb 28, 2006

Murdertime

Glassdoor, indeed, and whoishiring.io

I'm particularly partial to whoishiring, but that's largely because I'm in Los Angeles. Anyone who lives in LA can tell you saying "located in Los Angeles" is utterly useless information. I live in the city, and depending on where I'm going I can drive for two hours and still be in the city. Having a pin on the map showing exact location makes all the difference.

Social Animal
Nov 1, 2005

Vincent Valentine posted:

Glassdoor, indeed, and whoishiring.io

I'm particularly partial to whoishiring, but that's largely because I'm in Los Angeles. Anyone who lives in LA can tell you saying "located in Los Angeles" is utterly useless information. I live in the city, and depending on where I'm going I can drive for two hours and still be in the city. Having a pin on the map showing exact location makes all the difference.

Thank you sir it's time I became employed again.

Thermopyle
Jul 1, 2003

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

I don't really know if its any good, but google has jobs search built in and it looks like they link in to a bunch of different job services.

Google "react jobs" or whatever.

smackfu
Jun 7, 2004

Grump posted:

Can I just say how absolutely loving dumb it is that React router doesn't do diff checking on query params, so you have to implement you're own

IIRC I think this was a change in v4... so we are still on v3 at work.

Ape Fist
Feb 23, 2007

Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.

Doh004 posted:

The usual justification to get you to move without good cause (toxic environment, dying company etc) is a 25% raise. If the 10k hits that mark, go for it.

I should probably mention that like 13 people have left in 8 weeks as well.

Business
Feb 6, 2007

I'm totally brand new to React or any modern front-end framework thing. I have a Django app that I want to develop a frontend for, partially to improve the functionality and partially because I want to apply for developer jobs eventually and it sounds like a lot of entry level things start you on the frontend (I have a non-CS degree)

Should I build it as:
React on a single HTML template to make the whole thing work like a contained 'app' OR a mix of different pages with different react apps in the django templates?

The first one seems daunting after just coming off of learning the basics of Django, but if it's worth learning I'm game. The second option feels more intuitive/comfortable but might limit me in the future if I need to use it as an actual non-web application (there are some computationally intensive bits that I might not be able to support long-term on my VPS). Does my thinking make sense here? What would yall recommend?

minato
Jun 7, 2004

cutty cain't hang, say 7-up.
Taco Defender
Having gone through the same thing recently, I'd recommend the 2nd path. What I did was use create-react-app as a way to get started and understand how webpack and React work, then I integrated webpack with Django using webpack_loader, and then used a created a hello-world page to get my first page off the ground.

The more I worked with React / Django, the more it became apparent that I could either:
- make a SPA and have Django handle the AJAX endpoints, which doesn't really leverage Django that much
- leverage Django's ability to define, process, and display forms, and use React to augment that.

The latter has worked out way better for me.

The Fool
Oct 16, 2003


I'm a fan of using DRF to make an API, and having your front-end be a totally separate project.

Thermopyle
Jul 1, 2003

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

Business posted:

Should I build it as:
React on a single HTML template to make the whole thing work like a contained 'app' OR a mix of different pages with different react apps in the django templates?

The first one seems daunting after just coming off of learning the basics of Django, but if it's worth learning I'm game. The second option feels more intuitive/comfortable but might limit me in the future if I need to use it as an actual non-web application (there are some computationally intensive bits that I might not be able to support long-term on my VPS). Does my thinking make sense here? What would yall recommend?

FWIW, your first option is commonly called a SPA (Single Page Application). For better or worse, it's where all the modern development energy is focused nowadays. Your second option works fine, I just usually find that it doesn't usually make sense. For the work I usually do, there's just too much frontend code creating UI.

Generally speaking, if I'm going to have a lot of frontend code, I prefer the first option because I don't have to keep switching concerns...aka switching from developing parts of my sites UI in Django templates and parts of my site's UI in React.

If I'm doing a SPA, then...


The Fool posted:

I'm a fan of using DRF to make an API, and having your front-end be a totally separate project.

...this is the correct way to do it.

The majority of my projects nowadays are actually two projects. An API (Django or whatever) that does nothing but serve JSON (well usually my Django projects use the django admin because why wouldn't they?). This has it's own git repo, folder, existence. And then a whole other project for my frontend code.

Neither knows anything about the other. The backend project just knows how to serve JSON, and the frontend project just knows its getting and sending JSON to something.

This really helps you maintain a clean and useful API. It keeps your concerns separated.

Business
Feb 6, 2007

Thanks for the responses! Have been doing more research and looking into React with create-react-app. I really like the idea of having a separate repo that attaches to an API but I think I'm going to have to go with the minimal react route for now, with the knowledge that I might want to refactor into a DRF API later. I'm using this for a research project at...one of my jobs....so I think I need as many quick wins as possible for now, and more advanced UI stuff would be great as a showcase but ultimately I'm not gonna have users anyway.
I have a million more questions but need to do more research.

RobertKerans
Aug 25, 2006

There is a heppy lend
Fur, fur aw-a-a-ay.

Thermopyle posted:

It's been awhile since I selected a routing solution for a react/redux app.

I'm a little disappointed to see that since I last picked react-router for a project a year or so ago that it doesn't seem to have progressed in the keeping-state-in-redux area.

I'm leaning towards react-first-router as a project I'm maintaining now already uses that, but I'm just wondering if anyone has any good patterns for using redux with react-router or thoughts about why we shouldn't be integrating urls and routing more into our redux state.


I am pretty firmly in the camp of separating routing concerns and Redux concerns. For one thing, I don't think there's a solid solution -- I've tried almost everything, and it always ends up being gerryrigged in some way, or something breaks because the deps (generally router, redux and the bridge library between the two) go out of sync api-wise and cause something to go pop. Once I gave up trying and split the two concerns, like most of the docs suggest, everything has been simpler and I'm honestly not sure now why I've always tried so hard to integrate the two things -- they don't _really_ seem to overlap very much.

caveat: I don't like using Redux for anything except data, as I now primarily use it as just a serializable data store I can use to save/rehydrate an app. I don't like any UI stuff like loading/errors/fetching logic etc to be anywhere near Redux so I'm a bit biased, I personally think routing falls under the same banner.

Social Animal
Nov 1, 2005

I remember there was a time in one of the offices I was at where people stopped using component state and went all redux. Like even for isolated things like a radio button being filled that doesn't affect the app anywhere else.

gbut
Mar 28, 2008

😤I put the UN🇺🇳 in 🎊FUN🎉


Well, if you're gonna make components purely functional, you have to extract the state *somewhere*.






Kidding aside, yeah, that's not good in many cases.

Queen Victorian
Feb 21, 2018

Anyone have an opinion on ImmutableJS? I haven’t had any experience with it before encountering it in the React codebase at my new job, and now that I’ve dealt with it, I don’t think I like it very much at all. Generally, it’s badly implemented in this case, makes things more difficult, and is hindering performance more than helping (toJS() calls everywhere, including inside mapStateToProps). From what I understand, immutability is important for functional programming, but our components are mostly class-based (with some randomly being functional components). No one is sure why it’s even in use (the developer who added it and is otherwise responsible for most of what’s wrong with the codebase is no longer with the company).

RobertKerans posted:

caveat: I don't like using Redux for anything except data, as I now primarily use it as just a serializable data store I can use to save/rehydrate an app. I don't like any UI stuff like loading/errors/fetching logic etc to be anywhere near Redux so I'm a bit biased, I personally think routing falls under the same banner.

The other day I was helping one of the junior devs with getting a loading icon to display in a component while it fetched a table of data. There was all sorts of weird poo poo going on that was making what should have been a trivially easy task absurdly difficult, including the isLoading state coming from the Redux store and then not updating correctly because there weren’t any actions that could tell the component when the data had been received (because the rendering of the data was handled per row, so I guess that’s why the loading state couldn’t be handled locally..?). I haven’t even looked at the forms yet.

I definitely agree that Redux should be handling data and that components handle their own transient states (loading status, form input, etc) locally.

MrMoo
Sep 14, 2000

It’s a nice idea but you’re probably better off going with Elm over ImmutableJS. JS isn’t really the right platform for efficient FP.

Thermopyle
Jul 1, 2003

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

RobertKerans posted:

I am pretty firmly in the camp of separating routing concerns and Redux concerns. For one thing, I don't think there's a solid solution -- I've tried almost everything, and it always ends up being gerryrigged in some way, or something breaks because the deps (generally router, redux and the bridge library between the two) go out of sync api-wise and cause something to go pop. Once I gave up trying and split the two concerns, like most of the docs suggest, everything has been simpler and I'm honestly not sure now why I've always tried so hard to integrate the two things -- they don't _really_ seem to overlap very much.

caveat: I don't like using Redux for anything except data, as I now primarily use it as just a serializable data store I can use to save/rehydrate an app. I don't like any UI stuff like loading/errors/fetching logic etc to be anywhere near Redux so I'm a bit biased, I personally think routing falls under the same banner.

Like I said, I don't really have an opinion about routing in redux state, but I did end up going with react-router for other reasons.

My main rule of thumb that led me towards using react-router instead of redux-first-router:

When adding a dependency, choose the dependency with the healthiest community. Look at github and see how many open issues there are, how often the contributors are interacting on issues, are PRs being ushered through towards being merged, etc.

I didn't use connected-react-router to link redux and react-router because it adds a dependency that constrains my ability to upgrade react-router when needed.

A big downside of react-router is that they keep changing their API, which doesn't bode well for ease of updates in the future.

RobertKerans
Aug 25, 2006

There is a heppy lend
Fur, fur aw-a-a-ay.
Yep, RR mainly because of that huge community. The various available routing options aren't exactly great anyway, there needs to be a good reason to use anything else. Re the API changes -- Reach Router seemed good, an attempt to fix some of RRs failings, but it's being merged into the next version of React Router, so I guess the shifting API is kinda due to that?

RobertKerans fucked around with this message at 20:09 on Sep 14, 2019

RobertKerans
Aug 25, 2006

There is a heppy lend
Fur, fur aw-a-a-ay.

Queen Victorian posted:

Anyone have an opinion on ImmutableJS? I haven’t had any experience with it before encountering it in the React codebase at my new job, and now that I’ve dealt with it, I don’t think I like it very much at all. Generally, it’s badly implemented in this case, makes things more difficult, and is hindering performance more than helping (toJS() calls everywhere, including inside mapStateToProps). From what I understand, immutability is important for functional programming, but our components are mostly class-based (with some randomly being functional components). No one is sure why it’s even in use (the developer who added it and is otherwise responsible for most of what’s wrong with the codebase is no longer with the company).

Using an immutability library makes it much easier to enforce it in Redux and avoid accidentally breaking things. Immutable is/was the most widely used. And because of Redux' ubiquity you're gonna get a load of devs who install it by default on a React project (whether that be cargo culting or not). Re usage, the serialisation/deserialisation steps are a particular pita. Probably avoid if you can as it'll complicate things

If you do actually need immutability, I'd strongly advise using Immer over anything else -- it uses no new data structures, it's API is tiny (you're only likely to use the single core function it exports as default) and it's stupid simple. Uses proxies so definite perf hit

putin is a cunt
Apr 5, 2007

BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION
I've been starting to look into Vue and I'm having a little bit of trouble understanding how I should push state up the component tree when the router is involved. I have a child component that is a sign in form, and for the moment I'm not having it do anything other than just emit a "signedIn" event. I want this event to "bubble up" to the overall App component so it can set a data property to true to indicate that the user is signed in. This will trigger a change in the app navigation bar for example and I imagine a few other things as I continue to work on it.

So I have a sign in form that I'm using like this in a component called SignIn, which is the component that is loaded by the router:
code:
<template>
    <v-container>
        <v-row>
            <v-col center>
                <sign-in-form v-on:signedIn="onSignedIn"></sign-in-form>
            </v-col>
        </v-row>
    </v-container>
</template>

<script>
import SignInForm from '@/components/sign-in/SignInForm';
export default {
    name: 'SignIn',
    components: { SignInForm },
    methods: {
        onSignedIn() {
            this.$emit('signedIn');
        }
    }
};
</script>
Then my App component looks like this:
code:
<template>
    <v-app>
        <app-navigation :isSignedIn="isSignedIn"></app-navigation>

        <v-content transition="slide-x-transition">
            <router-view v-on:signedIn="() => isSignedIn = true" />
            <app-footer></app-footer>
        </v-content>
    </v-app>
</template>
So first of all, using an event listener on the router view is a real code smell to me, so I'm sure that's not the correct way to do it. My question what IS the commonly accepted method for doing this?

putin is a cunt fucked around with this message at 05:50 on Sep 17, 2019

Queen Victorian
Feb 21, 2018

MrMoo posted:

It’s a nice idea but you’re probably better off going with Elm over ImmutableJS. JS isn’t really the right platform for efficient FP.

We’re not even trying to do FP (because we all have class-based programming backgrounds and are fine with classes/non-FP paradigms even if they’re less cool or whatever), so ImmutableJS is just in the code base making things slow and annoying to work with, probably for cargo cult reasons.

Definitely going to use the hooks for D3 and whatnot though.

RobertKerans posted:

Using an immutability library makes it much easier to enforce it in Redux and avoid accidentally breaking things. Immutable is/was the most widely used. And because of Redux' ubiquity you're gonna get a load of devs who install it by default on a React project (whether that be cargo culting or not). Re usage, the serialisation/deserialisation steps are a particular pita. Probably avoid if you can as it'll complicate things

If you do actually need immutability, I'd strongly advise using Immer over anything else -- it uses no new data structures, it's API is tiny (you're only likely to use the single core function it exports as default) and it's stupid simple. Uses proxies so definite perf hit

I’m not quite sure we truly need the immutability enforcement, but if it turns out we do, I’ll look into Immer. We’ve put a moratorium on implementing ImmutableJS and will probably remove it in the nearish future (and adopt some better state management practices).

pathetic little tramp
Dec 12, 2005

by Hillary Clinton's assassins
Fallen Rib
Doing a little Vue work and does anyone have any horror stories about using nuxt framework? We had a third party start some work in it that we're going to either build on or try a different framework, and I don't see any obvious pitfalls with nuxt so I say build on top of however that works.

(And sadly I can't help with that Vue question just yet. I am too far removed from Vue, just was at a react shop for 2 years and am just now getting back into Vue)

pathetic little tramp fucked around with this message at 17:59 on Sep 17, 2019

Spraynard Kruger
May 8, 2007

pathetic little tramp posted:

Doing a little Vue work and does anyone have any horror stories about using nuxt framework? We had a third party start some work in it that we're going to either build on or try a different framework, and I don't see any obvious pitfalls with nuxt so I say build on top of however that works.

(And sadly I can't help with that Vue question just yet. I am too far removed from Vue, just was at a react shop for 2 years and am just now getting back into Vue)

When I last used it, their CLI didn't do the testing like the stock Vue CLI did, meaning Jest wasn't exposed to Webpack config changes and the like. As a result, we ended up in a spot where we couldn't unit test any component that loaded an inline SVG (something we had to tweak the config to support).

Same issue with linters too, so our linting would run during development but was unenforceable during CI.

lunar detritus
May 6, 2009


https://medium.com/dailyjs/do-you-like-react-then-why-dont-you-configure-your-infrastructure-with-it-e8cb36e742a2

I can't tell if this is satire or not.

Volguus
Mar 3, 2009

I have a feeling that it is not satire. And it is idiotic enough to catch on and in 6 months to see startups powered by hipsters who configure their infrastructure via react. And it'll work well enough I guess. Cannot be that much worse than the existing methods.

Thermopyle
Jul 1, 2003

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


It's a good idea with the wrong tool. But maybe the tool is good enough? I'm not so sure about that.

Social Animal
Nov 1, 2005

Starting to get interviews lined up. Man I'm super nervous, haven't had an interview in four years. Just feel like I'm going to have some kid make me feel like a fool over a whiteboard. Anything you guys do before interviews to get in the zone?

prom candy
Dec 16, 2005

Only I may dance
EVERY MORNING I WAKE UP AND OPEN PALM SLAM A VHS INTO THE SLOT. IT’S DAN ABRAMOV'S REDUX VIDEO SERIES AND RIGHT THEN AND THERE I START DOING THE MOVES ALONGSIDE WITH THE MAIN CHARACTER, DAN. I DO EVERY MOVE AND I DO EVERY MOVE HARD. MAKIN WHOOSHING SOUNDS WHEN I SLAM DOWN SOME PURE FUNCTIONS OR EVEN WHEN I MESS UP TECHNIQUE. NOT MANY CAN SAY THEY ESCAPED INSERT MODE IN VIM. I CAN. I SAY IT AND I SAY IT OUTLOUD EVERYDAY TO PEOPLE IN MY COLLEGE CLASS AND ALL THEY DO IS PROVE PEOPLE IN COLLEGE CLASS CAN STILL BE IMMATURE JEKRS. AND IVE LEARNED ALL THE LINES AND IVE LEARNED HOW TO MAKE MYSELF AND MY APARTMENT LESS LONELY BY SHOUTING EM ALL. 2 HOURS INCLUDING WIND DOWN EVERY MORNIng

Social Animal
Nov 1, 2005

I already do that though.

Ape Fist
Feb 23, 2007

Nowadays, you can do anything that you want; anal, oral, fisting, but you need to be wearing gloves, condoms, protection.
For the first time in 11 years of doing this poo poo I have been asked to present my degree for a company I'm supposed to be starting with in like 2 weeks. My degree in 'Web Design and Development' where I learned HTML, CSS, ES3 and Jasc Paint Shop Pro. My degree whose paperwork I lost when I moved to the other side of the Atlantic. My degree from which the Uni I got it from won't release re-prints without being able to take a direct physical print of my ID, which is on the other side of the Atlantic. And my notice period ends in 3 business days at my current employer. Great.

It's a people check thing handled through a 3rd party so it may just be standard procedure for them to ask for it and I'll phone the company on Monday and tell them it's going to take months for me to get ahold of this stupid loving Definitely Relevant In 2019 paperwork for them. If they can't budge then I guess I'll have to retract my resignation at my current place which definitely doesn't look weird and also forgo the £12500 raise I was getting.

Ape Fist fucked around with this message at 08:08 on Oct 5, 2019

Adbot
ADBOT LOVES YOU

Social Animal
Nov 1, 2005

Ape Fist posted:

For the first time in 11 years of doing this poo poo I have been asked to present my degree for a company I'm supposed to be starting with in like 2 weeks. My degree in 'Web Design and Development' where I learned HTML, CSS, ES3 and Jasc Paint Shop Pro. My degree whose paperwork I lost when I moved to the other side of the Atlantic. My degree from which the Uni I got it from won't release re-prints without being able to take a direct physical print of my ID, which is on the other side of the Atlantic. And my notice period ends in 3 business days at my current employer. Great.

It's a people check thing handled through a 3rd party so it may just be standard procedure for them to ask for it and I'll phone the company on Monday and tell them it's going to take months for me to get ahold of this stupid loving Definitely Relevant In 2019 paperwork for them. If they can't budge then I guess I'll have to retract my resignation at my current place which definitely doesn't look weird and also forgo the £12500 raise I was getting.

Wow I'm so sorry man. If the company personally cares about it can they not just call the university and confirm your degree? I'm guessing from now on you will remove it from your resume if you can't get a copy of it? At the end of the day you have way too much experience to bother with it anymore.

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