Nue JS • 介绍

• 编程语言

文章目录

  • 前言
  • 一、什么是 Nue JS
    • 1.1 用更少的代码构建用户界面
    • 1.2 “这只是 HTML”
    • 1.3 按比例构建
    • 1.4 解耦样式
    • 1.5 四种组件
    • 1.6 UI库文件
    • 1.7 更简单的工具
  • 二、入门
    • 1.先决条件
    • 2. 创建方式
      • 2.1 create-nue
      • 2.2 npm 安装
    • 3. 模板语法
      • 3.1 **括号**将替换为相应组件实例中的**属性值**
      • 3.2 输出 HTML，需要使用双括号
      • 3.3 @click 以@符号开头的属性定义事件处理程序。这些是在用户交互（如单击、按键或鼠标移动）时调用的 JavaScript 函数。
      • 3.4 if else 语句
      • 3.5 :for 循环
      • 3.6 使用属性渲染子组件
      • 3.7 @mousemove 鼠标追踪
      • 3.8 form 表单 输入值更改时更新视图
      • 3.9 函数调用
  • 三 、未推出

前言

据悉，Nue 源自德语单词 neue，与英语中的“new”同义。你也可以叫它 ’虐.js‘

一位构建开源项目、技术产品和初创公司方面拥有 25 年以上的经验的Tero Piirainen ，来自赫尔辛基的前端开发人员对现在前端的构建方式并不满意。工具复杂，代码难以理解，编译时间长，网站过于臃肿。完成项目需要太多的时间和精力，于是自己创建了一个新轮子Nue JS。 它支持服务器端渲染和客户端响应式组件，设计灵感来自 Vue 2.0 和 Riot.js（Piirainen 本人也是 Riot 的原作者）。现在是 Nue 的唯一开发者。

具体来说，Nue 有三大优势：改善开发者体验；加快项目进度；加快页面加载速度。而其最大的亮点在于，它能将用户界面代码量控制在其他同类方案的十分之一。

在这里插入图片描述

作者在卡利奥的工作场所

一、什么是 Nue JS

Nue JS 是一个非常小的（压缩后 2.3kb）JavaScript 库，用于构建用户界面。它是Nue工具集的核心。它就像Vue.js、React.js 或 Svelte，但没有hooks、effects、props、portals、watchers、injects、suspensions等各种抽象元素。学习 HTML、CSS 和 JavaScript 的基础知识，就可以开始了。

Nue 是一个强大的 React、Vue、Next.js、Vite 和 Astro 替代品。它可能会改变您的web开发方式。” />

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

Nue 的最大好处是您需要更少的代码来完成同样的事情。

例如，这是一个用 Nue 编写的自定义列表框组件：

请添加图片描述

React 版本有2500 行 JavaScript。即使具有 50-80% 的功能，Nue 版本也小了大约十倍：

编码风格的差异

请添加图片描述

1.2 “这只是 HTML”

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

  Nue JS • 介绍
  
    
{ title }

    
{ desc }

虽然 React 声称“Just JavaScript”，但 Nue 可以被认为是“Just HTML”

1.3 按比例构建

Nue 为前端开发带来新水平的可扩展性的三个原因：

  1. 关注点分离，易于阅读的代码比“意大利面条代码”更容易扩展。

  2. 极简主义，小型代码库更容易维护和扩展，并且出现错误的空间更小。一百行代码比一千行代码更容易扩展。

  3. 人才分离，当人们专注于自己的专业领域时，交付速度会更快：内容创建者专注于内容，UX 开发人员进行交互设计，JS 开发人员在前端后端工作。您的团队技能就会达到最佳平衡：

    请添加图片描述

1.4 解耦样式

请添加图片描述

由于紧密耦合，Nue 不提倡使用作用域 CSS、Tailwind 或其他 CSS-in-JS 框架。最好将样式与布局和结构分开，因为：

  1. 更多可重用代码：当样式未硬编码到组件时，同一组件可能会根据页面或上下文而看起来有所不同。

  2. 没有意大利面条式代码：纯 HTML 或纯 CSS 比混合意大利面条式代码更容易阅读

    请添加图片描述

  3. 更快的页面加载：通过解耦样式，可以更轻松地从辅助 CSS 中提取主 CSS，并将 HTML 页面保持在关键的 14kb 限制以下。

意大利面条代码是对非结构化且难以维护的源代码的贬义词。意大利面条式代码可能是由多种因素造成的，包括项目需求不稳定、缺乏编程风格规则以及软件工程师的技能和经验不足。

1.5 四种组件

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

  1. 服务器组件在服务器上呈现。它们可以帮助您构建以内容为中心的网站，无需 JavaScript 即可加载速度更快，并且可以被搜索引擎抓取。

    服务器端不需要反应性。没有用户交互，也没有 DOM 更新。没有动态更新或生命周期方法。每次渲染仅渲染给定的数据。如果定义了该方法，则在创建组件时仅constructor调用该方法。

    服务器端渲染通过以下render方法进行：

	render(template: string, data?: Object, deps?: Array)		template要渲染的基于 HTML 的 Nue 代码	data模板要使用的数据或数据模型。数据可以包含任意数量的属性和方法	deps更复杂的应用程序中的嵌套/依赖组件的数组
  1. 反应式组件在客户端上呈现。它们帮助您构建动态岛或单页​​应用程序。

    反应式组件是交互式的：它们响应用户在浏览器上的鼠标和键盘事件。

    创建应用程序实例createApp() 方法：

	createApp(	  component: Component,	  data?: object,	  deps?: Array) : App		component要挂载的根组件	data组件的可选数据或数据模型。数据可以包含任意数量的属性和方法	deps更复杂的应用程序中嵌套/依赖组件的可选数组。

  1. 混合组件 其中一些部分在服务器上渲染，一些部分在客户端上渲染。这些组件可帮助您构建响应式、SEO 友好的组件，例如视频标签或图片库。

  2. 通用组件 在服务器端和客户端上运行相同

1.6 UI库文件

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



  import { someMethod } from './util.js'




  ...
... ...

1.7 更简单的工具

Nue JS 带有一个简单的render服务器端渲染功能和一个compile为浏览器生成组件的功能。您不需要像Webpack或Vite这样的大型捆绑程序来控制您的开发环境。只需将 Nue 导入到您的项目中即可。

二、入门

1.先决条件

  • 熟悉命令行
  • 安装Bun或Node
  • VSCode 扩展 Visual Studio 用户（可选）

2. 创建方式

2.1 create-nue

create-nue 存储库是熟悉 Nue JS 的最佳方式。获取方式如下：

# clone the repository
git clone https://github.com/nuejs/create-nue.git --depth 1

# cd to your newly created app
cd create-nue

# remove git directory
rm -rf .git

# 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"

启动命令后，您将在该文件夹下看到一个演示create-nue/www，它在端口 8080 上本地提供。

随着Nue 工具集的进步，create-nue 会不断更新。最终，演示网站是由即将推出的 Web 应用程序构建器 (Nuekit) 生成的，但目前，它只是用于了解 Nue JS 工作原理的示例脚本。

正确的npm create nue 命令即将到来

2.2 npm 安装

通过 npm、pnpm 或 Bun 安装 Nue JS

npm install nuejs-core

安装后，您可以将主要功能导入 JavaScript 或 TypeScript 文件中：

import { render, parse, compile } from 'nuejs-core'

3. 模板语法

3.1 括号将替换为相应组件实例中的属性值

单括号将数据解释为纯文本，而不是 HTML


  Hello, {names}!
   names = 'Nue'

3.2 输出 HTML，需要使用双括号

3.3 @click 以@符号开头的属性定义事件处理程序。这些是在用户交互（如单击、按键或鼠标移动）时调用的 JavaScript 函数。

3.4 if else 语句

3.5 :for 循环


  
    
    
  • 
      {item}
    
    • 
  

  
    arr = [1, 2, 3]

3.6 使用属性渲染子组件


  { a } + { b } =
  
  
    // instance variables
    a = 10
    b = 100
  





  { a + b }

3.7 @mousemove 鼠标追踪


  Position: { x } x { y }
  
    h = 10
    x = 0
    y = 0

    track(event) {
      this.x = event.clientX
      this.y = event.clientY
    }

3.8 form 表单 输入值更改时更新视图


  
  
  
{a} + {b} = {1*a + 1*b} 

  
    a = 1
    b = 2

3.9 函数调用

  {fun()}
  
    arr = [1, 2, 3]
      fun() {
        return '123456'
      }

三 、未推出

Nue JS 是这个生态的核心组件，其他部分还没完成：

  • Nue CSS： Tailwind和其他CSS-in-JS库的基于标准的替代方案 ， 恢复级联​​样式的力量
  • Nue MVC：模型-视图-控制器：将视图与业务逻辑分开。 构建可扩展的单页应用程序
  • Nue UI： 小型、基于标准、主题化的 UI 库。Markdown、MDX和Markdoc的丰富、人性化替代品 用于快速 UI 开发的可复用组件
  • Nuemark：Markdown 风格带来丰富的内容。恢复内容优先的 Web 开发方法。Headless UI和Shadcn UI的语义替代方案
  • Nuekit：使用减少 10 倍的代码构建网站和 Web 应用程序

作者表示，一旦所有子项目完成，Nue 将成为 Vite、Next.js 和 Astro 等项目的重要替代品。

目标是在 2024 年 3 月之前发布所有工具。

请添加图片描述

本文来自网络，不代表协通编程立场，如若转载，请注明出处：https://net2asp.com/a86d615215.html

赞 (0)
« 上一篇 1天前
下一篇 » 1天前

相关推荐