Modern front-end development: skinny jeans and handlebar mustaches ITT

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT

«‹›234 »

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Nolgthorn posted:

React is actually a framework, and Vue is its competing framework. Your sarcastic comment is actually not helpful, and my comment is its competition.

React is a view library.

Both Vue and React are for Javascript front end development, and as such are about as far away from �the metal� as possible while still being on a computer.

# ? Jul 8, 2019 03:49

Adbot: ADBOT LOVES YOU

# ? Apr 27, 2024 19:00

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 think what he's saying is Vue is more Metal than React ie cooler because React is made by Facebook which is associated with Mark Zuckerberg who is not very metal.

# ? Jul 8, 2019 06:20

go play outside Skyler: Nov 7, 2005

Ape Fist posted:

I think what he's saying is Vue is more Metal than React ie cooler because React is made by Facebook which is associated with Mark Zuckerberg who is not very metal.

What are you talking about, his insides are 99% metal!

# ? Jul 8, 2019 06:40

The Fool: Oct 16, 2003

Anyone familiar enough with GatsbyJS to have Thoughts?

I'm thinking about using it in my next project.

# ? Jul 8, 2019 06:49

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 not even really sure what Gatsby even is and reading the website didn't make it much clearer.

# ? Jul 8, 2019 07:23

RobertKerans: Aug 25, 2006; There is a heppy lend
Fur, fur aw-a-a-ay.

the website is just confusing as gently caress, it's basically just a static site generator right? and I used to use those quite a bit for building little sites for people as a side job, but I avoided Gatsby because the fluff on the site seemed jargon-laden as gently caress. "Gatsby is a static pwaaah generator" "Gatsby is INTERNET SCALE" "Don't build your website with last decade's tech". Like I can install Middleman and build some HTML pages then shove the HTML on a server and I'm done, is Gatsby just a more fragile, complicated version of that? And is it basically the same as Next.js (which seems loads simpler though that's maybe just cos they've got better content writers for their website)?

RobertKerans fucked around with this message at 09:56 on Jul 8, 2019

# ? Jul 8, 2019 09:53

Doh004: Apr 22, 2007; Mmmmm Donuts...

Gatsby is dope and good with a really extensive plugin system that allows you to pull from dynamic data sources at build time to statically generate the entire site.

# ? Jul 8, 2019 11:24

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Ape Fist posted:

I'm not even really sure what Gatsby even is and reading the website didn't make it much clearer.

Gatsby: Static site generator for React.

They really should just make that the first page on the site.

# ? Jul 8, 2019 13:25

smackfu: Jun 7, 2004

How about https://svelte.dev:

quote:

Cybernetically enhanced web apps

quote:

Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

Instead of using techniques like virtual DOM diffing, Svelte writes code that surgically updates the DOM when the state of your app changes.

# ? Jul 8, 2019 14:03

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

smackfu posted:

How about https://svelte.dev:

I can't tell if this is a brilliant idea or the most elaborate troll I've ever seen.

# ? Jul 8, 2019 14:22

Gildiss: Aug 24, 2010; Grimey Drawer

Lumpy posted:

I can't tell if this is a brilliant idea or the most elaborate troll I've ever seen.

My old lead loves it so it might actually be legit.

# ? Jul 8, 2019 14:25

prom candy: Dec 16, 2005; Only I may dance

Gatsby is extremely cool

# ? Jul 8, 2019 15:40

RobertKerans: Aug 25, 2006; There is a heppy lend
Fur, fur aw-a-a-ay.

Rich Harris seems quite straightforward, so maybe the description is slightly tongue-in-cheek? It is pretty meaningless, but I think I'm maybe willing to give the benefit of the doubt because Rollup is good, Svelte seems pretty good from the little I've played around with it, and he wrote a thing recently about how web components are in most cases a bit poo poo which I heartily agreed with. Whereas I'm still to be persuaded on Gatsby (it just seems a bit sprawling for something that feels like it should be v simple, but that may just be the way it's being presented on-site) but I'll have go at it as people here seem to think it is cool & I'm just about to build another small site

# ? Jul 8, 2019 16:30

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

RobertKerans posted:

Rich Harris seems quite straightforward, so maybe the description is slightly tongue-in-cheek? It is pretty meaningless, but I think I'm maybe willing to give the benefit of the doubt because Rollup is good, Svelte seems pretty good from the little I've played around with it, and he wrote a thing recently about how web components are in most cases a bit poo poo which I heartily agreed with. Whereas I'm still to be persuaded on Gatsby (it just seems a bit sprawling for something that feels like it should be v simple, but that may just be the way it's being presented on-site) but I'll have go at it as people here seem to think it is cool & I'm just about to build another small site

I just can't get over the phrase "surgical updating"

# ? Jul 8, 2019 17:31

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.

[Cyberpunk 2077]

# ? Jul 8, 2019 17:43

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.

Every loving time I try to do something new in Vue I just end up whispering 'Jesus gently caress that was easy.' when it just works the first time I do it.

# ? Jul 8, 2019 20:06

RobertKerans: Aug 25, 2006; There is a heppy lend
Fur, fur aw-a-a-ay.

Lumpy posted:

I just can't get over the phrase "surgical updating"

It's ridiculous isn't it, but I think "cybernetically enhanced web apps" tops it

# ? Jul 8, 2019 22:10

spiritual bypass: Feb 19, 2008; Grimey Drawer

Svelte looks really nice

# ? Jul 8, 2019 22:35

RobertKerans: Aug 25, 2006; There is a heppy lend
Fur, fur aw-a-a-ay.

Possibly brilliant, but I've only made the toyiest of toy apps so far. Setup was the quickest & simplest experience I've had for a long time, development feels jQuery-level easy, and developing a few tiny things in it genuinely made me happy. Was all v nice but I need to see how it handles more substantial stuff.

Edit: I kinda felt the same way about Ractive, and made a few widgety things using it (price calculators & stuff) for the company I was working for at the time, and they worked great, but it fell down on more complex stuff. I think that was the point of it tho, to allow The Guardian to easily build little dataviz things they could dump into their site, and Svelte seems to allow for similar self-contained little widgety things. Docs/tutorials/examples are all miles better for Svelte than they ever were for Ractive, ecosystem might be an issue tho

RobertKerans fucked around with this message at 23:40 on Jul 8, 2019

# ? Jul 8, 2019 23:32

prom candy: Dec 16, 2005; Only I may dance

Svelte seems cool, basically it just pre-determines all the different DOM changes it could need to make based on your code and pre-compiles them? Pretty neat

# ? Jul 9, 2019 05:19

twitch and spasm: Jul 21, 2010

Gatsby is v good whoever was talking about it earlier.

# ? Jul 9, 2019 14:40

Jimlit: Jun 30, 2005

Holy poo poo though......

code:

<script>
	let name = 'world';
</script>

<h1>Hello {name}!</h1>

code:

/* App.svelte generated by Svelte v3.6.6 */
import {
	SvelteComponent,
	append,
	detach,
	element,
	init,
	insert,
	noop,
	safe_not_equal,
	text
} from "svelte/internal";

function create_fragment(ctx) {
	var h1, t0, t1, t2;

	return {
		c() {
			h1 = element("h1");
			t0 = text("Hello ");
			t1 = text(name);
			t2 = text("!");
		},

		m(target, anchor) {
			insert(target, h1, anchor);
			append(h1, t0);
			append(h1, t1);
			append(h1, t2);
		},

		p: noop,
		i: noop,
		o: noop,

		d(detaching) {
			if (detaching) {
				detach(h1);
			}
		}
	};
}

let name = 'world';

class App extends SvelteComponent {
	constructor(options) {
		super();
		init(this, options, null, create_fragment, safe_not_equal, []);
	}
}

export default App;

# ? Jul 9, 2019 21:05

reversefungi: Nov 27, 2003; Master of the high hat!

Are React Hooks meant to completely replace classes?

Going through this code base refactor, I noticed a class using componentDidMount to conditionally sort some data if a prop flag is passed through. Then you can continue to sort data through manually interacting with the component. I tried using useEffect and passing an empty array into the second argument, but due to the fact that the effect depends on props, I get a linting error about a missing dependency. Is this just a use case where classes make more sense, or is there a more idiomatic functional component way of doing this? I'm still new to hooks and this isn't my code so perhaps the obvious answer hasn't popped out to me yet, but I couldn't get things to play nicely just using hooks, so I'm keeping this component as a class for now.

# ? Jul 9, 2019 22:47

Vincent Valentine: Feb 28, 2006; Murdertime

As far as I'm aware while hooks are not currently a replacement for classes, the intention is to one day be at a point where they are. Frankly I think they've got a ways to go, but they're definitely going to get there.

# ? Jul 9, 2019 23:17

Harriet Carker: Jun 2, 2009

The Dark Wind posted:

Are React Hooks meant to completely replace classes?

Going through this code base refactor, I noticed a class using componentDidMount to conditionally sort some data if a prop flag is passed through. Then you can continue to sort data through manually interacting with the component. I tried using useEffect and passing an empty array into the second argument, but due to the fact that the effect depends on props, I get a linting error about a missing dependency. Is this just a use case where classes make more sense, or is there a more idiomatic functional component way of doing this? I'm still new to hooks and this isn't my code so perhaps the obvious answer hasn't popped out to me yet, but I couldn't get things to play nicely just using hooks, so I'm keeping this component as a class for now.

More than you ever wanted to https://overreacted.io/a-complete-guide-to-useeffect/

# ? Jul 10, 2019 01:28

ddiddles: Oct 21, 2008; Roses are red, violets are blue, I'm a schizophrenic and so am I

The Dark Wind posted:

Are React Hooks meant to completely replace classes?

Going through this code base refactor, I noticed a class using componentDidMount to conditionally sort some data if a prop flag is passed through. Then you can continue to sort data through manually interacting with the component. I tried using useEffect and passing an empty array into the second argument, but due to the fact that the effect depends on props, I get a linting error about a missing dependency. Is this just a use case where classes make more sense, or is there a more idiomatic functional component way of doing this? I'm still new to hooks and this isn't my code so perhaps the obvious answer hasn't popped out to me yet, but I couldn't get things to play nicely just using hooks, so I'm keeping this component as a class for now.

Your useEffect should have that prop as a dependency, you can check the props value in your use effect code to conditionally run another function that does your data sorting.

If your prop flag tends to change and you only want your sorting code to run once, create another piece of state that tracks if the sorting has already been complete and check that as well as your prop.

# ? Jul 10, 2019 01:34

prom candy: Dec 16, 2005; Only I may dance

Just disable the linter error in that case if you really only want it to run on mount and not if that prop changes.

Or use this so that your linter doesn't know what you're doing https://github.com/imbhargav5/rooks/blob/dev/packages/shared/useDidMount.ts

# ? Jul 10, 2019 05:21

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

A coworker ran across a weird scoping issue with this in a React Jest test. We figured out a workaround but we're stumped about why there was a problem.

The basic setup:

code:

// component

const Component = ({store}) => {
	return (
		<div onClick={store.clickAction} />	// <-----------
	)
}

code:

// test

const StoreMock = jest.fn().mockImplementation(() => ({
	clickAction: function() {
		this.someOtherFunction();		// <-----------
	},
	someOtherFunction: function() {}
});

describe('Test', () => {
	it('Should have this set', () => {
		theDiv.simulate('click', {});
	});
})

The problem being, in this setup, the this in clickAction was undefined. But if you changed the component to

code:

<div onClick={() => store.clickAction()} />

code:

<div onClick={store.clickAction.bind(store)} />

this is resolved correctly. Obviously it's a scope issue, but like I said, we're stumped. Anyone have any ideas what's going on here?

Edit: Just to be clear, the original version worked live, so the failure is Jest-related, but whether it's a Jest thing or something with how we're mocking :shrug:

dupersaurus fucked around with this message at 14:25 on Jul 11, 2019

# ? Jul 11, 2019 14:11

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.

dupersaurus posted:

A coworker ran across a weird scoping issue with this in a react jest test. We figured out a workaround but we're stumped about why there was a problem.

The basic setup:
code:
// component

const Component = ({store}) => {
	return (
		<div onClick={store.clickAction} />	// <-----------
	)
}
code:
// test

const StoreMock = jest.fn().mockImplementation(() => ({
	clickAction: function() {
		this.someOtherFunction();		// <-----------
	},
	someOtherFunction: function() {}
});

describe('Test', () => {
	it('Should have this set', () => {
		theDiv.simulate('click', {});
	});
})
The problem being, in this setup, the this in clickAction was undefined. But if you changed the component to
code:
<div onClick={() => store.clickAction()} />
or
code:
<div onClick={store.clickAction.bind(store)} />
this is resolved correctly. Obviously it's a scope issue, but like I said, we're stumped. Anyone have any ideas what's going on here?

When event handlers in javascript fire, "this" arg will refer to the element on which the event handler is invoked, not the class that attached the event handler, unless the event handler is explicitly bound to a class or uses the arrow function. This is described in https://reactjs.org/docs/handling-events.html but it's a universal javascript behavior.

# ? Jul 11, 2019 14:30

dupersaurus: Aug 1, 2012; Futurism was an art movement where dudes were all 'CARS ARE COOL AND THE PAST IS FOR CHUMPS. LET'S DRAW SOME CARS.'

Bruegels Fuckbooks posted:

When event handlers in javascript fire, "this" arg will refer to the element on which the event handler is invoked, not the class that attached the event handler, unless the event handler is explicitly bound to a class or uses the arrow function. This is described in https://reactjs.org/docs/handling-events.html but it's a universal javascript behavior.

Yeah, but what explains the undefined "this" and why does it work outside of the test?

# ? Jul 11, 2019 17:54

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.

Literally every time I try to look at the react docs or make a todo app I loving fall asleep at the wheel.

# ? Jul 11, 2019 17:56

The Fool: Oct 16, 2003

Ape Fist posted:

Literally every time I try to look at the react docs or make a todo app I loving fall asleep at the wheel.

I hate the todo app tutorials too.

If you're familiar with javascript and just want to try React, you can try this site: https://learn.freecodecamp.org/front-end-libraries/react

Then maybe try one of their project ideas: https://learn.freecodecamp.org/front-end-libraries/front-end-libraries-projects

# ? Jul 11, 2019 18:10

prom candy: Dec 16, 2005; Only I may dance

Ape Fist posted:

Literally every time I try to look at the react docs or make a todo app I loving fall asleep at the wheel.

It's funny I have the same reaction to Vue/Angular. I think there's like two distinct brain types that respond differently to the two different approaches. Bound in our mutual distaste for Ember.

# ? Jul 11, 2019 18:13

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Todo apps are terribly boring, but when I was coming into React years ago I found the react docs to be amongst the best docs I'd used before.

# ? Jul 11, 2019 18:17

ndrz: Oct 31, 2003

Vincent Valentine posted:

As far as I'm aware while hooks are not currently a replacement for classes, the intention is to one day be at a point where they are. Frankly I think they've got a ways to go, but they're definitely going to get there.

The only current use case where you still need a class is defining a Suspense boundary. Aside from that, you can 100% program things in hooks only.

I've been working on a refactor of our app (scale issues, wrong fundamental data structures / architecture / algorithms) for the last 2 months and 7000 lines, and it's exclusively using hooks. I can't imagine going back to be honest.

# ? Jul 11, 2019 18:33

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:

It's funny I have the same reaction to Vue/Angular. I think there's like two distinct brain types that respond differently to the two different approaches. Bound in our mutual distaste for Ember.

I ate Vue the gently caress up and was building out fully featured poo poo within like 24 hours of playing with it because it just clicked really nicely with me, but I have some weird mental block with React largely around JSX, as well as Parent->Child Child->Parent Communcation and Redux alone does my head in.

# ? Jul 11, 2019 21:24

prom candy: Dec 16, 2005; Only I may dance

The Child -> Parent communication is the hardest thing to get used to I think but it's also my favourite thing. Data flows one way.

Redux is its own thing and I wouldn't try to learn it at the same time you learn react. You also don't need it the way you used to.

# ? Jul 12, 2019 02:51

Social Animal: Nov 1, 2005

prom candy posted:

You also don't need it the way you used to.

Has there been some update? I haven't used redux in over a year since I stopped working on an SPA.

# ? Jul 12, 2019 03:00

smackfu: Jun 7, 2004

ndrz posted:

The only current use case where you still need a class is defining a Suspense boundary. Aside from that, you can 100% program things in hooks only.

I think error boundaries is another gap, since there is no hooks equivalent to componentDidCatch.

# ? Jul 12, 2019 04:53

Adbot: ADBOT LOVES YOU

# ? Apr 27, 2024 19:00

prom candy: Dec 16, 2005; Only I may dance

The context API is a lot nicer to work with now than it was when redux/flux patterns got popular. It's easy to just set up different context hooks to handle stuff that in the past might have gone into redux. https://kentcdodds.com/blog/how-to-use-react-context-effectively/

I also prefer Apollo for dealing with data from an API, there's so much boilerplate for data fetching in redux.

The rise of typescript might be hastening redux's demise as well, it's like 2x the amount of boilerplate to properly type a reducer and a bunch of action creators. There are some cool projects that are supposed to ease the pain (https://github.com/thebrodmann/deox) but I haven't seen any achieve that kind of critical mass that packages in the React world sometimes get to.

# ? Jul 12, 2019 04:58

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT

«‹›234 »