One of Reacts greatest features is you’re just using JS for the logic - loops and conditionals are type checked, autocompleted, and already universally understood.
Template based solutions have existed since forever, but if given the choice I’d never use them.
React is a view state management library. Hyper is a DSL for a framework called Nue. They're not like-for-like tech. A better comparison would be something like Svelte which is a similar DSL (used with a framework called SvelteKit).
Fwiw JSX is also a minimal DSL used by React but if this article compared bare Hyper (without Nue) with bare JSX (without React), JSX would come out much much more minimal in the examples.
With vuejs, the template code is very identical to your hyper version.
React is full bullshit mixing (JSX) code.
So what's about comparing to a cleaner code and separation like the vuejs.
What i mean is that classes are used to save interactive state and if you have some component like dropdown or hamburger menu then adding class "open" is very common solution and for certain transitions you need multiple classes because of in-out durations. So what you do? Use custom attributes? Sure but then thats just semantic difference to using a class attribute.
Looking at docs of your project you are doing both
posts.forEach(post => post.classList.add('fade-in'))
AND
main.style.display = 'block'
I'm waiting for more real world production examples and not just the todo-list hello world.
I like the simpler/cleaner approach of Nue. Now one of the big difference will be the component and theming provided.
I'm a long term vue/vuetify user and i can build powerful and sexy web app in a small amount of time and effort.
I will definetely compare this point.
That's said, you've done an incredible work with your Nue project. i keep a eye on it.
Reading through the article, there are many places in which the information is incomplete, wrong and downright dishonest, imo.
> Through Radix UI, Tanstack Table, and TypeScript interfaces. This results in approximately 170 lines of code, versus 40 lines in Hyper.
You made the choices to include these. TypeScript boilerplate is inevitable in good quality code. Tanstack and Radix UI add an immense number of features that your plain table just doesn't have. You're also omitting the fact that you import all components automatically with your IDE.
> ShadCN table requires six different transpilers: ESBuild, JSX Transform, Rollup, TypeScript, Tailwind, and PostCSS.
Exactly two of these are actual "transpilers" (tsc and esbuild), and only one is used in the compilation step. The JSX transform is performed by esbuild, rollup is a bundler, TypeScript is only used during development, tailwind is not a transpiler at all and PostCSS only transforms CSS for greater compatibility.
> Modern React components aren't reusable across projects with varying design requirements because the design is hardcoded in the component.
None of these things are inevitable in React. It's a really bizarre example because this only seems to point to a specific limitation/design flaw on Shadcn specifically.
> By contrast, Hyper colocates your typography concerns into a single CSS file, acting as the single source of truth for your h2 an p element styling: [global styling]
If your argument is that components are not reusable across projects, then it's really funny that you're applying your styles globally. What if I don't want my paragraphs to look like that? Then I have to manually override it, duplicating CSS code. This is also legitimately just possible with "Modern React", you can just add CSS and use it however you'd like.
> cryptic utility classes like dark:bg-lime-400/10 size-[max(100%,2.75rem)]—is systematically eliminated.
You mean you're not using Tailwind. Which is possible in React.
> Nue is the "framework" (think Next.js + Astro, but simpler)
Next.js and Astro are both frameworks which are totally incompatible with one another.
This whole article seems to stem from a fundamental misunderstanding of (or a lack of desire to understand) what React is or does, and how to fix it. It's genuinely impressive that you were able to build a framework from scratch instead of just... googling your issues? Some of these were solved ages ago and don't require a whole new stack to be created.
I also believe there is a real argument to be made against React everywhere, but that is beyond the scope of this comment. What I can say is that this comparison would be a lot better if it were against Astro or SvelteKit, which will solve most of the issues you have (boilerplate and bundle size), while also providing a much better supported experience.
I did not. ShadCN data table requires these. Check their docs
> None of these things are inevitable in React.
Hence the "old shchool" example.
ps: I have a deep understanding how React works, even on how the actual codebase works.
You made the choice to include Shadcn.
> ps: I have a deep understanding how React works, even on how the actual codebase works.
I'm starting to doubt that.
I'm at a loss of words. Is this really seen as a good idea?
Hard pass.
People always notice this and bring it up, yet the author keeps doing it. This is not a single mistake, it's a pattern.
The language throughout is "dumbed down" as if written for a recruiter or non-technical founder who's only heard of "react" as a buzzword:
> Hyper is the language (think React, but simpler)
React isn't a language. JSX is a language, but still doesn't compare well to a full DSL like Hyper. Svelte would be a more sensible comparison here (but given your chosen metrics I suspect it wouldn't make Hyper look as good).
The title seems deliberately misleading - I see nothing about performance in the piece. You seem to be using the word "perform" to mean "hits some arbitrary metrics we selected", like cloc of your own app (no mention of cloc of the node_modules folder).
The comparisons are also nonsense. The first React "modern version" is comparing Hyper to ShadCN, not React itself. The only extra "boilerplate" is the import loading in ShadCN as a dependency.
Seriously what is going on here? Who is this for?
Hyper may be a great project but this piece is so devoid of content or analyses that I really can't tell.
- All the imports are only needed because a UI library was used. This is not necessary.
- It also looks like 'User' is imported, but not used anywhere.
- The curly braces and the return statement can be left out.
- React.FC<> is unnecessary, you can just specify the type after {users} or, at least, simplify React.FC to FC.
tipiirai•8mo ago
jgalvez•8mo ago
tipiirai•8mo ago
https://nuejs.org/hyper/
CJefferson•8mo ago
But, you then only give me an example of formatting a 'h2 in a p'. But, what if I want to highlight one row of one particular table?