首页 > 其他分享 >前端又出新框架了,你还学得动吗?

前端又出新框架了,你还学得动吗?

时间:2024-10-30 10:19:31浏览次数:3  
标签:学得动 前端 JS HTML 组件 Nue 出新 代码 CSS

最近前端又出来一个新框架/库,名为nue.js。一周前的9.13号提交了第一个commit,到今天已超过2000个star。

官网首页截图

翻译一下:

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

What is 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 具有出色扩展性的三个原因:

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

解耦样式

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

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

反应式和同构

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

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

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>

使用库文件,您的文件系统层次结构看起来更干净,并且您需要更少的样板代码将连接的部分连接在一起。他们帮助为其他人打包库。

更简单的工具

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

如果应用程序因大量依赖项而变得更加复杂,可以在业务模型上使用打包器。Bunesbuild是很棒的高性能选择。

用例

Nue JS是一款多功能工具,支持服务器端和客户端渲染,可帮助您构建以内容为中心的网站和反应式单页应用程序。

  1. UI 库开发:为反应式前端或服务器生成的内容创建可重用组件。
  2. 渐进式增强:Nue JS 是一个完美的微型库,可通过动态组件或“岛”增强以内容为中心的网站
  3. 静态网站生成器:只需将其导入您的项目即可准备渲染。不需要捆绑器。
  4. 单页应用程序:与即将推出的Nue MVC项目一起构建更简单、更具可扩展性的应用程序。
  5. Template Nue:是一个用于生成网站和 HTML 电子邮件的通用工具。

原文链接:https://juejin.cn/post/7280747833371705405

标签:学得动,前端,JS,HTML,组件,Nue,出新,代码,CSS
From: https://blog.csdn.net/qq_66118130/article/details/143357951

相关文章

  • 前端开发者必学:mo.js动画库
    前端开发者必学:mo.js动画库前言在当今的网页设计中,动态效果和交互性是提升用户体验的关键因素。mo.js,一个轻量级的JavaScript动画库,为前端开发者提供了一种简单而强大的方法来创建引人注目的动画效果。本文将向您介绍mo.js的基本概念、特点、使用场景以及如何在Vue环境......
  • React前端框架
    1.React简介1.1React的起源和发展React是由Facebook的内部项目发展而来,最初用于构建Instagram的网站。2013年5月,React正式对外开源,迅速以其高效的性能和灵活的组件化特点受到开发者的广泛关注和使用。React的核心库主要关注于构建UI,因此常被认为是MVC(模型......
  • 【前端】在 Next.js 开发服务器中应该如何配置 HTTPS?
    在Next.js的开发环境中,默认情况下是使用HTTP协议的。但是,您可以通过一些配置来启用HTTPS。这在开发阶段可能很有用,尤其是在需要测试涉及安全传输的应用场景时。下面是如何在Next.js开发环境中配置HTTPS的步骤:方法一:使用https模块您可以使用Node.js的内置模......
  • 【前端】在 Next.js 中添加对 API 的监控和日志记录
    API的监控和日志记录对于维护系统的稳定性和性能至关重要。良好的监控和日志记录可以帮助您及时发现和解决问题。以下是一些常用的监控和日志记录实践和技术:1.日志记录使用框架内置的日志功能Next.js本身提供了基本的日志记录功能,但您可能需要更详细的日志来调试问题......
  • “前端兼容——CSS篇”(进阶版)
    “前端兼容——CSS篇”(进阶版)上一篇文章写了css兼容问题处理的基础篇点击这里基础篇—传送门,这里想给粉丝分享一下css更深一点的兼容场景,和处理方案文章目录“前端兼容——CSS篇”(进阶版)进阶CSS兼容性问题1.**CSS变量(CustomProperties)的兼容性**2......
  • 一个健壮的前端轮询
    一个健壮的前端轮询原创 素柯 阿里云开发者 2024年01月31日08:30 浙江阿里妹导读 本文讨论了在不使用websocket做服务端推送的情况下,如何写出一个健壮的前端轮询。文章提供了一些常见的前端轮询的应用场景以及可能遇到的问题,欢迎大家一起讨论。一、前言  本文......
  • 前端防止XSS跨站脚本攻击处理(DOMPurify)
      在项目中碰到安全部门测试,输入一段脚本'<iframesrcdoc="<script>alert('xss]</script></iframe>">','<p>TestXSS<imgsrc=Xonerror=prompt(123423423423)>123123ff</p>',然后就会出现弹窗,针对于这种情况,初始情况涉及地方不多可......
  • 前端开发设计模式——观察者模式
    目录一、定义和特点1.定义2.特点二、实现方式1.使用JavaScript实现观察者模式的基本结构2.实际应用中的实现示例三、使用场景1.事件处理2.数据绑定3.异步通信4.组件通信四、优点1.解耦和灵活性2.实时响应和数据一致性3.提高代码的可复用性五、缺......
  • 2024前端面试训练计划-高频题-JavaScript基础篇
    具体内容结构(可作为回答思路)为:简略回答,详细回答1、JavaScript有几种数据类型?简略回答JavaScript共有八种数据类型,分别是Undefined、Null、Boolean、Number、String、Object、Symbol、BigInt。详细回答具体来说,分为两种类型:原始数据类型和引用数据类型:原始数据类型......
  • Performance API 实现前端资源监控
    1.PerformanceAPI的用处PerformanceAPI 是浏览器中内置的一组工具,用于测量和记录页面加载和执行过程中的各类性能指标。它的主要用处包括:监控页面资源加载:跟踪页面中的资源(如CSS、JavaScript、图片)的加载时间。分析页面加载时间:从导航到页面完全渲染的所有时间点。衡量......