厌倦了 JavaScript 框架的复杂性？可以看下 Still.js

本文最初发布于 THENEWSTACK 博客。

图片来自 Unsplash，由 Getty Images 提供

开发者 Nakassony Bernardo 遇到了一个在企业中常见的问题，无论哪个行业：现代化一个遗留的 Web 应用程序。许多旧的 Web 界面没有使用 JavaScript 框架，缺乏当今开发者习惯使用的能力。

Bernardo 说，“迁移这些遗留应用程序真的很难，因为它们确实解决了他们当时的问题，并且在某种程度上，也仍然适用于他们今天面临的一些问题。你不能简单地说，‘我要处理掉他们当时使用的东西，开始使用一个现代化的新框架。’这行不通，因为你必须破坏现有的一切，然后从头开始重建。”

更新遗留应用程序的挑战

使用 TypeScript 进一步增加了复杂性，因为它需要被转译成 JavaScript。

他说，“这时，事情就变得非常困难了，特别是当你处理那些遗留系统时。现代化这些应用程序不能使用那些新的 JavaScript 方法，也就是说你要坚持使用纯 JavaScript。然而，你还是要提供所有新 JavaScript 工具都提供的功能，比如状态管理。”

例如，他有一个可以追溯到 2003 年的应用程序，但它仍然可以解决组织的一些问题。出于这个原因，公司想要添加一些新功能，而不破坏它的核心。

Bernardo 在纯 JavaScript 中找到了答案，他用它创建了一个新的开源框架 Still.js（编辑注：Still.js 也是一个基于 React 的 静态网站生成器 的名字，现在已经归档。）该框架让他可以提供 React、Angular 或 Vue.js 等框架提供的一些功能，而且不需要重写代码。Still.js 刚开发出来大约只有一年，但它提供了一个模块化的基于组件的架构，类似于那些流行的框架。

在 Medium 上一篇关于 Still.js 的博文 中，Bernado 写道，“它提供了一种轻量级但强大的应用程序构建方法，带来了更好的可维护性和可扩展性，而且又没有引入复杂的抽象层。有了 Still.js，你可以在享受高效有序的开发工作流的同时，获得原始 JavaScript 的灵活性。”

Still.js 用例

Still.js 还有其他应用。例如，它可以用来现代化一个比较旧的 React 或 Angular 应用程序，同样不破坏遗留代码。

虽然你无法轻易地将像 React、Angular 和 Vue.js 这样的框架组合在一起，但你可以将它们与 Still.js 集成。Bernardo 解释说，这是因为 Still.js 直接利用了浏览器的原生能力，避免了组合其他主要框架时经常引起冲突的复杂工具和抽象层。

Bernardo 说，“如果你使用 React 并尝试将其与 Angular 结合，你还必须找到一种方法，将它们背后运行应用程序的工具结合起来，但 Still.js 没有这个要求。你不需要使用任何工具，因为它是纯 JavaScript。”

他补充说，它还可以与其他技术栈结合，包括使用 Java、经典 ASP 甚至 PHP 的应用程序。

架构和其他 Still.js 细节

根据 Still.js 文档，Still.js 使用了自己的架构方法，称为服务、控制器和视图，“它处理组件的方式相当世俗，因为它没有打包 / 构建过程”。

Still.js 的架构包含服务、控制器和视图。图片来自 Still.js 网站。

服务为视图提供数据，并处理事务，如 HTTP 请求。控制器用不同的行为和 DOM 实现为视图服务。视图显示需要向用户展示的内容。

Bernardo 告诉 The New Stack，Still.js 依赖于面向对象的原则。在状态管理方面，它提供本地状态管理和 全局状态管理。

Bernardo 解释说，“在 Still.js 中，你可以为组件设置状态属性或状态变量，这些属性或变量与组件本身、组件在本地的工作方式有关。”

React 引入了虚拟 DOM 作为实际 DOM 的轻量级内存表示。他说，它提供了一种以反应式方式更新 UI 的方法，但 Still.js 避免了这样的人工层。

他指出，“如果你增加的层次越来越多，那么在某种程度上会影响性能。我不是说他们没有在 React 中解决性能问题，我说的是：在用户界面的反应性更新方面，这是否有必要？如果没有必要，就让我们尽量避免这类实现。”

Still.js 的其他不同之处

其他框架有一个构建或编译过程，特别是如果需要将 TypeScript 转译成 JavaScript。

Bernardo 说，“他们用这个处理时间来转换你写的一切，变成需要由浏览器渲染的东西。Still.js 上没有这个，所以它是一种运行时渲染方法。每当这个组件被访问或请求时才开始渲染过程。”

该框架使用正则表达式来查看模板。他补充说，模板中 80% 是纯 JavaScript。不过，也有一些用于 HTML 的特殊指令。Still.js 解释器将这些转换为浏览器能理解的东西。

他说，“这就是渲染过程的工作方式，但都发生在 Still.js 之上。没有其他框架被用于渲染目的。”

根据 Bernardo 的说法，Still.js 不需要预处理，也不依赖于像 WebPack 或 Vite 这样的打包器。这使得它“非常适合那些喜欢直接使用原生 Web 技术而不是框架提供的现代特性的团队和开发者”。

不出所料，鉴于其创建原因，Still.js 适合企业级和复杂的应用程序。

他写道，“企业级 Web 应用程序需要的不仅仅是丰富的 UI 特性。它们需要：模块化、用户权限管理、组件路由、验证、关注点分离、通信管理、微前端架构（例如前端嵌入和交互）等等。Still.js 原生支持所有这些特性，而且不会因为打包程序而增加构建时间和潜在的复杂性，甚至工具开销。”

正如他提到的，Still.js 也可以用于在 React 中创建微前端。在 Medium 上另一篇关于 Still.js 的博文 中，他写道，该框架允许开发者在现有应用程序中嵌入 Still.js 组件，但这样一来，组件就可以是一个完整的前端，从而能够访问导航等功能。Bernardo 还 在 YouTube 教学视频中详细介绍了微前端。

Still.js 供应商组件

Still.js 提供了基于组件的 UI 和基于 HTML 的模板。它有内置的符号 / 指令、用户权限流程、组件状态管理、全局状态管理、路由和表单验证。

它甚至提供了一些 React 没有的东西。

Bernardo 说，“如果你在 React 中使用路由，你不能在路由时添加那些数据传输，你需要依赖状态管理。你将把这些数据推送到，比如说，某种 Redux 状态管理库，然后需要有一个兄弟工具去 Redux 那里检查有什么，然后从那里开始处理数据。”

他补充说，Still.js 可以发送任意大小的数据。

它还提供了一个名为供应商组件的功能，供 Web 开发者在需要一个不属于框架核心的功能时使用。到目前为止，这样的组件还不多，但是供应商组件允许开发人员使用新组件创建功能，而且组件可以重用。

他在 Still.js 网站 上解释说，Still.js 还提供了一种独特的内置注释方法。该方法利用了 JSDoc 和 JavaScript 注释，但不是用于文档，而是用于在运行时动态添加功能。JSDoc 也用于类型和类型提示，支持大多数 TypeScript 特性，尽管他补充说，“通常类型是可选的，只有在特定情况下才会成为必须的。”

Still.js 为开发者提供了一个完备的框架，但它仍然年轻，所以开发者可能会遇到可以改进的东西。Bernardo 补充说，他对贡献和建议持开放态度。

他说，“这是一个非常成熟的框架，但它仍然年轻，尽管你可以用它构建非常大且复杂的东西。我们对任何想法和贡献都持非常开放的态度。”

Loraine Lawson 是一位资深技术记者，25 年来一直报道从数据集成到安全的科技问题。在加入 The New Stack 之前，她曾担任银行技术网站 Bank Automation News 的编辑。

原文链接：

https://thenewstack.io/tired-of-javascript-framework-complexity-meet-still-js/

声明：本文为 InfoQ 翻译，未经许可禁止转载。

今日好文推荐

Remix 3终结以React为中心的架构

GitHub 2.5万星！日本开发者打造的Hono火了：定义后React时代微框架的轻量未来

16 年 macOS 程序员用 Claude Code 搞副业：我只手敲了 1000 行，剩下 95% 代码靠自动生成

假简历狂骗硅谷10+家AI公司、拿多头薪水被锤！印度工程师喊冤：每周拼140小时，我也很绝望