Blog entry fine tuning

tipiirai · tipiirai · commit 05b482b51e15 · 2025-05-08T11:52:24.000+03:00
diff --git a/packages/nuejs.org/blog/introducing-hyper/index.md b/packages/nuejs.org/blog/introducing-hyper/index.md
@@ -1,36 +1,47 @@
+
 ---
-title: "Hyper: Simple React alternative"
-hero_title: "Introducing Hyper — A simple React alternative _(Developer Preview)_"
+title: "Hyper: Standards first React alternative"
+hero_title: "Introducing Hyper — Standards first React alternative _(Developer Preview)_"
 og: img/hyper-og.png
-date: 2025-05-06
+date: 2025-05-08
 ---
 
-Today I'm releasing Hyper: a simple markup language for building user interfaces. It enables developers (and AI models) to generate complex UIs with amazingly clean syntax.
+Hyper is a standards first markup language for building user interfaces. It enables developers (and AI models) to generate complex UIs with amazingly clean syntax.
 
 [image.bordered]
   large: img/hyper-banner-dark-big.png
   small: img/hyper-banner-dark.png
   size: 1305 × 517
 
-### Compare: React vs Hyper
-* Phase 1: [Simple components](#simple)
-* Phase 2: [Complex components](#complexity)
-* Phase 3: [Reusable components](#reusable)
-* Phase 4: [Scalability](#scalability)
 
+## Project goals
+1. **Standards first**: User interfaces should be assembled with HTML, styled with CSS, and enhanced with JavaScript.
+
+2. **Simplicity**: UI composition should be easy and require as few idioms and abstractions as possible, both on client and server (SSR).
+
+3. **Design Systems**: Design should be a separate subsystem, easily accessible for developers who care about and understand design.
+
+4. **Scalability**: Complex UIs should retain simplicity as the application grows.
 
-## Backstory
-Hyper is the new reactive library for Nue, eventually replacing the current [Nue JS](https://github.com/nuejs/nue/tree/master/packages/nuejs) package. The  purpose of this library is to make frontend development simpler. It stands against the complexity and bloat that pervade the current frontend ecosystem, particularly in monolithic React where logic, structure, and styling are mixed together. Hyper, however, is what React 1.0 originally envisioned: just a _headless view layer_ focused on rendering, with clear separation from styling concerns.
+To understand how these goals are met, we use React as a counter-example because it's the opposite of Hyper's architecture and design goals. React embraces a monolithic architecture where logic, structure, and styling are mixed together, while Hyper is what React 1.0 (2013) originally envisioned: just a headless view layer.
 
-Let's study the difference.
+Let's study the difference in more detail:
 
 
-## Phase 1: Simple components { #simple }
-We begin with the fundamentals: how to define basic UI elements. Below is a simple `<table>` component defined in three ways:
+
+### Compare: React vs Hyper
+* [Simple components](#simple-components)
+* [Complex components](#complex-components)
+* [Design systems](#design-systems)
+* [Scalability](#scalability)
+
+
+## Simple components
+Below is a basic `<table>` component defined in three ways:
 
 [.row]
   [! img/simple-table-1.png]
-    caption: Idiomatic React
+    caption: Modern React
     href: simple-table.html
 
   [! img/simple-table-2.png]
@@ -42,20 +53,20 @@ We begin with the fundamentals: how to define basic UI elements. Below is a simp
     href: simple-table.html#hyper
 
 
-1. **Idiomatic React:** ShadCN, Tailwind, and TypeScript. The extra boilerplate comes through React patterns and the custom <Table> syntax. [Source](simple-table.html) • [Demo](/hyper/demo/react/simple-table.html)
+1. **Modern React** Modern React represents a common approach to building user interfaces today using component libraries such as ShadCN/UI, Material UI, Chakra, or Tailwind Catalyst. In this example, we chose ShadCN as it's gained significant popularity in recent years and has strong AI tool support. For example, Claude and ChatGPT offer built-in support for ShadCN in their code previews. [Source](simple-table.html) • [Demo](/hyper/demo/react/simple-table.html)
 
-2. **Old school React:** JSX with vanilla CSS. More straightforward markup but still needs JavaScript wiring and JSX transformation. [Source](simple-table.html#oldschool) • [Demo](/hyper/demo/react/simple-table-oldschool.html)
+2. **Old school React** is how React components were built back in the days when styling was decoupled from the component code. [Source](simple-table.html#oldschool) • [Demo](/hyper/demo/react/simple-table-oldschool.html)
 
-3. **Hyper:** Clean, standards- compliant HTML. Table is a <table>. [Source](simple-table.html#hyper) • [Demo](/hyper/demo/table/simple-table.html)
+3. **Hyper** demonstrates the standards-first approach. [Source](simple-table.html#hyper) • [Demo](/hyper/demo/table/simple-table.html)
 
 While these differences might seem minor, they become apparent when we move to more complex components:
 
 
-## Phase 2: Complex components { #complexity }
+## Complex components
 Next we examine how these approaches handle increasing complexity. Here's the same table component, but now with sorting and filtering:
 
 [.row]
-  [! img/complex-table-1.png caption="Idiomatic React"]
+  [! img/complex-table-1.png caption="Modern React"]
     href: complex-table.html
 
   [! img/complex-table-2.png caption="Vanilla TSX"]
@@ -65,47 +76,47 @@ Next we examine how these approaches handle increasing complexity. Here's the sa
     href: complex-table.html#hyper
 
 
-Idiomatic React ([Source](complex-table.html) • [Demo](/hyper/demo/react/complex-table.html)\) extends the ShadCN table with features from Tanstack Table. The difference to Hyper ([Source](complex-table.html#hyper) • [Demo](/hyper/demo/table/complex-table.html)\) becomes apparent:
-
-1. **Excessive boilerplate:** Through Radix UI, Tanstack Table, and TypeScript interfaces. This results in approximately 170 lines of code, versus 40 lines in Hyper. A 75% increase in code and congitive load.
+1. **Modern React** is assembled according to ShadCN's [data table](//ui.shadcn.com/docs/components/data-table) documentation. The bundled JavaScript is **91.3KB**. [Source](complex-table.html) • [Demo](/hyper/demo/react/complex-table.html)
 
-1. **Abstraction layers:** Six layers of abstraction are in play: React, ShadCN, Radix, Tanstack, TypeScript, and Tailwind in 160MB Vite stack. The bundled JavaScript is **91.3KB**. Hyper offers the same at **3.9KB** (1.2KB + 2.7KB for hyper.js).
+2. **Vanilla TSX** uses `useState` and `useMemo` to implement the added functionality, and the HTML is tagged with numerous class names.
 
-1. **Multiple transpilers:** ShadCN table requires six different transpilers: ESBuild, JSX Transform, Rollup, TypeScript, Tailwind, and PostCSS. AI models like Claude and ChatGPT cannot generate preview for this large dependency tree. Hyper runs in the browser without compilation, or with single compilation step for a  production version.
+3. **Hyper** uses semantic HTML with two instance methods for sorting and filtering. The resulting JS is only **3.9KB** minzipped (1.2KB + 2.7KB for hyper.js). [Source](complex-table.html#hyper) • [Demo](/hyper/demo/table/complex-table.html)
 
 
 
-## Phase 3: Reusable components { #reusable }
-Here's a simple dashboard assembled with Hyper:
+## Design systems
+Here's an example dashboard assembled with Hyper:
 
 [image.large]
   large: img/minimalist-big.png
   small: img/minimalist.png
   href: /hyper/demo/dashboard/minimal.html
 
-Now, the same dashboard with a "Ramsian" look:
+[Source](//github.com/nuejs/nue/blob/master/packages/hyper/demo/dashboard/components/0-dashboard.html) • [Demo](/hyper/demo/dashboard/minimal.html)
+
+Here is the same dashboard, but with "Ramsian" look and feel:
 
 [image.large]
   large: img/ramsian-big.png
   small: img/ramsian.png
   href: /hyper/demo/dashboard/ramsian.html
 
-This transformation required zero changes to component code. Just a [30-line CSS file](/hyper/demo/dashboard/ramsian.css) extending the base design system.
-
-Design system switching is impossible with modern React. Lets see why:
+This transformation required zero changes to component code. Just a [32-line CSS file](//github.com/nuejs/nue/blob/master/packages/hyper/demo/dashboard/ramsian.css) extending the base design system. [Demo](/hyper/demo/dashboard/minimal.html)
 
 
-### The problem in React: hardcoded design
-Idiomatic React components aren't reusable across projects with varying design requirements because the design is hardcoded in the component. Even trivial typography changes (`h2` and `p`) require edits to multiple files. In ShadCN, you need to modify [alert-dialog.tsx](//github.com/shadcn-ui/ui/blob/main/apps/v4/registry/new-york-v4/ui/alert-dialog.tsx), [alert.tsx](//github.com/shadcn-ui/ui/blob/main/apps/v4/registry/new-york-v4/ui/alert.tsx), [card.tsx](//github.com/shadcn-ui/ui/blob/main/apps/v4/registry/new-york-v4/ui/card.tsx), [dialog.tsx](//github.com/shadcn-ui/ui/blob/main/apps/v4/registry/new-york-v4/ui/dialog.tsx), [drawer.tsx](//github.com/shadcn-ui/ui/blob/main/apps/v4/registry/new-york-v4/ui/drawer.tsx), and [sheet.tsx](//github.com/shadcn-ui/ui/blob/main/apps/v4/registry/new-york-v4/ui/sheet.tsx). Each file requires understanding of several React idioms (`data-slot`, `{...props}`), utility functions (`cn()`, `clsx()`, `twMerge()`), and primitives like `<AlertDialogPrimitive.Title>` and `<DrawerPrimitive.Description>` until these constructs ultimately map to CSS. Here are the title and description elements in the ShadCN .tsx files:
+### Modern React: tightly coupled design
+This kind of design swap becomes a large programming effort when design choices are coupled into components via CSS-in-JS or Tailwind. For example, in ShadCN, to change the typography of your headings, you need to edit [alert-dialog.tsx](//github.com/shadcn-ui/ui/blob/main/apps/v4/registry/new-york-v4/ui/alert-dialog.tsx), [alert.tsx](//github.com/shadcn-ui/ui/blob/main/apps/v4/registry/new-york-v4/ui/alert.tsx), [card.tsx](//github.com/shadcn-ui/ui/blob/main/apps/v4/registry/new-york-v4/ui/card.tsx), [dialog.tsx](//github.com/shadcn-ui/ui/blob/main/apps/v4/registry/new-york-v4/ui/dialog.tsx), [drawer.tsx](//github.com/shadcn-ui/ui/blob/main/apps/v4/registry/new-york-v4/ui/drawer.tsx), and [sheet.tsx](//github.com/shadcn-ui/ui/blob/main/apps/v4/registry/new-york-v4/ui/sheet.tsx). This requires understanding of idioms like `data-slot`, `{...props}`, `cn()`, `clsx()`, and `twMerge()`. Here's the code for the title and description elements:
 
 [image]
   large: img/shadcn-typo-big.png
   small: img/shadcn-typo.png
 
-This hardcoding creates a scalability issue. For example, ShadCN's "New York" theme duplicates their default theme, resulting in 40,000+ lines of [additional TSX code][new_york]. This is a problem that would have been easily solved with CSS inheritance and cascade.
+Tight coupling can also create a maintenance issue. For example, ShadCN's "New York" theme duplicates their default theme, resulting in 40,000+ lines of [additional TSX code][new_york] to maintain.
+
+While you definitely *can* decouple your styling from your React components, this pattern is rarely seen in real-world applications. Instead, the use of vanilla CSS is often discouraged due to concerns about "global namespace pollution" or other reasons.
 
 
-### Hyper's solution: decoupled design
+### Hyper: decoupled design system
 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:
 
 ```.thin
@@ -125,37 +136,38 @@ By contrast, Hyper colocates your typography concerns into a single CSS file, ac
 }
 ```
 
-This solves three major issues in modern React:
+This solves three key issues in modern React:
 
-1. **Reusable components** across projects and contexts
+1. **Truly reusable components** across projects and styling contexts
 1. **Central design system** easily maintainable from the same place
 1. **Zero boilerplate** due to strict separation of concerns
 
-Nue actually _enforces_ you to build simple, reusable components. Tight coupling in any form: CSS-in-JS, class name abuse, component-specific `<style>` elements, inline `style` attributes, or cryptic utility classes like `dark:bg-lime-400/10 size-[max(100%,2.75rem)]`—is systematically eliminated.
+Nue actually _enforces_ you to external design system. Tight coupling in any form: CSS-in-JS, class name abuse, component-specific `<style>` elements, inline `style` attributes, or cryptic utility classes like `size-[max(100%,2.75rem)] are systematically eliminated.
 
-These simple units are the secret to truly scalable apps:
 
-
-## Phase 4: Scalability { #scalability }
-Here's how simplicity scales: a full-scale [app](//mpa.nuejs.org/app/) lighter than a single React button:
+## Scalability
+Here's how simplicity scales: a full-scale [app](//mpa.nuejs.org/app/) lighter than a React button:
 
 [bunny-video]
   videoId: 39b76cca-e55b-4e9b-8583-b053f9dbd55d
   poster: thumbnail_70d8de32.jpg
   width: 704
   height: 407
 
-Hyper establishes an entirely different paradigm, centered around simplicity:
+Hyper's standard first approach establishes a different paradigm, centered around simplicity:
 
 [image]
   small: /img/react-button-vs-nue-spa.png
   large: /img/react-button-vs-nue-spa-big.png
   size:  704 × 394
   class: tall
 
+Your application starts simple, and remains simple as the project grows. [Source](//github.com/nuejs/nue/tree/master/packages/examples/simple-mpa) • [Demo](//mpa.nuejs.org/app/)
+
+
 [.note]
   ### Note
-  The above app is still written with Nue JS, but when converted to Hyper, the app becomes even smaller with virtually zero boilerplate.
+  The above app is written with [Nue JS](//github.com/nuejs/nue/tree/master/packages/nuejs), which Hyper eventually replaces. When converted to Hyper, the app is even smaller due to smaller executable and smaller components.
 
 - - -
 
@@ -165,7 +177,7 @@ First, install [Bun](//bun.sh):
 
 ```sh
 # Install Bun
-curl -fsSL https://bun.sh/install | bash
+curl -fsSL //bun.sh/install | bash
 ```
 
 Hyper uses Bun for its superior web standards support, built-in JavaScript bundler, minifier, and crushing performance. Check details on why we prefer Bun over Node in our [FAQ](/docs/faq.html).
@@ -185,9 +197,13 @@ Check examples, API docs, and language syntax from [Hyper documentation](/hyper/
 
 ## FAQ
 
+### How is this different from Svelte and Vue?
+While Svelte and Vue both offer a more lightweight development environment than React, they still diverge from Hyper's standards-first vision. Though they provide better separation of concerns with their component structure, many popular patterns in these ecosystems still encourage coupling design with components through scoped CSS, CSS-in-JS libraries, or Tailwind integration.
+
 
 ### What is Nue?
-Nue is the "framework" (think Next.js + Astro, but simpler) and Hyper is the "language" (think React, but simpler). Both are developed under the same [monorepo](https://github.com/nuejs/nue/tree/master/packages/). Here's how the product hierarchy will eventually look like:
+Nue is a website/webapp generator based on [Nue JS](//github.com/nuejs/nue/tree/master/packages/nuejs) templating. Hyper is the next evolution of Nue JS, which it will replace. All Nue projects reside under the same [monorepo](//github.com/nuejs/nue/tree/master/packages/). Here's how the product hierarchy will eventually look:
+
 
 [image]
   large: img/branding-big.png
@@ -196,8 +212,22 @@ Nue is the "framework" (think Next.js + Astro, but simpler) and Hyper is the "la
   width: 400
 
 
+### Isn't this just another framework?
+Hyper takes a different approach than what this question suggests. Rather than adding to the ecosystem of tools and abstractions, Hyper aims to reduce complexity by returning to web standards. It eliminates the need for many specialized frameworks, libraries, and practices that have emerged to solve challenges within the React ecosystem. Our goal is to offer a simpler path reducing the need for constantly learning new frameworks and tools.
+
+
+### Why are standards so important?
+Standards offer significant long-term benefits:
+
+1. **Timeless skills**: Knowledge of HTML, CSS, and JavaScript fundamentals remains valuable across decades, while framework-specific knowledge can become outdated.
+
+2. **Sustainable products**: Applications built primarily with web standards tend to require less frequent and less disruptive rewrites.
+
+Consider how React's ecosystem has evolved over time: Class components gave way to hooks, state management shifted from Redux to Context to various alternatives like Zustand and Jotai, and styling approaches continue to evolve from Styled Components to Emotion to CSS Modules and beyond. Each shift requires developers to learn new patterns and often refactor existing code.
+
+
 ### What's next in line?
-We make Hyper more easily accessible to everyone including backend developers, beginners, and AI models in two phases:
+We make Hyper easily accessible to everyone including backend developers, beginners, and AI models in two phases:
 
 
 #### Full-stack applications
@@ -224,40 +254,22 @@ A way for you and AI's to generate UIs with minimal effort:
 Estimate: 4-5 months.
 
 
-### Isn't this just another framework?
-Hyper is quite the opposite of what this question suggests. It ditches hundreds of frameworks/tools/languages/idioms/libraries/practises that attempt to solve problems they introduced within the idiomatic React stack. Hyper puts you on a whole new trajectory where the need for endless frameworks (and this question itself) becomes obsolete. The answer is: simplicity scales. Less is More. KISS.
+### How can a small library challenge React's dominance?
+Gradually and strategically. To succeed, we need to address two key challenges:
 
+1. **Developer perception**: Many frontend developers have come to view abstraction layers as essential. As Hyper demonstrates how professional UIs can be built without these complexities, this perception will shift.
 
-### Why are standards so important?
-Standards offer two invaluable benefits:
-
-1. You'll learn skills that last forever
-2. Your products will last forever
+2. **Product completion**: Several critical pieces remain in development, particularly solid starter templates and comprehensive design systems.
 
-Think of all React-specific technologies that are no longer "hot" and will eventually turn into technical debt. Class components, Higher Order Components, createClass. Redux/Context/Zustand/Jotai, Webpack, Styled Components/Emotion, Material UI/Chakra... It's an endless cycle to keep your skills and products fresh.
-
-Standards are forever.
-
-
-### What do you mean by "generative"?
-The idea of generative HTML assembly unveils once Hyper, and the core UI primitives are ready. After that, both you and AI models can rapidly generate user interfaces with simple, minimal syntax. No unnecessary junk in your way.
-
-
-### Can Hyper actually challenge the status quo?
-Absolutely. To succeed, we need to address two things:
-
-1. **Developer perception**: Frontend developers view layers of abstraction as essential. As Hyper demonstrates how professional UIs can be generated without them, this perception will shift.
-
-2. **Finish the product**: Several critical pieces remain in development, particularly the generative approach and design systems.
-
-But once these challenges are addressed, Hyper becomes unstoppable.
+Once these challenges are addressed, Hyper has the potential to gain significant momentum.
 
 
 ### Isn't the name already in use?
 Yes, "Hyper" a Rust HTTP library, an Electron terminal emulator, and now a HTML-based language syntax. Each serving a unique purpose in different contexts.
 
 ### Can I contribute?
-Yes. Especially ideas that don't interfere with the core architecture. If you have 20+ years of experience with CSS and no wasted years in React, I'd particularly love to connect with you!
+Yes. Especially ideas that don't interfere with the core architecture. If you have deep CSS expertise, especially those with experience in standards-first approaches, I'd particularly love to connect with you!
+
 
 ### Can I give feedback?
 Definitely! Join our mailing list to be notified when Hyper officially launches. You can provide feedback as you join.
