卷王之王：快来看看前端出的新框架！

最近前端又出来一个新框架/库，名为 nue.js ，到今天已超过 2000 个star。

什么是 Nue JS?

Nue JS 是一个非常小的（压缩后 2.3kb）JavaScript 库，用于构建 Web 界面。它是即将推出的 Nue 生态系统的核心。它就像 Vue.js、React.js 或 Svelte，但没有 hooks, effects, props, portals, watchers, provides, injects, suspension 这些抽象概念。了解 HTML、CSS 和 JavaScript 的基础知识，就可以开始了。

用更少的代码构建用户界面

它表示，Nue 最大的好处是你需要更少的代码来完成同样的事情：

同样一个 listBox 组件，react需要 2537 行，vue 需要 1913 行，svelte 需要 1286 行，Nue 只需要 208 行，比 react 小 10 倍。

仅仅是HTML

Nue 使用基于 HTML 的模板语法：

<div @name="media-object" class="{ type }">
  <img src="{ img }">
  <aside>
    <h3>{ title }</h3>
    <p :if="desc">{ desc }</p>
    <slot/>
  </aside>
</div>

React 和 JSX 声称是 “Just JavaScript” ，但 Nue 可以被认为是 “Just HTML” 。

按比例构建

Nue 具有出色扩展性的三个原因：

关注点分离，易于理解的代码比“意大利面条代码”更容易扩展
极简主义，一百行代码比一千行代码更容易扩展
人才分离，当 UX 开发人员专注于前端，而 JS/TS 开发人员专注于前端后端时，团队技能就会达到最佳平衡：

解耦样式

Nue不提倡使用 Scoped CSS、样式属性、Tailwind 或其他 CSS-in-JS 体操：

更多可重用代码：当样式未硬编码到组件时，同一组件可能会根据页面或上下文而看起来有所不同。
没有意大利面条式代码：纯 HTML 或纯 CSS 比混合意大利面条式代码更容易阅读
更快的页面加载：通过解耦样式，可以更轻松地从辅助 CSS 中提取主 CSS，并将 HTML 页面保持在关键的14kb 限制以下。

反应式和同构

Nue 拥有丰富的组件模型，它允许您使用不同类型的组件创建各种应用程序：

服务器组件在服务器上呈现。它们可以帮助您构建以内容为中心的网站，无需 JavaScript 即可加载速度更快，并且可以被搜索引擎抓取。
反应式组件在客户端上呈现。它们帮助您构建动态岛或单页应用程序。
混合组件部分在服务器端呈现，部分在客户端呈现。这些组件可帮助您构建响应式、SEO 友好的组件，例如视频标签或图片库。
通用组件在服务器端和客户端上使用相同的方式。

UI库文件

Nue 允许您在单个文件上定义多个组件，这是将相关组件组合在一起并简化依赖关系管理的好方法。

<!-- shared variables and methods -->
<script>
  import { someMethod } from './util.js'
</script>

<!-- first component -->
<article @name="todo">
  ...
</article>

<!-- second component -->
<div @name="todo-item">
  ...
</div>

<!-- third component -->
<time @name="cute-date">
  ...
</time>