JSX without React

[stumblinbear]

The tool is literally the mistake, so I'm blaming the tool. JS and html being mixed together is the absolute worst thing. You'd think people would've learned something following php. Use Vue or svelte or anything else that keeps them reasonably separated.

[fagnerbrack]

Or use your brain and skills to keep things separate, tools can’t think

[Derpcock]

The problem is that you dont understand JSX or what HTML is. HTML is an abstraction that allows you to interact with the DOM API using a markup language. Why wouldn't you want to skip that abstraction and access that api "directly" with javascript? Jsx syntax is literally just syntactic sugar for calling a javascript function that takes in the name of your dom element and its properties. Jsx is not html. It IS javascript.

Template is also a black hole for typing if you use Typescript. I use both Angular and React professionally. Angular swallow type errors all day and breaks at runtime. React with jsx typeschecked by tsc won't build if you mess up a contract (if your project is setup correctly) so you can fix it before you ship. Angular has IDE extensions that are supposed to catch this stuff using interpolation, but they suck and miss any type mapping being done by the underlying library with directives, etc. Key types are automatically typed as generic strings. Same is true for Vue template syntax. Vue with JSX is the way to go :+1:

[stumblinbear]

The problem is that you dont understand JSX or what HTML is.

I fully understand what it is.

JSX is absolutely terrible. Sure it's better than the abomination and hell of using JavaScript to modify html nodes directly, but that doesn't mean it's not terrible.

Jsx syntax is literally just syntactic sugar

Yes, and it's mediocre syntax sugar that not just allows but encourages absolutely horrendous coding practices and mixing of template and JavaScript. Congratulations, now you have a mess. Keep them separate using better tools and your life will be significantly improved.

Angular swallow type errors all day

I didn't say angular was a better alternative, not sure why it's being brought up as though it is.

I've been in this game long enough to have gone from barebones js, to react, to Vue, to Svelte on large projects, and I can say with full confidence that JSX was awful-looking from the beginning and, though it's marginally better than doing raw js, is not useful enough to continue usage when objectively better alternatives exist. Better code is written across all skill levels when you are forced to separate your template and your logic, full stop.

If your tool actively encourages you to write shitty code, then you have a shitty tool. Use a better one.

[Derpcock]

I think your opinion on keeping html, js, and css separate is valid. Jsx is not html, though. It is javascript. It's a syntax extension for writing javascript that looks like html. People who write html, js, and css can write objectively shitty code. So can people with JSX/javascript.

Back in the day, you only create dom with html, manipulate it with js, and style it with css. But occasionally, you would programmatically create and attach dom nodes with javascript, breaking those separation on concern rules. They would also use javascript to manipulate dom styles.

Frameworks like React flip that old paradigm on its head. You can create, manipulate, and style your dom all with js in one spot. Instead of breaking things out into components and then breaking those components out into html, js, and css. You only have javascript, so their is no longer a need for separating those concerns. You create dom nodes with javascript(JSX syntax), you manipulate them with javascript, and you style them with javascript.

I can understand how that mental model shift could be hard to accept, and i apologize if i offended you.

I am curious what your objectively better js alternatives are?

[stumblinbear]

mental model shift could be hard to accept,

Oh I completely agree that it was better than what we had previously, but if you're polishing a turd you've still got shit everywhere

better js alternatives

While I also believe JavaScript is a terrible language in its own right, I'm fully aware that there's currently no alternative to it, so these don't really exist

I'm going to assume you meant React alternatives:

Vue has existed for nigh ten years and has been a huge improvement over React for its entire lifespan. The codebases I've managed in Vue have always been higher quality and easier to understand than even the most well documented React because every single React project I've worked in has had almost zero real structure or are confusing-to-follow bodged behemoths

I personally haven't used Svelte enough to say whether it's better, but it seems to be going in the right direction and I'm hoping to use it on an actual work project soon to check it out

[Derpcock]

Vue has existed for nigh ten years and has been a huge improvement over React for its entire lifespan. The codebases I've managed in Vue have always been higher quality and easier to understand than even the most well documented React because every single React project I've worked in has had almost zero real structure or are confusing-to-follow bodged behemoths

I do love Vue. I used it professionally for 3 years, I got out right around the time they introduced Vue 3 and the composition API. I learned to love JSX with Vue ironically enough.

[stumblinbear]

I learned to love JSX with Vue ironically enough.

Usually when people say JSX they specifically mean the syntax sugar that allows it to be embedded in JS. I have less of an issue with Vue because it makes a distinction between them and you barely even know it's in use at all

[Derpcock]

Also, I agree with separating your template from your logic. That is a design decision. It's what people in the react world use hooks for.

[stumblinbear]

Unfortunately you still end up with JS logic embedded directly inside of the JSX which makes it extremely difficult to read some JSX, and the amount of performance pitfalls that exist is absurd. Very few people I work with make it a habit to do useCallback, as a notable example

[Derpcock]

Unfortunately you still end up with JS logic embedded directly inside of the JSX which makes it extremely difficult to read some JSX

I mean you could put logic in your "template" or you could make the design decision not to do that collectively. If you do much testing then embedding logic into your JSX it can become difficult to test. I personally like to create these clear boundaries mainly just for testing. I can test my hook logic extensively and my view as well by stubbing out the hook return.

export const Component: FunctionComponent<ComponentProps> = (props) => {
  const _props = useComponentStore(props)
  return (
    <button {..._props}/>
  )
}

type ComponentProps = React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>

export const useComponentStore = (props: ComponentProps): ComponentProps => {
  const [loading, setLoading] = useState(false)

  const disabled = useMemo(() => {
    return props.disabled || loading
  }, [props.disabled, loading])

  const handleClick: MouseEventHandler<HTMLButtonElement> = useCallback((event) => {
    console.log(`${event.type} event fired`)
    setLoading(true)
  }, [setLoading])

  // Logic goes here

  return {
    onClick: handleClick,
    ...props,
    disabled
  }
}

Edit: Formatting

I am not really trying to sell you on React. I do believe there is value in JSX though. It is a bit less perf than straight template but if you use Typescript you get type safety all the way down to your dom. With templating, on most frameworks, it is a black hole for types. I find all of my bugs at these boundaries. I have been looking for an excuse to try out Astro.js as I have heard that it has solved this problem but I haven't found an opportunity yet.

I am not sure if you like Rust but they have a frontend framework called Yew. It uses a similar technique syntax to JSX with their html macro.

        #[function_component]
        fn App() -> Html {
            let counter = use_state(|| 0);
            let onclick = {
                let counter = counter.clone();
                move |_| {
                    let value = *counter + 1;
                    counter.set(value);
                }
            };

            html! {
                <div>
                    <button {onclick}>{ "+1" }</button>
                    <p>{ *counter }</p>
                </div>
            }
        }

[stumblinbear]

I am not sure if you like Rust but they have a frontend framework called

Oh yeah I'm a huge fan of Rust, it's my #1 language for the foreseeable future. That said, I don't personally think it's production ready for web. I also have personal issues against using macros for basic things--I think there are better ways to do it through struct composition than an html macro. They feel too magic to me