这是用户在 2024-6-6 9:05 为 https://www.arrow-js.com/#why 保存的双语快照页面,由 沉浸式翻译 提供双语支持。了解如何保存?

Reactivity without the Framework
无框架的反应性

A tiny ~2kb library for building reactive interfaces in native JavaScript
一个用于在原生 JavaScript 中构建响应式界面的微小约 2kb 的库

But why? Get Started
但为什么?开始

ArrowJS is an experimental tool for programming reactive interfaces using native JavaScript. It’s not really a framework, but not less powerful than a framework either.
ArrowJS 是使用原生 JavaScript 编程响应式界面的实验性工具。它不是一个真正的框架,但也不比框架弱。


At its core — ArrowJS is an admission that while we developers were busy falling in love with fancy UI frameworks, JavaScript itself got good — like really good.
在其核心——ArrowJS 是一个承认,虽然我们开发人员忙于爱上花哨的 UI 框架,但 JavaScript 本身变得很好——真的很好。

Overview 概览

If JavaScript is so good, then what does a tool like Arrow bring to the table? So glad you asked. Arrow has 2 primary features:
如果 JavaScript 如此出色,那么像 Arrow 这样的工具又能为我们带来什么呢?很高兴你问。Arrow 有两个主要特性:

  • Observable data. 可观察的数据。
  • Declarative/Reactive DOM rendering.
    声明性/响应式 DOM 渲染。

For many applications, these two features are all you need to build delightful and complex user interfaces. Need state management? Use a module’s scope. Need components? Use functions. Need routing? The web platform already does this pretty well 😉.
对于许多应用程序来说,这两个功能就足以构建令人愉悦和复杂的用户界面。需要状态管理吗?使用模块的范围。需要组件吗?使用函数。需要路由吗?Web 平台已经做得相当不错😉。

Additionally, Arrow boasts a few more important talking points:
此外,Arrow 还有一些更重要的论点:

  • Zero dependencies. 零依赖。
  • No build tools required (or even suggested).
    不需要任何构建工具(甚至不建议使用)。
  • Less than 3KB min+gzip. (22x smaller than this itty bitty gif → gif of mind blown individual)
    少于 3KB 分钟+gzip。(比这个小小的 gif 小 22 倍→ gif of mind blown individual )

Got time for a quick example? Great.
有时间给一个快速的例子吗?太好了。

import { reactive, html } from '@arrow-js/core'

const data = reactive({
  clicks: 0
});

html`
  <button @click="${() => data.clicks++}">
    Fired ${() => data.clicks} arrows
  </button>
`

Key Commitments 关键承诺

Commitment to JavaScript
JavaScript 承诺

Arrow relies heavily on modern features of JavaScript such as template literals, modules (think import and export), and Proxies. For example, you'll immediately notice that Arrow does not have a special template "language" like so many other frameworks. Instead it relies on template literals (tick marks `) — specifically tagged template literals — to interpolate expressions and render DOM elements. For example:
Arrow 在很大程度上依赖于 JavaScript 的现代特性,如模板字面量,模块(想想 importexport ),以及代理。例如,您会立即注意到 Arrow 没有像许多其他框架一样的特殊模板“语言”。相反,它依赖于模板字面量(反引号 ` )——具体来说是带标签的模板字面量——来插入表达式并呈现 DOM 元素。例如:

const third = 'Third';

html`
  <ul>
    <li>First</li>
    <li>Second</li>
    <li>${third}</li>
  </ul>
`
  • First 第一
  • Second 第二
  • Third 第三

We go in depth on templates in the docs, but a key concept to understand here is that template literals, and tagged template literals, are native features of JavaScript.
我们在文档中深入探讨了模板,但在这里要理解的一个关键概念是,模板文字和标记模板文字是 JavaScript 的本机特性。

Why does this matter? Well for one it makes Arrow fast — most of the parsing is done using language-level features. More importantly, however, learning Arrow is mostly learning how to use modern native JavaScript to create UI systems, so the concepts here are portable.
为什么这很重要?首先,这使得 Arrow 变得更快——大部分解析都是使用语言级别的特性完成的。然而更重要的是,学习 Arrow 主要是学习如何使用现代的原生 JavaScript 来创建 UI 系统,因此这里的概念是可移植的。

Already fancy yourself a great JavaScript developer? Great! Then learning Arrow won't take you any time at all.
已经认为自己是一个了不起的 JavaScript 开发者了吗?太好了!那么学习 Arrow 对你来说将不会花费任何时间。

Commitment to no build tools
承诺不使用构建工具

Build tools can be useful. Arrow itself is written in TypeScript so it necessitates a build script to compile, but while there is no restriction against using a build tool, Arrow will never require one. Arrow removes the need for complex operations that are best left to compilers, like converting templates to render functions. It does this by making some assumptions:
构建工具可能是有用的。Arrow 本身是用 TypeScript 编写的,因此它需要一个构建脚本来编译,但是虽然没有限制使用构建工具,Arrow 永远不会要求使用。Arrow 消除了对最好由编译器处理的复杂操作的需求,比如将模板转换为渲染函数。它通过做一些假设来实现这一点:

  • It's ok to ship modern JS (no IE support)
    这是可以的,可以运行现代的 JS(不支持 IE)
  • You’re writing HTML (not native voodoo)
    您正在编写 HTML(而不是原生巫术)

It will always be good and right to pull in Arrow from a CDN and start building your project right away.
这将始终是一个好的选择,从 CDN 中拉取 Arrow 并立即开始构建您的项目是正确的。

Commitment to performance
承诺表现

Arrow is fast. Downloading, booting, and patching are all fast. In fact, you can generally expect on-par-or-better performance than its bigger JS framework counterparts. Arrow will always be a guilt-free choice for those under a performance budget.
箭头很快。 下载、引导和打补丁都很快。 事实上,您通常可以期望与其更大的 JS 框架对手相媲美甚至更好的性能。 箭头将始终是那些在性能预算下的无罪选择。

Commitment to Open Source
致力于开源

Arrow was created by me, Justin Schroeder. It is Open Source. It will always be Open Source. My hope is this project helps reframe developer’s expectations of "native" JavaScript.
箭头是由我,Justin Schroeder 创建的。它是开源的。它将永远是开源的。我希望这个项目能帮助重新定义开发人员对“本地”JavaScript 的期望。


Get Started with ArrowJS
开始使用 ArrowJS

Drag to outliner or Upload
Close