Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

10 years of Front end Development. I quit

news.ycombinator.com

Post reply on HN
Print view View original

41–50 of 50 posts

Re: 10 years of Front end Development. I quit

#41

Post by jamespetercook »

tvphan wrote: post #25
jamespetercook wrote: post #21

The whole CSS in JS thing is so backwards. I use React a lot and I love it, but styles stay in a css file structured using BEM. It works.

I thought the same thing until you start to think in terms of “constraint-based components”, which are more easily done in CSS-in-JS. Styling is done by passing properties to a component, e.g. , and only the developer building the primitive component needs to worry about styling. You end up being able to rapidly develop interfaces that match the designs.

If I understand correctly you can still do that, just the underlying component will be adding/removing a CSS class instead of injecting the actual styles. I usually use the classnames library to help with this but obviously not a requirement (https://www.npmjs.com/package/circular-dependency-plugin) I find it's also easier to test for the presence of css classnames based on the provided props than it is to test for the presence of mutiple style rules.

Re: 10 years of Front end Development. I quit

#43

Post by agent3bood »

Let's rewrite the same example and change the variable names, I think it make more sense now.

  import React from 'react';
  import { makeStyles } from '@material-ui/core/styles';
  import Button from '@material-ui/core/Button';
  
  const MyButtonClasses = makeStyles({
    root: {
      background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
      border: 0,
      borderRadius: 3,
      boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
      color: 'white',
      height: 48,
      padding: '0 30px',
    },
  });
  
  export default function MyButton() {
    const classes = MyButtonClasses();
    return MyButton;
  }

Re: 10 years of Front end Development. I quit

#44

Post by ahofmann »

agent3bood wrote: post #43

Let's rewrite the same example and change the variable names, I think it make more sense now. import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Button from '@material-ui/core/Button'; const MyButtonClasses = makeStyles({ root: { background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', border: 0, borderRadius: 3, boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)', color: '…

This looks like much too complicated CSS mixed with Javascript. Or in other words: why must a button be created in such a complex way, when CSS and HTML can do the same?

Re: 10 years of Front end Development. I quit

#46

Post by Ioluc8yi »

> I think I know what happened. Many ex-backend devs entered the field and being unable or impatient enough to understand and do CSS properly, decided to inline and JavaScripIze everything.

Lol, dude. A few years before publishing React, Facebook hired basically all Mootools developers who would join, which were among the few people taking big javascript applications seriously before "frontend development" was a thing.

Re: 10 years of Front end Development. I quit

#47

Post by raihansaputra »

recursivedoubts wrote: post #33

I sympathize. The state of front end dev is in no small part why I wrote intercooler and, now, work on htmx: http://htmx.org It's crazy how unnecessarily complex everything has become.

Glad to hear it's still going! Does this represent a lot of change from Intercooler? Why a new project instead of integrating it to Intercooler?

Re: 10 years of Front end Development. I quit

#48

Post by recursivedoubts »

raihansaputra wrote: post #47
recursivedoubts wrote: post #33

I sympathize. The state of front end dev is in no small part why I wrote intercooler and, now, work on htmx: http://htmx.org It's crazy how unnecessarily complex everything has become.

Glad to hear it's still going! Does this represent a lot of change from Intercooler? Why a new project instead of integrating it to Intercooler?

For simple stuff it's not too different from intercooler, but I wanted to have the freedom to remove mistakes and ideas that didn't work out, so I chose to go with a new name.

Originally I chose kutty, which means, roughly, "sweet" in american slang, but that had too many other meanings, including a very unfortunate meaning in dutch slang.

Re: 10 years of Front end Development. I quit

#49

Post by nojvek »

I will say this. React popularized good ideas at the start. `View is a function of state`, that's a great paradigm to build UI on. It makes a lot of things simpler. Other frameworks like Vue, svelte, snabbdom all do very similar things.

The current iteration of React with hooks, fibers, synthetic events is a tirefire. There's a lot of `It's Facebook so it must be good` hype without questioning whether all that complexity even makes sense.

Gzipped React + ReactDom = ~50KB. Unzipped is ~200KB. That's nuts and plain inefficient. A low powered device will take half a second to load and parse that crap before it even does a first paint.

If you care about performance, React is no longer the tool. Svelte and Preact (4k gzipped) are way better alternatives.

Stay away from it. If it's a simple app/web page, just use vanilla js. The core DOM API has good cross browser compatibility nowadays. You don't even need jQuery.

React is a jack of all trades but master of none. Don't equate Frontend Development === React.

Re: 10 years of Front end Development. I quit

#50

Post by assertnotnull »

Sadly our reality is that the used tool is the one that gets most publicity. I never liked React or Angular because how it mixed structure and styling. It was sold on features then simplicity. Whereas I used Riot.js, then Vue.js now using personally Svelte because it's even simpler. BTW I do frontend+backend Node.js now learning Elixir.
Post reply on HN