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

«‹›235 »

smackfu: Jun 7, 2004

So I assume that is a webpack loader or something that is magically making it work?

# ? Dec 15, 2022 03:46

Adbot: ADBOT LOVES YOU

# ? Jun 5, 2024 01:40

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

SvelteKit 1.0 is out for anyone who's into that sort of thing: https://svelte.dev/blog/announcing-sveltekit-1.0

# ? Dec 15, 2022 06:15

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

Doom Mathematic posted:

The only thing which weirds me out here is const star = Star() because calling the component directly as a function is something you just never do with React components. If it was const star = <Star /> I would have no objections at all.

Those are literally the same I think, since <Star /> is just transpiled into Star() right?

Nolgthorn posted:

I've had success simply exporting the svg as a react component, importing it somewhere else, using it. Why do you need to call it like a function? The extension of my svgs have typically been .tsx though so we are doing something different.

Hmm, this got me thinking that I don't actually need to do the "pre-call". If I just capitalized the prop, I could do:

JavaScript code:

// icons.ts
import { ReactComponent as Star } from "./star.svg";
import { ReactComponent as DickButt } from "./dickbutt.svg";

export { Star, Dickbutt };


// some other file.ts

import { Star } from "./icons";

...

<OurIconLibrary Icon={Star} color="#0fc" />

// OurIconLibrary
<div style={{color: props.color}}>
  <Icon />
</div>

Lumpy fucked around with this message at 18:00 on Dec 15, 2022

# ? Dec 15, 2022 17:56

Ima Computer: Oct 28, 2007; Stop all the downloading!

Help computer.

Lumpy posted:

Those are literally the same I think, since <Star /> is just transpiled into Star() right?

It's not really the same. Using JSX syntax transpiles to:

React.createElement(Star, {}, null)

# ? Dec 15, 2022 17:59

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

Ima Computer posted:

It's not really the same. Using JSX syntax transpiles to:

React.createElement(Star, {}, null)

Oh duh. Thanks!

# ? Dec 15, 2022 18:00

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

I'm learning React (coming from an Angular and Vue background) and I'm seeing something that I don't think is React specific, but I feel I should know regardless.
Sometimes I see something like:

JavaScript code:

function myFunction(params) {
	// do something with params
}

but other times I see something like:

JavaScript code:

const myFunction = (params) => {
	// do something with params
}

What's the difference? Also why is it const? Doesn't that mean the value never changes? Why isn't it let?

# ? Dec 29, 2022 20:19

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

The Merkinman posted:

I'm learning React (coming from an Angular and Vue background) and I'm seeing something that I don't think is React specific, but I feel I should know regardless.
Sometimes I see something like:
JavaScript code:
function myFunction(params) {
	// do something with params
}
but other times I see something like:
JavaScript code:
const myFunction = (params) => {
	// do something with params
}
What's the difference? Also why is it const? Doesn't that mean the value never changes? Why isn't it let?

the later is just the new way of writing functions in the latest JS spec and the way most people are gonna expect you to write them nowadays, but nothing's wrong with the former

const because the function definition changes, yes

# ? Dec 29, 2022 20:25

Doom Mathematic: Sep 2, 2008

The difference is one of scope. The first definition gets "hoisted" so it's legal to do this:

JavaScript code:

myFunction(1, 2, 3) // this works, no problem

function myFunction(params) {
	// do something with params
}

But if you do this:

JavaScript code:

myFunction(1, 2, 3) // some kind of error, because `myFunction` doesn't exist yet

const myFunction = (params) => {
	// do something with params
}

# ? Dec 29, 2022 20:38

abraham linksys: Sep 6, 2010

i'd push back slightly on the idea that that's how "most people are gonna expect you to write them;" when you're defining top-level functions either's fine.

`const` is that the function doesn't change after definition. i do think most developers these days use linting tools that are fairly strict about let/const. dunno if you've tried using create-react-app yet, but i would bet money that the default eslint config it has would yell at you if you tried to do `let myFunction = (params) => ...` and didn't redefine the function later.

now, there is an actual reason why javascript has two syntaxes, and there are a few significant differences. the arrow syntax was introduced to resolve the common (at the time) problem of object scope changing in callbacks. in practice, with javascript frameworks nowadays eschewing class/object systems as much as possible, this doesn't come up that much. the very short version: javascript's `this` keyword, inside a function, by default would refer to that function's scope, rather than the scope the function was defined in, which was bad for callbacks that were defined inline in code inside an object method, since the `this` value would change inside the callback. the MDN article on `this` does an okay job going over the problem: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

this is one of those js things that borders on the edge of trivia, but might be good to know if you ever find yourself working on a codebase that makes heavy use of objects or classes

other () => {} trivia: before js had the `...args` syntax for rest params, you could use a special `arguments` keyword inside a function to access the arguments as an array-like thing (early javascript APIs LOVED "array-like things"). doesn't work in arrow functions. also, `function xyz()` is hoisted so that you can use it before it's defined, but let/const are not: https://developer.mozilla.org/en-US/docs/Glossary/Hoisting

edit: beaten on the hoisting point

# ? Dec 29, 2022 20:45

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

One other nifty thing about arrow functions is they have implicit return if you omit the curly braces. These two functions do the same thing:

code:

const myFunc = () => {
 return 'hello'
}

const myFunc = () => 'hello'

# ? Dec 29, 2022 22:06

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Thanks all for the clarification. That was basically the Andy meme of "I don't know X and at this point I'm afraid to ask".

Has routing always been a complete pain in React? Everything I read is broken because it's outdated. Even this that was posted 5 days ago is outdated (it uses the component prop rather than the element one)

# ? Dec 30, 2022 22:06

go play outside Skyler: Nov 7, 2005

The Merkinman posted:

Thanks all for the clarification. That was basically the Andy meme of "I don't know X and at this point I'm afraid to ask".

Has routing always been a complete pain in React? Everything I read is broken because it's outdated. Even this that was posted 5 days ago is outdated (it uses the component prop rather than the element one)

Sorry friend, I think you'll find that web dev land is a land of endless deprecation, experimental support, and rewrites.

React-native team is working on a new system for native modules. On the docs that explain how to make native modules, it says "Heads up! This documentation is about the old system that will be deprecated soon. We recommend using the new system!"

And when you go to the docs for the new system, there's a big banner that says "Heads up! This documentation is about a module system which is still experimental and is likely to change!"

So my friend, you either get to make a native module will be deprecated soon and you'll have to rewrite, or you get to make something that will most likely break soon anyways.

As usual the only winning move is not to play, lmfao.

# ? Dec 30, 2022 22:14

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

The Merkinman posted:

Thanks all for the clarification. That was basically the Andy meme of "I don't know X and at this point I'm afraid to ask".

Has routing always been a complete pain in React? Everything I read is broken because it's outdated. Even this that was posted 5 days ago is outdated (it uses the component prop rather than the element one)

If you're reading something not directly from the developers, always be wary. That said, I feel like the react-router documentation to be pretty good

# ? Dec 30, 2022 23:02

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

Tanstack router seems cool if you feel like being on the bleeding edge and you love type safety. But yeah react-router has been a safe bet for years.

# ? Dec 30, 2022 23:06

fsif: Jul 18, 2003

Honestly if an app is complex enough to need routing (i.e., still not particularly complex) I'm pretty much just reaching for Next.

But yeah if you have your reasons to eschew Next, just use react-router.

# ? Dec 30, 2022 23:20

marumaru: May 20, 2013

The Merkinman posted:

Has routing always been a complete pain in React? Everything I read is broken because it's outdated. Even this that was posted 5 days ago is outdated (it uses the component prop rather than the element one)

at this point in my career in front end development i dont bother with courses anymore. chances are they're going to be outdated by the time they're out. i just read docs.
react router is the safest, most mainstream bet and they seem to have improved on their horrible docs: https://reactrouter.com/en/main/start/tutorial

# ? Dec 30, 2022 23:21

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

fsif posted:

Honestly if an app is complex enough to need routing (i.e., still not particularly complex) I'm pretty much just reaching for Next.

But yeah if you have your reasons to eschew Next, just use react-router.

Remix is good too. It makes more sense to me than Next. Next is industry standard though. I also played with SvelteKit a bit this week and it seems really cool. I've never built a complete project with Svelte though.

# ? Dec 31, 2022 00:54

hey mom its 420: May 12, 2007

fsif posted:

Honestly if an app is complex enough to need routing (i.e., still not particularly complex) I'm pretty much just reaching for Next.

But yeah if you have your reasons to eschew Next, just use react-router.

Pretty much this. Next is kind of in a transition right now, as it's transitioning to the app directory, which is still in beta. However, the old pages directory is still good and supported and will be for a long time, and it's worth learning.

# ? Dec 31, 2022 08:38

Wheany: Mar 17, 2006; Spinya^{ha^{ha^haha}ha}ha_{ha_{ha_haha}ha}ha!; Doctor Rope

Documentation is hard. From a user's point of view it's often incomplete, inaccurate or out of date. One problem is that you're probably not going to write down things that are obvious to you and it's difficult to realize which things that are obvious to you are not obvious to another person. (Or even to yourself 2 months later)

# ? Dec 31, 2022 15:42

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

Next js is an especially egregious example of the JavaScript ecosystem�s tendency to churn. They release a new breaking major version about every 9 months.

# ? Dec 31, 2022 18:44

Sagacity: May 2, 2003; Hopefully my epitaph will be funnier than my custom title.

Chenghiz posted:

Next js is an especially egregious example of the JavaScript ecosystem’s tendency to churn. They release a new breaking major version about every 9 months.

I've been able to stay away from it, but is it basically on the level of "in order to upgrade just create a new empty app and try to migrate stuff across" or is there some kind of automated process?

# ? Dec 31, 2022 19:00

fsif: Jul 18, 2003

I've never really had much an issue updating it personally. Most of the time it's just running an npm command. Definitely never anything that requires I start from an empty app.

# ? Dec 31, 2022 19:41

abraham linksys: Sep 6, 2010

everything in nextjs 13's app/ architecture is listed as beta, has its own docs site, and it's relying on react features that have spent basically four years in development, it's not that churn-y imo. i wouldn't even plan to launch anything on it until at least mid-2023.

there will be a pretty significant rewrite needed if you want to move to it (as there will be if you want to move to anything that's going to use react server components + suspense), but i don't think there's going to be any deprecation of the existing getServerSideProps/etc architecture for a while. too many enterprise-y users, and even if no one is a next.js "client" it'd still be a bad look for vercel as the primary maintainers if they said "surprise we're removing these apis in next 14." there might be some "soft deprecation" problems where new features aren't backported to the old architecture, but i don't expect it to be a huge deal

also next really didn't have any major breakages in the past few years. the two big things were going from webpack 4->5 and react 16->17->18, which are kinda broader ecosystem things.

# ? Dec 31, 2022 19:51

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

I've read some of the react server component stuff and I'm not that jazzed about it. I find Remix's system of loaders and actions so much easier to reason about. I have also noticed a lot more chatter about Remix, and noticed that the big full-stack frameworks in the other ecosystems (SvelteKit, SolidStart) are also using that pattern. I have to wonder if Next is going to maintain the position as a clear number 1. Also gotta wonder where things stand with React in general. Svelte and Solid both do a lot of things really well but of course it's not easy to justify using anything other than React if you're trying to actually run a business. 2023 is gonna be an interesting year.

# ? Dec 31, 2022 22:57

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

abraham linksys posted:

everything in nextjs 13's app/ architecture is listed as beta, has its own docs site, and it's relying on react features that have spent basically four years in development, it's not that churn-y imo. i wouldn't even plan to launch anything on it until at least mid-2023.

there will be a pretty significant rewrite needed if you want to move to it (as there will be if you want to move to anything that's going to use react server components + suspense), but i don't think there's going to be any deprecation of the existing getServerSideProps/etc architecture for a while. too many enterprise-y users, and even if no one is a next.js "client" it'd still be a bad look for vercel as the primary maintainers if they said "surprise we're removing these apis in next 14." there might be some "soft deprecation" problems where new features aren't backported to the old architecture, but i don't expect it to be a huge deal

also next really didn't have any major breakages in the past few years. the two big things were going from webpack 4->5 and react 16->17->18, which are kinda broader ecosystem things.

Every major version contains breaking changes by definition but sure. I used nextjs back in the 4-5 days and was bitten by major changes multiple times. IMO if they still can�t decide on their APIs after 13 major versions despite being not just a library but a framework, that�s a big red flag for me.

# ? Jan 1, 2023 01:33

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

Releasing 13 major versions since 2016 is kinda wild. Rails is on 7, Django is on 4.

# ? Jan 1, 2023 08:20

gbut: Mar 28, 2008; 😤I put the UN🇺🇳 in 🎊FUN🎉

Just the other day I decided to rip out next from my latest project and forget it ever existed. It's the worst.

# ? Jan 1, 2023 15:06

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

gbut posted:

Just the other day I decided to rip out next from my latest project and forget it ever existed. It's the worst.

What are you using instead?

# ? Jan 1, 2023 16:08

Summit: Mar 6, 2004; David wanted you to have this.

Next kicks rear end. Just ignore the new stuff, your project wont explode if you don�t use beta features right away.

# ? Jan 2, 2023 00:56

smackfu: Jun 7, 2004

prom candy posted:

Releasing 13 major versions since 2016 is kinda wild. Rails is on 7, Django is on 4.

I was thinking React went through a lot of major versions over a similar timeline but apparently the first major was 15.0 for some reason??

# ? Jan 2, 2023 01:01

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

smackfu posted:

I was thinking React went through a lot of major versions over a similar timeline but apparently the first major was 15.0 for some reason??

Yeah the release that was going to be 0.15.0 just got tagged as 15.0.0 instead. react-native is still on 0.70.x though

# ? Jan 2, 2023 02:26

gbut: Mar 28, 2008; 😤I put the UN🇺🇳 in 🎊FUN🎉

prom candy posted:

What are you using instead?

For my purpose, next was an overkill and an opinionated nuisance. Express.js ended up being more than enough.

# ? Jan 3, 2023 01:07

Splinter: Jul 4, 2003; Cowabunga!

gbut posted:

For my purpose, next was an overkill and an opinionated nuisance. Express.js ended up being more than enough.

I mean Express and Next aren't really built to solve the same problems. Did you just replace Next with Express, or are you also now using something like CRA to bootstrap your React application?

# ? Jan 4, 2023 01:04

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

Express and React�s renderToString get you like 75% of the way to what next offers. It�s not trivial but is also not a lot of work if you only need a subset of functionality

# ? Jan 4, 2023 16:20

Macichne Leainig: Jul 26, 2012; by VG

I like a lot of Next's opinions tbh. That filesystem based routing makes so much sense to me.

That said it's probably overkill for me too. I don't even use next/image because it seems to be much harder to get those to render the same as a plain <img>, and I don't exactly always know the desired height and width of an image all the time

# ? Jan 4, 2023 16:27

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

Chenghiz posted:

Express and React�s renderToString get you like 75% of the way to what next offers. It�s not trivial but is also not a lot of work if you only need a subset of functionality

Is there any real benefit to basically rolling your own framework when there are a couple of really good ones already though?

Even if Next/Remix are overkill I think I'd probably reach for something like vite-plugin-ssr because at least it's something with a community and documentation.

# ? Jan 4, 2023 18:15

Summit: Mar 6, 2004; David wanted you to have this.

If something solves your problem and is a widely accepted solution, who cares if you�re not using all of it?

# ? Jan 4, 2023 19:03

gbut: Mar 28, 2008; 😤I put the UN🇺🇳 in 🎊FUN🎉

Chenghiz posted:

Express and React�s renderToString get you like 75% of the way to what next offers. It�s not trivial but is also not a lot of work if you only need a subset of functionality

Basically this, because Next was in the way for some stuff we were trying to solve.

# ? Jan 5, 2023 00:56

fsif: Jul 18, 2003

Macichne Leainig posted:

I like a lot of Next's opinions tbh. That filesystem based routing makes so much sense to me.

That said it's probably overkill for me too. I don't even use next/image because it seems to be much harder to get those to render the same as a plain <img>, and I don't exactly always know the desired height and width of an image all the time

next/image is kind of wonky but has been a life safer for me. Never want to try to navigate srcsets again.

# ? Jan 5, 2023 01:30

Adbot: ADBOT LOVES YOU

# ? Jun 5, 2024 01:40

Macichne Leainig: Jul 26, 2012; by VG

fsif posted:

next/image is kind of wonky but has been a life safer for me. Never want to try to navigate srcsets again.

I'm gonna play with it some more today, it seems to be worth it for all the performance benefits anyway what with free lazy loading and whatnot.

# ? Jan 5, 2023 17:56

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

«‹›235 »