Who can overthrow the authority of React?

Yeom suyun - Oct 6 '23 - - Dev Community

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>
Enter fullscreen mode Exit fullscreen mode

GitHub logo nuejs / nue

The UX Framework for the Web

Nue  test



What is Nue?

Nue is a web framework for UX developers. What used to take a React specialist, and an absurd amount of JavaScript can now be done by a UX developer and a small amount of CSS.

Learn how it works

Who is it for?

Nue is designed for the following people:

  1. UX developers: who natively jump between Figma and CSS without confusing designer-developer handoff processes in the way.

  2. Beginner web developers: who want to skip the redundant frontend layers and start building websites quickly with HTML, CSS, and JavaScript.

  3. Experienced JS developers: frustrated with the absurd amount of layers in the React stack and look for simpler ways to develop professional websites.

  4. Designers: aiming to transfer their design skills to CSS code, but find the React/JavaScript/CSS-in-JS ecosystem impossible to grasp

  5. Parents & Teachers: who wants to educate people how the web works

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>
  )
}
Enter fullscreen mode Exit fullscreen mode
<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>
Enter fullscreen mode Exit fullscreen mode

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?

. . . . . . . . . . . . . . . . .
Terabox Video Player