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
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.

evilfunkyogi posted:

JSX feels kinda wrong at first but declaring your templates in javascript has some cool side effects like being able to catch databinding issues at compile/transpile time instead of runtime.

Maybe Angular has a good solution for that these days, but it didn't when I was messing around with it.

Yeah ng-build/npm run start-aot catches template errors, but sometimes the output isn't as detailed as it needs to be, its usually just poo poo at the end of NPM's error log and if you're even slightly new to Angular you'll have no idea what the gently caress it means. Sometimes the application compiles properly and only fails in the console log when you navigate to the template that its failing on.

Another problem is if you're building an enterprise-level application in Angular, which is honestly what Angular is used for a lot right now -- your ng-build can sometimes take literally upwards of 10 minutes, so its 10 minutes to diagnose a template error.

In retrospect Angular really could do error-handling better right now, especially considering we're on version loving 7. TypeScript on the other hand produces perfectly good errors which are usually caught right away when you save.

Edit: I also don't HATE JSX as much as most Angular Devs seem to. But it can carry a risk of a complex component getting stuffed full of markup which I guess can start to look dirty. It also seems like it's common to insert logic directly into the JSX, like full loving functions right in there which I'm not wild about it's not that you can't do that in Angular, but you just wouldn't (sometimes you do for little things, but generally you don't.). Angular seems to have a stronger focus on abstraction, despite people going on about differentiating functional, state, and container components in React. Additionally Angular's template language can be confusing at first, admittedly, but once you get the hang of it you really understand how strong it really is. ngFor, ngIf, [property], (method) and [(shorthand)] bindings are all great. This doesn't even take into account the simple superiority of TypeScript in general. I get that you can use stuff like TS/MobX to build the same sorts of @Injectable() services in React and generally speaking a lot of people don't like DI but tbh TypeScript+RxJS is just the hottest god drat poo poo.

Borderline Fanboy Footnote: A couple of the major arguments against choosing Angular over React are scheduled to be (hopefully) nullified once the Ivy Rendering Engine makes its way into release, where the application won't package unused libraries, will provide more succinct error reporting for template issues, and significantly reduce application load, rendering, and package resource costs.

Ape Fist fucked around with this message at 23:15 on Sep 2, 2018

Adbot
ADBOT LOVES YOU

my bony fealty
Oct 1, 2008

JSX rules eff the haters

I maintain some AngularJS projects and directives in HTML are dumb and I hate them and hey now I'm doing some stuff in Vue for learning and I hate directives there too (I like a lot of Vue otherwise tho)

map over v-for anyday

I also cant remember when your JS and data and poo poo is in quotes and when its in braces and the mixture sucks

A real answer about why I like React is that the majority of your logic is just JavaScript and functions and not goofy directives and binding

Vincent Valentine
Feb 28, 2006

Murdertime

Angular is fine. React is fine.

They're both fine. Sometimes one is more fine for a specific project than the other.

Sometimes a framework has something I don't think is fine. I don't do that thing. That's fine too. Sometimes I do something the framework doesn't like, but I like it, so it's fine. It largely depends on your point of Vue.

Choices don't matter, all will be dust in the end, free will is an illusion.

Dominoes
Sep 20, 2007

Not a direct answer to the question, and perhaps not a fair comparison, but React's integration of code logic, visual elements, and dynamic style feels much more natural than rendering templates in Django. I get why mixing HTML and code is unappealing to some people, but I personally love it; it feels more natural than flipping between multiple files. Ie organization by display item rather than by type of code.

More controversial: I enjoy React's inline styles, and use them exclusively over CSS classes. I use CSS files only for setting overall defaults for each type of HTML element.

Dominoes fucked around with this message at 05:20 on Sep 3, 2018

Analytic Engine
May 18, 2009

not the analytical engine

my bony fealty posted:

JSX rules eff the haters

I maintain some AngularJS projects and directives in HTML are dumb and I hate them and hey now I'm doing some stuff in Vue for learning and I hate directives there too (I like a lot of Vue otherwise tho)

map over v-for anyday

I also cant remember when your JS and data and poo poo is in quotes and when its in braces and the mixture sucks

A real answer about why I like React is that the majority of your logic is just JavaScript and functions and not goofy directives and binding

Switching from Angular 1.x to React was a beautiful experience

ddiddles
Oct 21, 2008

Roses are red, violets are blue, I'm a schizophrenic and so am I
Currently got tasked with setting up the front end for a greenfield react/redux project, coming from an angularjs project with no state management, it's been a pretty great experience.

Also, Olive Branch has been pretty great working with an older Rails backend as a necessity. Recommended.

ddiddles fucked around with this message at 07:22 on Sep 3, 2018

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 don't think anyone is going to defend AngularJS tbh.

my bony fealty
Oct 1, 2008

Tbf I'm very glad I have to maintain AngularJS stuff and not the likely alternative, jQuery spaghetti piled high.

Seeing jQuery in AngularJS is weird and uncomfortable though. Was that a normal thing?

Thermopyle
Jul 1, 2003

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

React and Angular are both fine, but React speaks to me in a way that Angular never has.

I like the template, styling, and sometimes logic all in one logical unit (at least I like the idea of it...there's still some churn on what the best way to do the styling is). Abstracting into a component is just a different type of abstraction then separating all your styling, logic, and templating.

I would argue it's a better way of abstracting stuff.

That being said, there are pitfalls to the approach. For example, you have to watch where you put your logic so you don't end up with an unmaintainable mess of spaghetti. Then again, there's pitfalls with every paradigm and I suppose the logic thing is a common pitfall in all sorts of ways of abstracting your poo poo. Right now I'm thinking of Django which strongly encourages no logic in your templates...you still have to make sure you carve your problems logic into views, classes, functions, tags that make sense.

Anyway, regardless of whether you use Angular or React you're better off than you would be managing your DOM manually unless you're just creating simple applications!

Bruegels Fuckbooks
Sep 14, 2004

Now, listen - I know the two of you are very different from each other in a lot of ways, but you have to understand that as far as Grandpa's concerned, you're both pieces of shit! Yeah. I can prove it mathematically.

my bony fealty posted:

Tbf I'm very glad I have to maintain AngularJS stuff and not the likely alternative, jQuery spaghetti piled high.

Seeing jQuery in AngularJS is weird and uncomfortable though. Was that a normal thing?

that was one of the biggest weaknesses of angularjs, angularjs was dependent on jquery (or to be more accurate, a subset of jquery called jqLite, although it would use the included jquery if it was available). if you're wondering why the angular is faster than angularjs, well, that's one of the reasons.

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.
How the hot poo poo do I get the details of a DOM element in a child component in react?

I'm rendering a <div> whose height might change based on its content and I'd like to pipe that particular number once rendered back up to the parent component?

lets say I have ugh:

code:
class Parent extends Component {

	constructor() {
		super();
		this.state = {
			divHeight: 'HEIGHT I NEED TO BE POPULATED WITH CHILD COMPONENT HEIGHT'
		}
	}

	render() {
		return(
			<Child/>
		)
	}

}

export default Parent;
code:
class Child extends Component {

	constructor(props) {
		super(props);
	}

	render() {
		return(
			<div>
				DIV WHOSE HEIGHT I NEED THE PARENT COMPONENT TO KNOW
			<div>
		)
	}

}

export default Child;

justizor
Dec 21, 2007

Ape Fist posted:

How the hot poo poo do I get the details of a DOM element in a child component in react?

I'm rendering a <div> whose height might change based on its content and I'd like to pipe that particular number once rendered back up to the parent component?

lets say I have ugh:

code:
class Parent extends Component {

	constructor() {
		super();
		this.state = {
			divHeight: 'HEIGHT I NEED TO BE POPULATED WITH CHILD COMPONENT HEIGHT'
		}
	}

	render() {
		return(
			<Child/>
		)
	}

}

export default Parent;
code:
class Child extends Component {

	constructor(props) {
		super(props);
	}

	render() {
		return(
			<div>
				DIV WHOSE HEIGHT I NEED THE PARENT COMPONENT TO KNOW
			<div>
		)
	}

}

export default Child;

Use a ref:

code:
class Parent extends Component {

	constructor() {
		super();
		this.state = {
			divHeight: 'HEIGHT I NEED TO BE POPULATED WITH CHILD COMPONENT HEIGHT'
		}

		this.newHeight = this.newHeight.bind(this);
	}

	newHeight(height) {
		this.setState({divHeight: height});
	}

	render() {
		return(
			<Child newHeight={this.newHeight} />
		)
	}

}

export default Parent;
code:
class Child extends Component {

	constructor(props) {
		super(props);
		this.ref = React.createRef();
	}

	componentDidMount() {
		this.props.newHeight(this.ref.current.height);
	}
	
	componentDidUpdate() {
		this.props.newHeight(this.ref.current.height);
	}

	render() {
		return(
			<div ref={this.ref}>
				DIV WHOSE HEIGHT I NEED THE PARENT COMPONENT TO KNOW
			<div>
		)
	}

}

export default Child;
https://reactjs.org/docs/refs-and-the-dom.html
https://reactjs.org/docs/react-component.html#componentdidmount
https://reactjs.org/docs/react-component.html#componentdidupdate

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.
Baller, thanks.

Ape Fist fucked around with this message at 21:54 on Sep 4, 2018

Dominoes
Sep 20, 2007

Looking for wisdom on mixing CSS grid's requirement that (AFAIK) grid items must be the highest-level children of the container, and React requiring JSX snippets to be in their own container.

JavaScript code:
        <form style={{
            display: 'grid',
            gridTemplateColumns: onMobile() ? '1fr' : '1fr 1fr',
            gridTemplateRows: 'auto auto'
        }}>

            {*/ Row 1 here /*}

            {onMobile() ? (
                <div style={{gridColumn: '1 / 3', gridRow: '1 / 2'}}>
                    {col1}
                    {col2}
                </div>

            ) : (

                <div>
                    <div style={{gridColumn: '1 / 2', gridRow: '2 / 3'}}>
                        {col1}
                    </div>

                    <div style={{gridColumn: '2 / 3', gridRow: '2 / 3'}}>
                        {col2}
                    </div>
                </div>
            )}
    </form>
The code above doesn't layout properly in the 2-column mode due to the parent div. If I remove it, the JSX will not compile, since it would be parsing a JSX-var without a parent element.

Dominoes fucked around with this message at 11:03 on Sep 5, 2018

justizor
Dec 21, 2007

Dominoes posted:

Looking for wisdom on mixing CSS grid's requirement that (AFAIK) grid items must be the highest-level children of the container, and React requiring JSX snippets to be in their own container.

JavaScript code:
        <form style={{
            display: 'grid',
            gridTemplateColumns: onMobile() ? '1fr' : '1fr 1fr',
            gridTemplateRows: 'auto auto'
        }}>

            {*/ Row 1 here /*}

            {onMobile() ? (
                <div style={{gridColumn: '1 / 3', gridRow: '1 / 2'}}>
                    {col1}
                    {col2}
                </div>

            ) : (

                <div>
                    <div style={{gridColumn: '1 / 2', gridRow: '2 / 3'}}>
                        {col1}
                    </div>

                    <div style={{gridColumn: '2 / 3', gridRow: '2 / 3'}}>
                        {col2}
                    </div>
                </div>
            )}
    </form>
The code above doesn't layout properly due to the parent div in the 2-col layout. If I remove it, the JSX will not compile, since it would be parsing a JSX-var without a parent element. Could do something with Flexbox, but without the guarantee of fixed columns.

You can either use React.Fragment, which was added in React 16, or use ”display: contents” in the css for the divs.

I would reccomend using fragments

https://reactjs.org/docs/fragments.html

Dominoes
Sep 20, 2007

Thank you - fragment solved it elegantly. I'll be making liberal use of it from here on.

Explicitly, the fix was replacing the final <div></div> pair with <></>

Dominoes fucked around with this message at 22:58 on Sep 5, 2018

prom candy
Dec 16, 2005

Only I may dance
My apps are littered with fragments. I really hope in the future that we won't need them at all anymore but they're a nice feature in the meantime.

my bony fealty
Oct 1, 2008

Someone told me once that doing @import React, { Component, Fragment } from 'react' is bad and just using React.Component and React.Fragment is better is this true? Does it matter? I guess it is redundant to import them directly?

Vue's single file components with the CSS right there is really wooing me rn. I do the same thing a lot with styled-components in React more or less but drat it's nice to just write scoped CSS.

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.

my bony fealty posted:

Vue's single file components with the CSS right there is really wooing me rn.

You can do this with Angular as well?

Bruegels Fuckbooks
Sep 14, 2004

Now, listen - I know the two of you are very different from each other in a lot of ways, but you have to understand that as far as Grandpa's concerned, you're both pieces of shit! Yeah. I can prove it mathematically.

Ape Fist posted:

You can do this with Angular as well?

Yeah it's angular's default behavior.

ddiddles
Oct 21, 2008

Roses are red, violets are blue, I'm a schizophrenic and so am I
Anyone working with react/redux? I have a high level pattern question.

So I have this component where the UI is broken out into steps, so only one sub component is shown at a time as the user progresses through.

The actual content for the steps are broken out into their own components, my question is, whats the best way to let the parent component know that step 1 component finished what it needed to do, and it should move onto step 2.

Right now step 1 takes in some data from the user, and stores it in my redux store. Once thats stored, I want to move onto step two. Should the parent component just be watching the store to wait for the info step 1 is responsible for to be there? Or should I pass in a callback prop to the nested step components to fire off when they are complete?

Dominoes
Sep 20, 2007

ddiddles posted:

The actual content for the steps are broken out into their own components, my question is, whats the best way to let the parent component know that step 1 component finished what it needed to do, and it should move onto step 2.
Store progress in your state. Two examples; in both, assign each page a number: Store a number representing the highest level completed (or current Subpage). Or a Map<number, boolean> that defines whether each subpage is complete.

Vincent Valentine
Feb 28, 2006

Murdertime

Yeah, react allows you to create a function that modifies state on a component, then pass that function as a prop to the child. When the child runs that function, the parent state gets updated, not the child, allowing the parent to be aware of what the child is doing.

Or just do it in redux and map state to props, problem solved

Chenghiz
Feb 14, 2007

WHITE WHALE
HOLY GRAIL

my bony fealty posted:

Someone told me once that doing @import React, { Component, Fragment } from 'react' is bad and just using React.Component and React.Fragment is better is this true? Does it matter? I guess it is redundant to import them directly?

Vue's single file components with the CSS right there is really wooing me rn. I do the same thing a lot with styled-components in React more or less but drat it's nice to just write scoped CSS.

you can write import React, {Component} from 'react' right now because babel incorrectly interprets the finalized es module spec; it's not valid javascript. The correct thing to do, which will not break when you stop using babel to compile to modern javascript, is to import React and then use React.Component.

geeves
Sep 16, 2004

Ape Fist posted:

Can someone who has worked on Angular AND React give me reasons to like one or the other?

Ape Fist posted:

Btw I'm talking about Angular, not AngularJS

Still using the term Angular.

It's pedantic, but if you're fundamentally changing everything choose a loving different product name, Google.

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.

geeves posted:

Still using the term Angular.

It's pedantic, but if you're fundamentally changing everything choose a loving different product name, Google.

Ugh no you're absolutely right.

One of the main reasons Angular sits behind React is because of the gigantic naming mistake. Because people see 'Angular' and assume they're talking about AngularJS and go ughhh I'm not touching that poo poo.

Ape Fist fucked around with this message at 09:07 on Sep 7, 2018

The Merkinman
Apr 22, 2007

I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Ape Fist posted:

Ugh no you're absolutely right.

One of the main reasons Angular sits behind React is because of the gigantic naming mistake. Because people see 'Angular' and assume they're talking about AngularJS and go ughhh I'm not touching that poo poo.

It's also terrible for SEO, but what would Google know about that?

Love Stole the Day
Nov 4, 2012
Please give me free quality professional advice so I can be a baby about it and insult you

The Merkinman posted:

It's also terrible for SEO, but what would Google know about that?

Perhaps Google is blind to AngularJS' reputation in the same way that Microsoft is blind to IE's reputation.

Munkeymon
Aug 14, 2003

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



The Merkinman posted:

It's also terrible for SEO, but what would Google know about that?

Google's spider has run JS for years now.

Love Stole the Day posted:

Perhaps Google is blind to AngularJS' reputation in the same way that Microsoft is blind to IE's reputation.

They know. They've been trying to get people off of it since Edge came out because they don't want to support IE any more than they want to support XP

The Merkinman
Apr 22, 2007

I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Munkeymon posted:

Google's spider has run JS for years now.

quote:

Perhaps Google is blind to AngularJS' reputation in the same way that Microsoft is blind to IE's reputation.


They know. They've been trying to get people off of it since Edge came out because they don't want to support IE any more than they want to support XP

I was referring to the latter, having a product vastly different/improved from its predecessor, but with the same name.

*searches for Angular*
--results come in referring to AngularJS--
*searches for Angular 2/6/etc*

Bruegels Fuckbooks
Sep 14, 2004

Now, listen - I know the two of you are very different from each other in a lot of ways, but you have to understand that as far as Grandpa's concerned, you're both pieces of shit! Yeah. I can prove it mathematically.

Ape Fist posted:

Ugh no you're absolutely right.

One of the main reasons Angular sits behind React is because of the gigantic naming mistake. Because people see 'Angular' and assume they're talking about AngularJS and go ughhh I'm not touching that poo poo.

yeah.

angularjs was hilariously terrible and it was amazing it got as popular as it ever did - between angular and google closure there was a point where I couldn't take google seriously, and would just refuse to work at any company stupid enough to use angularjs.

angular was so different than angularjs that people mostly didn't port and just kept using angularjs, and would use react for new projects just because react was more mature at that time and since they'd have to learn a new framework anyway...

angular doesn't use 'virtual dom', it uses direct rendering with change detection (e.g. dom is only updated when model is actually changed.) in terms of rendering speed, angular is generally going to be on par or slightly faster than react (https://www.stefankrause.net/wp/?p=454), although react has an advantage in memory use and initial display performance (although if you care about initial display, use server side rendering!)

Love Stole the Day
Nov 4, 2012
Please give me free quality professional advice so I can be a baby about it and insult you

Munkeymon posted:

They know. They've been trying to get people off of it since Edge came out because they don't want to support IE any more than they want to support XP
I don't know, just because they rebrand doesn't mean they're not blind to it. They could just as easily be rationalizing it as a pure branding issue only rather than a performance or software issue, which would explain why it isn't that much better anyway.

teen phone cutie
Jun 18, 2012

last year i rewrote something awful from scratch because i hate myself
For those who write React, how do you deal with cancelling requests that set state, but the component has unmounted before the request finishes?

Currently trying to solve the problem of

1. Users gets to page
2. ComponentDidMount and Request fires
3. Users navigates away
4. Component unmounts
5. Request finishes and tries to set state
6. Console error

Trying to find an elegant way of doing it.

code:
If (!this.mounted) return;
isn’t too elegant imo.

Love Stole the Day
Nov 4, 2012
Please give me free quality professional advice so I can be a baby about it and insult you

Grump posted:

For those who write React, how do you deal with cancelling requests that set state, but the component has unmounted before the request finishes?

Currently trying to solve the problem of

1. Users gets to page
2. ComponentDidMount and Request fires
3. Users navigates away
4. Component unmounts
5. Request finishes and tries to set state
6. Console error

Trying to find an elegant way of doing it.

code:
If (!this.mounted) return;
isn’t too elegant imo.

My naive first impression is to check in the callback function that the state still is valid before it does anything. Or, again naive first impression here, you could check that the component still exists in the callback function.

Though I don't see how a request would try to update the state of a component that may or may not exist. That sounds like a problem that can be fixed by improving/refactoring the design.

Gildiss
Aug 24, 2010

Grimey Drawer
https://reactjs.org/docs/react-component.html#componentwillunmount

Nm that was right, handle the cancelling of the request in here.

Munkeymon
Aug 14, 2003

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



The Merkinman posted:

I was referring to the latter, having a product vastly different/improved from its predecessor, but with the same name.

*searches for Angular*
--results come in referring to AngularJS--
*searches for Angular 2/6/etc*

:doh: Yeah, Angular and Go (but to a lesser extent) are both ironically Google-hostile, which is pretty funny.

Love Stole the Day posted:

I don't know, just because they rebrand doesn't mean they're not blind to it. They could just as easily be rationalizing it as a pure branding issue only rather than a performance or software issue, which would explain why it isn't that much better anyway.

Rebrand? Edge is basically a ground-up rewrite and they even exist side-by-side on Windows 8+. Microsoft set up a site encouraging users to leave IE, though I can't remember the domain they picked, and had a site dedicated to providing developers resources to transition to modern browsers. They did all that because it was less manpower than making and maintaining an IE 12 that wasn't hot garbage would have been. Edge itself is fine - performs well enough and consistently gets modern features added in a timely fashion. The real boat anchor in terms of feature adoption the past few years is Safari.

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'm just telling recruiters or anyone who asks that there's 'Angular' and 'AngularJS', 'Angular' refers to anything after Angular JS (i.e. Angular 2/4/5/6/7, etc.) and AngularJS refers to AngularJS, which is how Google wants you to name poo poo anyway.

Thermopyle
Jul 1, 2003

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

Edge is a rebrand of IE like a PC is a rebrand of the typewriter.

(ok, I exaggerate a tiny bit)

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.
Imagine if Google went with Dart over TypeScript in Angular.

Adbot
ADBOT LOVES YOU

HaB
Jan 5, 2001

What are the odds?

Ape Fist posted:

I'm just telling recruiters or anyone who asks that there's 'Angular' and 'AngularJS', 'Angular' refers to anything after Angular JS (i.e. Angular 2/4/5/6/7, etc.) and AngularJS refers to AngularJS, which is how Google wants you to name poo poo anyway.

Trying to educate recruiters on this stuff is a fool's errand.

See: the number of calls I get about Java jobs, because I have JavaScript on my CV and hey they've gotta be at least close to the same thing, right?

Google hosed up and should have called Angular something else entirely.

AngularJS had its issues for sure, but I don't think it was a bad as some of you are remembering.

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