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 »

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.

The React Context looks like it might be a little bit like Vue's built in state pattern using Vue.observeable({})?

# ? Jul 12, 2019 07:35

Adbot: ADBOT LOVES YOU

# ? Jun 8, 2024 17:24

HaB: Jan 5, 2001; What are the odds?

Ape Fist posted:

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.

I never knew that during my occasional fugues that my other self was posting here on these dead gay forums. Now I do.

JSX looks like an abomination unto the Lord to me. I have bounced off learning React multiple times now and have pretty much given up on trying to bother. Components are setup weird, communication between them is super weird, jsx is one of the worst languages I have ever seen in my 20 years as a dev. (to ME, I should say. If you like/love it - go 'head wit yo bad self, then, but not me). Redux is attempting to solve a problem I have never personally encountered. Or at least - never encountered and couldn't think of a fairly quick/easy way to fix it on my own. The React lifecycle methods are named in a weird, over-complex manner. ComponentWillenWollenDidMountPossibly or whatever. They always make of me think of that bit in Hitchhiker's Guide where he's explaining how the concept of time-travel added a ton of new tenses to language to describe things which might have happened on an alternate timeline.

Vue clicked SUPER fast with me, because it's like...the good bits of Angular (and a few from React) with almost NONE of the cruft. The lifecycle method names make total sense immediately and are named things like: beforeCreate(), created(), mounted(), etc. The typescript support is nice, and will be full on official as of v3.

If I had to think of a thing that would make me like Vue better, it would be a slightly more formalized/"official" way to write a service, but hey - a regular ole Javascript class/object with axios works well enough.

Edit:

prom candy posted:

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.

And I still don't understand why this is a selling point. Sometimes it's just easier for it to be two-way. Or it makes WAY more sense for it to be two-way. I'm not sure how much it has changed since React came out, but I hate dogma, and everyone using it at the beginning who immediately loved it seemed to have some weird dogmatic devotion to that particular aspect of it.

HaB fucked around with this message at 13:10 on Jul 12, 2019

# ? Jul 12, 2019 13:06

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.

It's not even like I have some sort of weird problem with es6 or template strings. I love template strings they're, fine and I'm a dab hand with es6, I love it. And yeah the react component hooks are named really badly. Vue's are arguably the best but Angular's aren't that bad. The native Observable support is honestly a huge deal for me in both Angular and React and I get it can be added to React relatively easily. I just find that everything React does outside of its very basic implementations ends up being garbled syntactical horseshit and I say this as an Angular developer whose well used to garbled syntactical horseshit.

# ? Jul 12, 2019 13:43

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

HaB posted:

And I still don't understand why this is a selling point. Sometimes it's just easier for it to be two-way. Or it makes WAY more sense for it to be two-way. I'm not sure how much it has changed since React came out, but I hate dogma, and everyone using it at the beginning who immediately loved it seemed to have some weird dogmatic devotion to that particular aspect of it.

I don't necessarily think that it's "Dogma", but the idea that the view layer (React) should just render a state tree is one that resonates with me from both an internal mental-model-of-the-world place, and from other languages / paradigms I've used. React is one of many endpoints of the school of thought that "app state should be a separate concern from view rendering" to my mind. Is it perfect? Hell no. But it's advantages (to me, because I prefer this model) far outweigh the occasional hiccup. That said, with hooks and other things taking off in React-land, I think we see a bit of departure from "State lives here, views just draw it". I'm not sure how I feel about that yet.

Also, thank you for the other parts of your post! Very well stated and it's nice to have these discussions because it makes me think about _why_ I like React so much and gives me great insight into other frameworks and their differences in ways I couldn't articulate if I tried because you approach them from a different place than I do.

EDIT: jsx is the best though. :colbert:

# ? Jul 12, 2019 14:12

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

HaB posted:

And I still don't understand why this is a selling point. Sometimes it's just easier for it to be two-way. Or it makes WAY more sense for it to be two-way. I'm not sure how much it has changed since React came out, but I hate dogma, and everyone using it at the beginning who immediately loved it seemed to have some weird dogmatic devotion to that particular aspect of it.

For me it's because it's really easy to trace what is happening and why it happened when things aren't working right. Last time I worked with two-way data binding it was a big clusterfuck of "where are these changes coming from"

View as a pure function of state is something that resonated strongly with me after years of messing around with data binding and attaching inputs to "models" and so forth.

I also don't see how someone can hate JSX but at the same time think this is great:

code:

    <li v-for="todo in filteredTodos"
        class="todo"
        :key="todo.id"
        :class="{ completed: todo.completed, editing: todo == editedTodo }">
        <div class="view">
          <input class="toggle" type="checkbox" v-model="todo.completed">
          <label @dblclick="editTodo(todo)">{{ todo.title }}</label>
          <button class="destroy" @click="removeTodo(todo)"></button>
        </div>
        <input class="edit" type="text"
          v-model="todo.title"
          v-todo-focus="todo == editedTodo"
          @blur="doneEdit(todo)"
          @keyup.enter="doneEdit(todo)"
          @keyup.esc="cancelEdit(todo)">
      </li>

It's just two different approaches for controlling your markup with JS.

Also random Vue question but what happens in the above scenario if I want to render two li's for every todo? I guess Vue has some kind of fragment tag that you would use to wrap it?

# ? Jul 12, 2019 14:27

HaB: Jan 5, 2001; What are the odds?

prom candy posted:

For me it's because it's really easy to trace what is happening and why it happened when things aren't working right. Last time I worked with two-way data binding it was a big clusterfuck of "where are these changes coming from"

View as a pure function of state is something that resonated strongly with me after years of messing around with data binding and attaching inputs to "models" and so forth.

I also don't see how someone can hate JSX but at the same time think this is great:
code:
    <li 
      v-for="todo in filteredTodos"
      class="todo"
      :key="todo.id"
      :class="{ completed: todo.completed, editing: todo == editedTodo }">
      <div 
        class="view">
        <input 
          class="toggle" 
          type="checkbox" 
          v-model="todo.completed">
        <label 
          @dblclick="editTodo(todo)">
          {{ todo.title }}
        </label>
        <button 
          class="destroy" 
          @click="removeTodo(todo)">
        </button>
      </div>
      <input 
        class="edit" 
        type="text"
        v-model="todo.title"
        v-todo-focus="todo == editedTodo"
        @blur="doneEdit(todo)"
        @keyup.enter="doneEdit(todo)"
        @keyup.esc="cancelEdit(todo)"/>
  </li>
It's just two different approaches for controlling your markup with JS.

Also random Vue question but what happens in the above scenario if I want to render two li's for every todo? I guess Vue has some kind of fragment tag that you would use to wrap it?

That example you provided is only partially formatted to my personal preferences. I have re-formatted how I would actually do it. But I mean...code formatting is practically a religious argument and one I'm not interested in getting into. I format the way I do because I know I won't look at some code *I* wrote 6 months from now and go "wtf was I doing?"

Other people's formatting doesn't bother me, because it's simple enough to highlight all of it and reformat with my editor settings. Plus we use prettier as a pre-commit hook.

# ? Jul 12, 2019 15:24

Ruggan: Feb 20, 2007; WHAT THAT SMELL LIKE?!

I�ve used both Vue and React and while I prefer React I�m also fully on board with Vue. They are both great frameworks/libraries/whatever and I mainly prefer React due to the raw JS feel and the enormous community.

Vue makes some things trivial in a single line of code that take dozens in React, though. And not having decision paralysis on what to use for the rest of the �framework� saves a massive amount of time on its own.

# ? Jul 12, 2019 15:30

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

HaB posted:

That example you provided is only partially formatted to my personal preferences. I have re-formatted how I would actually do it. But I mean...code formatting is practically a religious argument and one I'm not interested in getting into. I format the way I do because I know I won't look at some code *I* wrote 6 months from now and go "wtf was I doing?"

Other people's formatting doesn't bother me, because it's simple enough to highlight all of it and reformat with my editor settings. Plus we use prettier as a pre-commit hook.

It's not the formatting that I was talking about, it's the attributes-as-directives stuff. We also use prettier so I don't really think about formatting anymore either.

Vue seems fine to me, like if it becomes the hot thing and I need to learn it to stay marketable I won't be too upset, but I definitely prefer the more imperative (is that the right word?) nature of JSX.

# ? Jul 12, 2019 15:42

The Fool: Oct 16, 2003

I've been messing around with GatsbyJS this week and have come to two conclusions:

1. Combined with SemanticUI, I really like just making GBS threads out pages of React components without a single standard HTML element in site.

2. I never realized I needed GraphQL in a static site, but now I won't be able to live without it.

# ? Jul 12, 2019 15:57

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 fully understand someone coming from a JSX perspective not liking Vue's templates because they're kind of a mess compared to Angular's which it takes inspiration from. The shorthands they added just made it worse. The official Vue documentation is also very 2.X focused and the CLI scaffolds a 3.9 application which assumes you're building a whole SPA structure with the Framework rather than the docs which focuses on the whole "Just drop me in, chief I'm ready to play!" thing which Vue does very well but yeah, it could be better there.

# ? Jul 12, 2019 16:27

HaB: Jan 5, 2001; What are the odds?

prom candy posted:

It's not the formatting that I was talking about, it's the attributes-as-directives stuff. We also use prettier so I don't really think about formatting anymore either.

Vue seems fine to me, like if it becomes the hot thing and I need to learn it to stay marketable I won't be too upset, but I definitely prefer the more imperative (is that the right word?) nature of JSX.

Ah. Yeah I feel ya. I guess I'm just more comfortable with doing it in the template like that since I came from Angular.

I can't even really pinpoint what I don't like about JSX in any tangible way. I suppose more experience with it might make it more readable to me, but as it stands, I find it really difficult to read. That being said, my first encounter with having to read it in production code was from a team which had several developers who were all great devs, but got into a weird "who can be the most clever" battle on this particular React app. And for code- "clever" nearly always translates to "hard to read, unless you wrote it, and even then, only if it was less than a month ago."

# ? Jul 12, 2019 16:28

Careful Drums: Oct 30, 2007; by FactsAreUseless

HaB posted:

which had several developers who were all great devs, but got into a weird "who can be the most clever" battle

Those aren't great devs

# ? Jul 12, 2019 16:56

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

JSX is the only templating I ever didn't hate. "I want to use JS to draw some stuff on the screen" is something that JSX does perfectly (in my opinion, obviously). "I have an array of objects, and I want to get an array of HTML elements that get rendered" just makes sense as:

JavaScript code:

myArray.map( 
  // code that makes HTML
);

And JSX makes getting HTML from JS easy....

JavaScript code:

myArray.map( 
  _thing => <option value={_thing.id}>{_thing.name}</option>
);

# ? Jul 12, 2019 17:02

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

Social Animal posted:

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

react redux works fine with hooks now is the main thing, I've just now gutted every mapState/mapDispatch/connect from the app I'm working on which was nice.

I'd like to strip out redux completely tbh though, I don't feel it's as useful as it was (and I really want rid of sagas), it's getting close to a point where that's viable, but I want suspense for data loading in place so it'll have to be later this year.

# ? Jul 12, 2019 17:05

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

The Fool posted:

I've been messing around with GatsbyJS this week and have come to two conclusions:

1. Combined with SemanticUI, I really like just making GBS threads out pages of React components without a single standard HTML element in site.

2. I never realized I needed GraphQL in a static site, but now I won't be able to live without it.

It's pretty slick when it just works but I find the docs wanting (or maybe they expect me to be a GQL expert already?) and there are weird bugs occasionally. For instance, I tried to use https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-image to add a loading image placeholder to the site I made with it just to be ~fancy~ and ended up replacing all the images on the site with the placeholder image... somehow? That was after wondering why it was silently failing to use the SVG version of the placeholder I originally tried to use - apparently that's not supported and you get to find that out by guess-and-check. Ended up just using img tags.

Oh, also made a wrapper component to make links external, so I could just <Xa etc> instead of typing out target every time and somehow two totally unrelated external links ended up pointing to the same URL. Certainly wasn't in my code - just the output.

Mainly I like that I can use JSX :shrug:

# ? Jul 12, 2019 17:29

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

Careful Drums posted:

Those aren't great devs

If you can't skim the code and understand the hig-level context, the dev is implementing the "job security" pattern.

# ? Jul 12, 2019 17:38

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

HaB's formatted code, or even prom candy's original...just basically look like JSX to me. Which is what I thought prom candy's original point was.

Aka, "how can you not like JSX but like this which looks very similar?".

But yeah, even if I hated JSX I'd still like React because of one-way data binding. It doesn't really matter much on a TODO app, but it becomes more and more liberating the larger your app gets.

# ? Jul 12, 2019 18:24

Obfuscation: Jan 1, 2008; Good luck to you, I know you believe in hell

I haven�t used Vue but I heavily dislike the Angular templates because

a) I keep forgetting the syntax while JSX is just Javascript so I already know it

b) there�s no linting for the template directives and simple mistakes inside the template file can be really hard to find because Angular error messages suck

# ? Jul 12, 2019 19:15

HaB: Jan 5, 2001; What are the odds?

Careful Drums posted:

Those aren't great devs

I should clarify: great devs when they weren't deliberately dickwaving at each other, which was something they hadn't done on previous apps.

Lumpy posted:

JSX is the only templating I ever didn't hate. "I want to use JS to draw some stuff on the screen" is something that JSX does perfectly (in my opinion, obviously). "I have an array of objects, and I want to get an array of HTML elements that get rendered" just makes sense as:

This is why our opinions differ. I have never thought of it that way. I think of it as "I want to write some HTML and have the ability to make some flow decisions while I'm doing it".

Not sure if my thinking is out of date (it probs is - I'm old), but it's always been: HTML = the layout, JS = how it works, CSS = make it pretty.

I fully realize that in both instances what's going on under the hood is javascript manipulating the DOM (which is basically what you said). But doing it in the template is easier for me to conceptualize, since it's affecting layout.

# ? Jul 12, 2019 19:16

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.

Obfuscation posted:

I haven’t used Vue but I heavily dislike the Angular templates because

a) I keep forgetting the syntax while JSX is just Javascript so I already know it

b) there’s no linting for the template directives and simple mistakes inside the template file can be really hard to find because Angular error messages suck

*ngIf, *ngFor, [propertyBinding], (eventBinding), {{interpolation}} is kind of all you need to know.

# ? Jul 12, 2019 19:32

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

I'm old as well but I've slowly but surely been moving my thinking from HTML = layout, JS = do stuff, CSS = pretty into HTML+JS+CSS = make a thing

# ? Jul 12, 2019 21:16

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

My philosophical issues with React and JSX have pretty much all been ameliorated by using it, although they were mostly based on bad UI dev experiences in other tools and environments

# ? Jul 12, 2019 21:18

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

Also an old person here and this is me:

prom candy posted:

I'm old as well but I've slowly but surely been moving my thinking from HTML = layout, JS = do stuff, CSS = pretty into HTML+JS+CSS = make a thing

# ? Jul 12, 2019 21:19

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

You haven't lived if your haven't used SOAP.

# ? Jul 12, 2019 22:11

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

dupersaurus posted:

My philosophical issues with React and JSX have pretty much all been ameliorated by using it, although they were mostly based on bad UI dev experiences in other tools and environments

Oh yeah, I forgot about this.

Circumstances forced me into using React at first maybe 4 or 5 years ago. The whole idea of embedding this stupid language in the middle of JS files made me want to punch a baby.

And then I used it for awhile and I was all like gently caress yeah this is awesome.

# ? Jul 12, 2019 22:16

Volguus: Mar 3, 2009

gbut posted:

You haven't lived if your haven't used SOAP.

I unironically do miss SOAP. While I never wrote a web ui that would consume a SOAP service, I wrote a few desktop apps that did. I had my contract (WSDL), I had the generated API, I had the clear cut signatures of methods, an IDE and a compiler that would tell me right away if anything was wrong ... what was not to love?

# ? Jul 12, 2019 22:25

Harriet Carker: Jun 2, 2009

Any of you know of a good React calendar component that allows scheduling repeating events? Basically google calendar in React.

# ? Jul 12, 2019 22:45

Social Animal: Nov 1, 2005

dantheman650 posted:

Any of you know of a good React calendar component that allows scheduling repeating events? Basically google calendar in React.

The only react calendar I can think of is react-big-calendar and I vaguely remember having to write the repeating events myself.

Hopefully there's something better out there now.

# ? Jul 13, 2019 00:09

HaB: Jan 5, 2001; What are the odds?

Volguus posted:

I unironically do miss SOAP. While I never wrote a web ui that would consume a SOAP service, I wrote a few desktop apps that did. I had my contract (WSDL), I had the generated API, I had the clear cut signatures of methods, an IDE and a compiler that would tell me right away if anything was wrong ... what was not to love?

XML, primarily. Which wastes a ton of characters to provide data.

# ? Jul 13, 2019 14:02

Harriet Carker: Jun 2, 2009

Social Animal posted:

The only react calendar I can think of is react-big-calendar and I vaguely remember having to write the repeating events myself. Hopefully there's something better out there now.

I did a bunch of research and ended up finding Full Calendar - I got a little demo app running locally in no time. Super easy to use and seems pretty powerful.

# ? Jul 13, 2019 16:26

Volguus: Mar 3, 2009

HaB posted:

XML, primarily. Which wastes a ton of characters to provide data.

That's true, but is not like you saw or dealt with the actual XML other than writing the WSDL. Hell, you could even generate the WSDL from written API even if you wanted and never even see that. And with compression those extra superfluous characters compress quite nicely.

# ? Jul 13, 2019 17:07

Social Animal: Nov 1, 2005

dantheman650 posted:

I did a bunch of research and ended up finding Full Calendar - I got a little demo app running locally in no time. Super easy to use and seems pretty powerful.

I�m happy you�re happy. Are timezones a requirement for your project? That was another pain in the rear end for me. I hope to never work on another calendar again but if I do I�ll check this Full Calendar out.

# ? Jul 13, 2019 22:53

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

Ban timezones and languages imo

# ? Jul 13, 2019 23:44

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

Did someone say Timezones?

https://www.youtube.com/watch?v=-5wpm-gesOY

# ? Jul 13, 2019 23:51

smackfu: Jun 7, 2004

The number of our developers who get caught out on failing tests due to our build server being in a different time zone is.. all of them, to be honest.

# ? Jul 14, 2019 00:22

Harriet Carker: Jun 2, 2009

Social Animal posted:

I�m happy you�re happy. Are timezones a requirement for your project? That was another pain in the rear end for me. I hope to never work on another calendar again but if I do I�ll check this Full Calendar out.

Yes, gotta work with time zones. I�m basically making a recurring event scheduler. But the time zone setting is just a global setting and all events will use it for any particular user. I don�t think it should be too bad.

# ? Jul 14, 2019 02:33

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

We just recently started switching to UTC for "timestamps." Instead, you know, "whatever the client's browser provided, but also without the timezone specified."

The company has been developing software for decades (±12h).

:suicide:

# ? Jul 14, 2019 02:39

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.

smackfu posted:

The number of our developers who get caught out on failing tests due to our build server being in a different time zone is.. all of them, to be honest.

Same (including me)

# ? Jul 14, 2019 12:46

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.

https://hackernoon.com/why-angular-made-me-quit-web-dev-f63b83a157af

# ? Jul 16, 2019 10:36

Adbot: ADBOT LOVES YOU

# ? Jun 8, 2024 17:24

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

quote:

Imagine a car whose hood never opens, and whose dashboard says only DASHBOARD in blinding lights that don�t switch off. The car cannot be repaired once broken; it can only be replaced or modified from the outside in. It guzzles gas even when it�s not turned on. No service manual exists. If you want to know how it works, here�s the 5,280-page assembly guide. Good luck.

lol

# ? Jul 16, 2019 14:30

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

«‹›235 »