I recently discovered an interesting project called nuejs on GitHub.
The syntax of this front-end framework, which has gained over 3k stars in just a few weeks, is quite interesting.

<button @click="count++">
  <p :if="!count">No clicks yet</p>
  <p :else-if="count == 1">First click!</p>
  <p :else-if="count == 2">Nice. Another one.</p>
  <p :else>Clicks: { count }</p>
  <script>count = 0</script>
</button>

nuejs / nuejs

Build user interfaces with cleaner code. Alternative to React, Vue, and Svelte

Backstory • Documentation • Examples • Getting started

What is Nue JS?

Nue JS is an exceptionally small (2.3kb minzipped) JavaScript library for building web interfaces. It is the core of the upcoming Nue toolset. It’s like Vue.js, React.js, or Svelte but there are no hooks, effects, props, portals, watchers, provides, injects, suspension, or other unusual abstractions on your way. Learn the basics of HTML, CSS, and JavaScript and you are good to go.

Build user interfaces with cleaner code

With Nue your UI code is cleaner and usually smaller:

It's not unusual to see 2x-10x differences in the amount of code you need to write.

"It's just HTML"

Nue uses an HTML-based template syntax:

<div class="{ type }">
  <img src="{ img }">
  <aside>
    <h3>{ title }</h3>
    <p :if

…

View on GitHub

The code above is an example of implementing a simple counter, and if we write it in React and Svelte(with Runes), it will look like the following.

import { useState } from "react"

export function App() {
  const [count, set_count] = useState(0)

  return (
    <button onClick={() => set_count(count + 1)}>
      {!count
        ? <p>No clicks yet</p>
        : count == 1
          ? <p>First click!</p>
          : count == 2
            ? <p>Nice. Another one.</p>
            : <p>Clicks: { count }</p>}
    </button>
  )
}

<script>
let count = $state(0)
</script>

<button on:click={() => count++}>
  {#if !count}
    <p>No clicks yet</p>
  {:else if count == 1}
    <p>First click!</p>
  {:else if count == 2}
    <p>Nice. Another one.</p>
  {:else}
    <p>Clicks: { count }</p>
  {/if}
</button>

Recently, Svelte also released the runes system of Svelte5 through the article "Rethinking 'rethinking reactivity'", and I thought about what features are necessary for a front-end framework while looking at these things.

What are the requirements for declaratively embedding data in HTML?

React gained its current popularity by providing a way to write UIs in declarative programming, unlike the traditional methods like jQuery.
React and modern front-end frameworks implement binding between JS data and DOM elements and conditional rendering or list iteration in their own way.
My thoughts on the essential features of modern front-end frameworks

I believe that the following features are essential for modern front-end frameworks

• JS to Text: The value of a JavaScript variable can be displayed - in HTML, and the value will be automatically updated if it changes.
• Components: JavaScript and HTML code can be managed as components and used like HTML.
• Dynamic rendering: Conditional rendering and iterative rendering are possible with statements such as if statements and for loops.
• State management: Callbacks are called based on the lifecycle of components and changes in JavaScript values.
• SSR support: In addition to SSR, there are concepts that I am not familiar with, such as resumability, islands, and server components, but it provides features that support SSR or its superior user experience and SEO optimization.

These features are so common that they don't even need to be listed. However, I want to make it clear that the controversial methods, such as virtual DOM, state management, and signals, are not that important.
Of course, the most important thing is "What framework does the company that employs us use?" However, the following are the criteria for judging frameworks as follows.

• Can the function be implemented and the code analyzed in a simpler and more convenient way?
• Can it provide faster loading times?
• Does it have a larger ecosystem and how many different features can be implemented?
• To what extent can it be optimized if necessary?

Thoughts on React

jQuery is treated as a relic of the past since its release in 2006, but it is still being updated regularly, and surprisingly, 94.5% of websites that use JavaScript libraries still use jQuery.
However, if someone asks us what will happen if we use jQuery for a new project, we can confidently say that we should never use it for several reasons.
But what about React?
Of course, React is still a viable library with a huge ecosystem and a variety of third-party libraries.
However, relatively new frameworks such as Svelte and Solid highlight React's shortcomings in some areas such as performance and productivity, and new frameworks such as nue are also joining this competition.
However, React's position is still solid, and it does not seem to change its position even after a few years, according to the state of js survey results.
When I see React, I think of Einstein's quote, "To punish me for my contempt for authority, fate made me an authority myself."
React succeeded in overthrowing the authority of jQuery, but who can overthrow the authority of React?