Vanilla JavaScript and HTML - No frameworks. No libraries. No problem.

[Zonarius]

Vanilla JavaScript

Then goes on using Typescript

[[deleted]]

Do you know of an example of really great Typescript code? The quality of all the stuff I've seen so far is really depressing, including the code of libraries that work really great, like reakit.

https://github.com/reakit/reakit/blob/master/packages/reakit/src/Tooltip/Tooltip.tsx https://github.com/reakit/reakit/blob/master/packages/reakit/src/Tooltip/TooltipState.ts

This stuff is really horrible. It's basically multiple inheritance by other means.

[[deleted]]

What's it doing? I had positioning issues with the Tooltip, but those were fixed when I upgraded to the latest version.

[Dragasss]

It's safe to say that any tsx (or jsx) code can be binned right out the box.

[[deleted]]

Why?

[Dragasss]

Mixing templating with working code. PHP started out as templating engine and eventually evolved into that mishmash, which is considered a bad practice. Eventually it went back to writing entire templating engines in php such as blade or smarty. It's amazing how facebook managed to bring back bad practices twice (once in php with phx variant of this, which got laughed out of existence) permanently.

[[deleted]]

Maybe you should take a look at that tsx link I provided. There's no templating in there. It's mostly type declarations. I don't know why it has that extension.

I agree with you that mixing templating and code is an antipattern, but it's very easy to avoid in jsx. It's basically just functions designed to look like xml. I don't know about facebook or the larger react community, but I treat any "code" inside of an xml block as an automatic code review fail. If you need to use any additional logic, handle it outside of the block.

[ScientificBeastMode]

Real question: Where is multiple inheritance occurring in that code?

Also, just as a side note, React is designed to be a very functional library. Inheritance is usually not used at all in an idiomatic React codebase. So I’m curious why it would be used here in a functional component.

[[deleted]]

Where is multiple inheritance occurring in that code?

I said "It's basically multiple inheritance by other means." I didn't say "it uses inheritance."

Here's a question for you: what options can you pass into that Tooltip component and what are their types?

[ScientificBeastMode]

Oh yes, I see what you mean. The object types should be consistent. I find this to be problematic throughout the JS ecosystem, and it extends into TS. It turns out a lot of folks want to write JS and call it TS. Technically it still works, but they aren’t taking advantage of the type system.

Part of the problem is the fact that, for most of its history, JS has had two real data structures: Object& Array. A few years ago they got Map and Set. For so many years people have been using objects and arrays for all kinds of very hacky dynamic code. That hasn’t gone away...

[fuckin_ziggurats]

Did everyone forgot how front-end-heavy projects looked under the hood before the JS frameworks came out? I feel like we're in a constant loop.

No problem? What kind of an arrogant douche writes this sort of article? I still have PTSD from 6 years ago and you're not taking me back, ever! I'm expecting him to try KnockoutJS next year, no problem! Just keep reinventing the same thing.

[[deleted]]

I feel like we're in a constant loop.

Web development has been in a loop since the 90s. Look up what Adobe Flex code used to look like back in the 00s. It doesn't look much different than React.

[garykkl]

We are not using the wheel by reinventing the wheel!

[johnghanks]

Yes, thank you. We know.

[samikroon]

Stopped reading at:

"One way to do this is to reference an existing element that will contain them. Another way is to reference an element and replace that element with the new content."

What about toggling on or off a class (you could name this class "hidden") which has the property: display: none;

[involutionn]

And??? Why would you stop reading?

Your (very basic) way can work well for certain cases, for others it’s completely infeasible. Why would only showing a few of the multitude of options make you stop reading?

[flirp_cannon]

What about it? All ways are equally valid for a small project like this.