前端快讯｜JavaScript 新框架 Nue 发布，代码量减少90%
【前端快讯 10月01日】近日，独立开发者 Tero Piirainen 推出了一个名为 Nue 的极简前端开发工具，在圈子里引发了激烈讨论。
Tero Piirainen 在 Hacker News 上的帖子中提到，它过去 12 个月里，他一直从事项目开发工作，最近还转为全职。他的开发目标有两个：
Nuejs：一个用于构建用户界面的小型（压缩后 2.3kb）JavaScript 库。它类似于 React 和 Vue，但去掉了 hooks、effects、props、portals、watchers、injects、suspensions 等各种抽象元素。只要开发者具备 HTML、CSS 和 JavaScript 方面的基础知识，就完全可以轻松上手。它支持服务器端渲染和客户端响应式组件，设计灵感来自 Vue 2.0 和 Riot.js（Tero Piirainen 本人也是 Riot 的原作者）。 Nue 工具集：在完成之后，Nue 将能够取代 Vite、Next.js 和 Astro 等系统，这也是本项目的最终发展目标
Tero Piirainen 计划在 2024 年 3 月之前完成所有工具的准备工作，但具体时间取决于问题数量、开源维护工作量，以及他自己的判断水平。目前，Nue 已在 GitHub 上开源，并遵循 MIT 许可证。
本文将从以下几个方面来探索 Nue：
Nue 的由来 Nue 的优势 Nue 的应用场景
1.Nue 的由来
Tero Piirainen 表示，他创建 Nue 的主要原因是他对于当前 Web 开发现状并不满意，主要问题包括相关工具太复杂、代码难以理解、编译时间长、网站过于臃肿等等。
Tero Piirainen 计划回到“美好的过去”，以极简化方式从零开始构建一切，并利用了渐进式增强、关注点分离和语义网页设计等创新设计。Nue 是 Tero Piirainen 改变现状的一次雄心勃勃的尝试，他希望能为 JS 和 UX 开发者们提供极简化的工具。它强调恢复 Web 标准模型的荣光，并引入现代创新的力量。Nue 想要让 Web 开发再次变得有趣。
Tero Piirainen 表示，Nue 的灵感主要来自 Jarred Sumner 开发的 Bun。这是一款新的 JS 运行时、捆绑器、测试运行器外加 NPM 兼容型包管理器。Tero Piirainen 认为，Bun 希望让 JavaScript 变得更快，而 Nue 希望让前端开发变得更快。Nue + Bun 将成为面向前端开发者的完美组合。值得一提的是，Jarred Sumner 和 Tero Piirainen 一样，也是一个单兵作战的开发者。
2.Nue 的优势
2.1.用更少的代码构建用户界面
Nue 的最大优势就是以更少的代码实现相同的效果。项目中，实现同样的功能，代码量在 2 到 10 倍的差异并不罕见。以用 Nue 编写的自定义列表框组件为例：React 版本需要使用 2500 行 JavaScript 代码，Nue 版本则能够在保持 50% 到 80% 功能的前提下，使代码量减少 90%。
2.2.HTML 模板语法
Nue 使用基于 HTML 的模板语法：
<div class="{ type }">
<img src="{ img }">
<aside>
<h3>{ title }</h3>
<p :if="desc">{ desc }</p>
<slot/>
</aside>
</div>
React 声称自己是 "Just JavaScript"，而 Nue 则可以被视为 "Just HTML"，非常适合注重交互设计、可访问性和用户体验的用户体验开发人员。
2.3.出色的扩展性
Nue 具有出色扩展性的三个原因：
关注点分离，易于阅读的代码比“一团乱麻”的代码更易于扩展。 极简主义，100 行代码肯定比 1000 行代码更易于扩展。 人员分离，当 UX 开发人员专注于前端，而 JS/TS 开发人员专注于前端后端时，团队技能就会达到最佳平衡。
当用户体验开发人员和 JavaScript 开发人员并行工作而不互相干扰时，就能取得最佳效果。
2.4.样式解耦
Nue 并不提倡使用 Scoped CSS、样式属性、Tailwind 或其他 CSS-in-JS 框架。相反，它认为最好将样式跟布局和结构区分开来，主要是因为：
更高的代码可复用率：因为样式不会被硬编码进组件，所以同一组件可以根据页面或上下文而呈现出不同效果。 更好的代码可维护性：纯 HTML 或纯 CSS 代码，其理解难度显然大大低于乱七八糟的组合代码，更容易阅读。 更快的页面加载速度：通过对样式解耦，开发者可以轻松从辅助 CSS 中提取主 CSS，并将 HTML 页面大小保持在关键的 14kb 限制以内。
2.5.四种组件类型
Nue 拥有丰富的组件模型，允许开发者使用不同类型的组件构建各种应用程序：
服务器组件：在服务端渲染，可以帮助我们构建起以内容为中心的网站，无需 JavaScript 即可提升加载速度，并可以被搜索引擎的抓取。 响应式组件：在客户端渲染，可以帮助开发者构建动态模块或单页应用程序。 混合式组件：一部分在服务器端渲染、一部分在客户端渲染。这类组件能帮助开发者构建响应式、SEO 友好的组件，例如视频标签或图片库。 通用性组件：既可以在服务器端使用，又可以在客户端使用，且效果相同。
2.5.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>
有了库文件，你的文件系统层次结构看起来更整洁，你需要更少的模板代码来将连接在一起的片段串联起来。它们有助于为其他开发人员打包库。
2.6.工具组合更简单
NueJS 提供了一个用于服务器端渲染的简单 render() 函数和用于为浏览器生成组件的 compile() 函数。开发者不需要 Webpack 或 Vite 等大型捆绑程序来控制自己的开发环境。只需将 Nue 导入您的项目即可。
注意：如果开发者需要打理几百上千个 NPM 依赖项，那么在业务模型层上使用捆绑器确实有其现实意义。Bun 和 esbuild 也是性能极佳的选择
3.Nue 的应用场景
Nue 是一款多功能工具，支持服务器端和客户端渲染，可帮助开发者构建以内容为中心的网站和响应式单页面应用程序。
UI 库开发：能够为响应式前端或服务器生成的内容创建可复用组件。 渐进增强 Nuejs：Nuejs 是一个完美的微型库，可通过动态组件或模块，增强以内容为中心的网站。 静态网站生成器：只需将其导入到您的项目中，即可进行渲染，无需捆绑程序。 单页面应用程序：与即将推出的 Nue MVC 一起构建更简单、更可扩展的应用程序。 模板化 Nue：是生成网站和 HTML 电子邮件的通用工具。
4.最后
Nue 是一个创新项目，在社区中得到很多开发者的肯定，尽管当前 Web 一直在不断变化，但层出不穷的新框架仍然不能让开发者满意，当前主流框架的实现原理和语法有都惊人的相似。
像 Bun 的出现，重点解决了用户对 Node.js 生态依赖过重的问题，可以更多地关注业务实现。虽然它还在快速发展，但是其功能仍然不能另所有开发者满意。
最后，建议开发者持乐观态度。新框架的出现，是一种思想的迸发，更是对 Web 开发生态的贡献，不管结果如何，过程中付出的一切都值得我们肯定！
大家都在看