Hello,大家好,我是 Sunday。
前端又上线了一个全新的框架,叫做 nue.js
,号称可以取代 Vue、React、Next、Vite
,并且可以改变目前前端的开发方式:
这个框架是在 2023-09-13 日进行的第一次提交。我在 21 号看到它的时候,已经有了 2300 的 star。
最近又听到朋友提起了它,所以专门到 github 上看了一眼,发现已经有了 3700 的 star 了,这个速度可以说非常恐怖了。
再加上它这么高调的宣传文案, 所以咱们今天就来看看这个 nue.js
它到底为前端带来了什么样的全新体验。
什么是 nue.js?
NueJS 是一个非常小的(压缩后 2.3kb)JavaScript 库,用于构建 Web 界面。 它是即将推出的 Nue 生态系统的核心。
它就像 Vue.js、React.js 或 Svelte,但没有hooks, effects, props, portals, watchers, provides, injects, suspension 这些抽象概念。
了解 HTML、CSS 和 JavaScript 的基础知识,就可以开始了。
它带来了哪些改变?
nue.js 期望通过更少的代码来完成相同的功能。官方给出了对应的代码量对比。
在相同的功能下:
react 需要 2537 行代码:
Vue 需要 1913 行代码:
Svelte 需要 1286 行代码:
而 nue 只需要 208 行代码,比 react 少了 10 倍:
那么下面,咱们就通过一个 demo 来看看 nue.js 究竟是怎么使用的。
创建项目
我们可以通过一种简单的方式,来快速获取 nue.js
的基础项目:
bash
# clone the repository
git clone https://github.com/nuejs/create-nue.git
# cd to your newly created app
cd create-nue
# install dependencies
npm install
# Build demo site and start a HTTP server
npm run start
# Open the demo on the browser
open "http://localhost:8080"
这样你可以看到一个基本的运行页面
代码结构
项目运行起来之后,接下来咱们来看下它的代码结构。
nue 的项目代码都被放到了 src 文件夹里面,并且以 .nue
结尾。
我们目前看到的页面效果就是 layout.nue
文件:
解决代码可读性问题
默认情况下,VSCode 是无法解析 .nue
文件的,所以会导致,我们看到的代码是这样的,没有任何的色彩:
想要解决这个问题,可以安装专门的插件 Nue Language Support
,这样可以使 VSCode
具备解析的能力
阅读代码-组件定义
根据我们之前的开发经验,可以看出 layout.nue 中代码主要由两个组件组成:
- 第一是:site-header
- 第二是:item-list
这两个组件都被定义在 components.nue 文件中
那么接下来,我们来观察看 components.nue 文件的代码:
通过这个代码我们可以发现,在 nue 中,通过 @name="component-name"
的这种方式来定义组件。多个组件是可以直接被写入到一个 .nue
文件中的。
阅读代码-组件逻辑
在 item-list
组件中定义了 循环逻辑 咱们可以来看一下。
这个循环逻辑由两部分组成:
- 第一是:
:for
这里咱们姑且把它叫做 指令
css
<li :for="el in data">
<h3>{ el.name }</h3>
<p>{ el.desc }</p>
</li>
- 第二是:
script
代码内容,这里定义了 data 的数据来源
xml
<script>
constructor({ items }) {
this.data = items.map(el => {
const [name, desc] = Object.entries(el)[0]
return { name, desc }
})
}
</script>
由此可见,data 的数据其实是由 items
生成的。那么这个 items
又是从何而来的呢?
阅读代码-数据定义
咱们返回 layout.nue
文件,查看 item-list
的使用,可以发现在 item-list
中有一个 props
的概念:
它指定 items 其实是 projects
。而 projects
则是被定义在 content.data
文件中的。也就是说:.data
文件就是 nue
中定义状态(数据)的地方
代码逻辑总结
那么根据以上内容,咱们可以知道。在 nue
中:
- 多个组件可以定义在一个
.nue
文件中 - 组件通过
@name="component-name"
进行命名 nue
中具备类似指令的概念:for
,同时类似 jsx(html+js混写)的概念script 标签内代码
- 组件具备 prop 的概念,同时状态会被定义在单独的
.data
文件中
个人对 NueJS 的看法
截止到目前,咱们对 nue.js 的一些简单了解。其实可以看出 nue.js 中是借鉴了一些 vue 或者 react 语法风格的。
同时 nue.js 把数据和视图进行了更加深度的分离,只不过这样的一种分离可能会导致在实际的项目开发中出现:来回切换视图和数据文件的情况。
并且,根据 nue.js 提供的示例代码,并没有看出它比 vue 或者 react 简单的地方,当然这也有可能是因为我对 nue.js 理解的还比较浅的原因导致的。
对于目前的前端而言,各种框架一直都是层出不穷的:Vue、React、Svelte 等等。 NueJS 想要在国内占据一席之地,甚至是吃掉一部分 Vue 或者 React 的市场,估计还有很长的路要走~~~