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 本身变得很好——真的很好。
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 有两个主要特性:
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 还有一些更重要的论点:
3KB
min+gzip. (22x smaller than this itty bitty gif →
3KB
分钟+gzip。(比这个小小的 gif 小 22 倍→ 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>
`
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 的现代特性,如模板字面量,模块(想想 import
和 export
),以及代理。例如,您会立即注意到 Arrow 没有像许多其他框架一样的特殊模板“语言”。相反,它依赖于模板字面量(反引号 `
)——具体来说是带标签的模板字面量——来插入表达式并呈现 DOM 元素。例如:
const third = 'Third';
html`
<ul>
<li>First</li>
<li>Second</li>
<li>${third}</li>
</ul>
`
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 对你来说将不会花费任何时间。
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 will always be good and right to pull in Arrow from a CDN and start
building your project right away.
这将始终是一个好的选择,从 CDN 中拉取 Arrow 并立即开始构建您的项目是正确的。
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 框架对手相媲美甚至更好的性能。 箭头将始终是那些在性能预算下的无罪选择。
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 的期望。