我又创建了一个新的 JavaScript 框架

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

都2024年了，你居然又开发了一个JavaScript框架。我的天！

说到另一个 JavaScript 框架，你可能会笑着想，市面上已经有那么多成熟的框架了，为什么还要费劲再创建一个呢？🤷‍♂️

让我来分享一下我开发这个全新 JavaScript 框架的个人经历。不过，如果你对我的悲惨故事不感兴趣，以下是简要总结：

TiniJS是一个基于 Google Lit库，并采用Web Components技术的元框架。

您可以先在 Stackblitz 上尝试一个示例。或者下载一个入门模板。或者使用 CLI 初始化一个应用程序，运行npx @tinijs/cli@latest new my-app并按照说明操作。

更多详情，请参阅下面的“入门”部分或访问https://tinijs.dev/。

故事

玩笑归玩笑，我并非 JavaScript 专家，但为了让您了解我在前端开发方面遇到的种种烦恼，我还是简单介绍一下我的背景。我曾经是 Angular 的开发者，参与过 Angular 1 版本的开发，目前主要使用 Vue，偶尔也会用到 jQuery。我曾有过以下三个令人抓狂的经历，正是这些经历促使我尝试使用 TiniJS 框架。

痛点一：构建良好的用户界面/用户体验非常困难，既繁琐又耗时！

大约在2010年，网站大致可以分为两类：一类是文字和链接堆砌，图片寥寥无几；另一类则充斥着大量的图形元素，例如GIF图片、Flash背景、彩虹光标等等。

人们往往认为后端难，前端容易。这有点道理，但也不完全对，毕竟，这也不能怪我，对吧？因为只要掌握一些 HTML 和 CSS 知识，你就能轻松搭建一个静态网站。但是，要打造一个优秀的 UI/UX，需要考虑的因素就多得多。你必须精通很多技能，而且这些技能绝非易事！

PITA #2 - CSS 框架缺乏功能，而且自定义它们的效率不高！

人们意识到前端开发的难度，开始构建 CSS 框架来解决这个问题。Bootstrap 是这一趋势的先驱之一，其他流行的框架还有：Foundation、Semantic UI、Bulma、Skeleton、Pure CSS 等等。这些 CSS 框架确实很棒，它们能帮助我们更快地构建优秀的 UI/UX，但它们也存在自身的局限性。

首先，尽管所有框架都提供了一些自定义样式的方法，但总的来说，我觉得它们对我来说并不容易上手，也不容易重复使用。

其次是功能不足。我的意思是，它们主要基于 CSS，只提供一些功能，通常以 jQuery 插件的形式提供。大多数情况下，你需要自己编写 JavaScript 代码才能实现某个功能。

PITA #3 - JAVASCRIPT 框架过于庞大且有些冗余！

随着Web开发进入现代时代，JavaScript框架成为新的趋势。但问题在于，我们拥有如此多的选择，这既是好事也是坏事。它们功能强大，但互操作性却不高，你不能简单地将一段代码从一个框架复制到另一个框架中使用。尤其是在为特定框架创建带有独立软件包的UI系统时，这更是一项艰巨的任务。

每次我开始一个项目或者做一些前端工作时，前端开发领域的碎片化都让我感到有些痛苦。这似乎已成为一种常态，无法避免，不是吗？请不要误会，我并不反对任何框架，我更倾向于选择解决方案而不是技术，所以如果它适合你，那就继续用吧。但我一直在想，有没有什么办法可以统一或者缩小前端开发体验上的差距呢？🤔

隆重推出 TiniJS

这就是我尝试使用TiniJS 框架一段时间的原因。它是一套基于Lit库的工具集，用于使用原生Web 组件技术开发 Web/桌面/移动应用程序。感谢Lit团队创建了这款优秀的工具，它帮助我们更轻松地使用标准 Web 组件。

它的目标是尽可能做到标准化、小巧和通用。虽然它与其他框架和元框架并不完全相同，但总体而言，它拥有类似的功能，同时也存在一些关键差异。它既可以作为其他框架的替代方案，也可以作为它们的补充。您可以使用 TiniJS 构建各种类型的应用程序：落地页、单页应用程序 (SPA)、渐进式 Web 应用程序 (PWA)、桌面应用程序、移动应用程序等等。从功能上看，任何在 JavaScript 中运行良好的功能，在 TiniJS 应用程序中也都能正常运行。

整个系统由多个部分组成，这里做一个简要介绍。

请注意，目前并非所有组件都已上线，项目尚处于早期阶段，部分组件此前为实验性质。我会尽力尽快将它们上线。但我时间和资源有限，敬请谅解，如果可以，也请不吝伸出援手。🙇‍♂️
V1 的计划和路线图可在https://github.com/tinijs/tinijs查看。
[更新 - 2024/05/01] 0.18.x 版本新增了PWA模块、内容模块和服务器模块，并进行了多项改进。

核

TiniJS 的核心在于提供标准的项目结构和精简的开发流程。它包含用于组织文件的文件夹、用于开发的本地服务器，以及在发布时可以选择 Vite、Parcel 或 Webpack 来构建生产环境的工具。

核心组件还包括：用于页面间导航的路由、用于全局状态管理的简单存储、支持PWA等……

您可以尝试以下示例项目：

• 照片库应用示例
• 待办事项应用示例

用户界面系统

TiniJS 拥有一个UI 库，旨在提供所有常用的组件、模块，甚至完整的页面。这些组件采用特殊架构，它们是自定义元素，不仅可以与 TiniJS 一起使用，还可以与其他框架一起使用，甚至无需框架即可使用。

使用可重用组件非常简单，通常只需将 props 传递给自定义元素标签即可。可以通过 props、CSS::part()或自定义主题系列进行自定义，也可以完全克隆组件源代码……

组件还能以尽可能小的投入来适配几乎任何设计系统。这是通过主题系统实现的；其理念如下：

• 组件只需编写一次，它们是无头的（没有特定的样式）。
• 设计主题被组织成设计家族（又称设计系统），每个家族都定义了自己的基本特征，例如：Bootstrap、Material、Fluent、Spectrum……
• 基于基本特征，一个框架家族可以拥有不同的样式变体，称为“皮肤”（Skins）。例如，Bootstrap 框架家族可能拥有：浅色皮肤、深色皮肤……

有了主题化的概念，任何应用程序都可以具备以下主题化功能：

• 一个主题系列——目前所有 Web 应用程序中可能有 80% 到 90% 都只有一种特定的样式，相当于 TiniJS 的 1 个主题系列。
• 一个主题系列 + 多个皮肤 - 常见的用例是浅色/深色模式，相当于 TiniJS 1 个主题系列，但包含来自同一系列的多个皮肤。
• 多个主题系列 - 高度个性化的应用程序可能具有多个主题系列，每个系列包含一个或多个皮肤，具体应用哪个主题取决于用户参考。

详情请访问Tini UI。

Web、PWA、混合桌面/移动平台

默认的 TiniJS 应用是单页应用，它体积小、速度快，可以直接部署为 Web 应用。但你也可以将 TiniJS 转换为以下一种或多种类型的应用：

• 渐进式 Web 应用(PWA) - 只需一条 CLI 命令即可实现
• 混合桌面/移动应用 - 使用 Tauri 2.0 或类似工具（待办事项：编写说明）

静态服务器

无论规模大小，TiniJS 应用都可以作为静态网站启动，无需服务器或数据库。您几乎可以随时使用 SaaS 服务来满足任何后端需求。我目前也在开发Tini Content 模块——一个基于文件的内容管理系统，可以轻松管理多种类型的内容。静态站点生成 (SSG) 或预渲染功能也在计划之中。

如果您需要处理后端任务，并希望从 Node 服务器而非静态主机提供 Web 应用服务，可以选择使用Nitro 服务器来处理服务器/API 路由和其他服务器相关事务。由于开发能力有限，首个版本可能不支持服务器端渲染 (SSR)，但我计划采用半 SSR 方案，即服务器向用户提供单个页面，并向机器人提供最少量的服务器端渲染内容。

功能和模块

就功能而言，由于 TiniJS 应用基于标准的 Web 技术，因此任何在浏览器中运行的库和功能都可能在 TiniJS 应用中运行。所以，与其他框架相比，您无需担心功能方面的差异。您甚至可以在 TiniJS 应用中使用其他框架，例如，将 Vue 应用初始化并挂载到 TiniJS 页面中的某个元素上。

此外，还有一个模块化架构，以便某些模块可以接入 TiniJS 应用程序的工作流程，从而创建更精简的开发流程。

工具

官方 CLI 工具提供了一些方便使用 TiniJS 应用程序的命令。

• new- 使用现成的模板创建新项目
• dev- 启动本地开发服务器
• build- 构建生产分销
• preview- 在部署前预览生产版本。
• generate生成组件、页面、工具等。
• module- 管理 Tini 模块

此外，CLI 的通用性很强，不仅可以用于 TiniJS 应用，还可以用于任何类型的项目。它采用可扩展架构，您可以扩展更多命令以用于其他自动化任务。一些官方扩展包括：ui用于处理 UI 任务的命令（来自 Tini UI）或content用于处理内容相关任务的命令（来自 Tini Content）等等。您可以创建用于自身用途的 CLI 扩展包，既可以私有也可以共享。

好了，别光说不练，拿出行动来！👌

开始使用

Tini（或越南语中的“ Tí nị ”，意为非常可爱、娇小的东西）。

要快速创建TiniJS项目，您可以使用CLI初始化模板。

npx @tinijs/cli@latest new my-app

上述命令通过下载基础模板创建一个应用。未来，我计划提供多个入门模板。您也可以创建自己的模板，并与社区分享或供您个人使用。目前，以下模板可用：

• 基本（默认）- TiniJS 应用的最小结构。
• 空白（标志-t blank）- 包括路由器、状态管理、元标签管理和Bootstrap 主题系列。

现在，在项目内部，您可以运行命令npm run dev来启动开发服务器。您可以通过编辑./app/app.ts应用程序的根组件文件来开始开发。有关如何使用 Lit 处理自定义元素，请访问Lit 组件LitElement页面。Lit 组件和自定义元素之间存在一些差异TiniComponent，但现在您可以像往常一样修改static styles它们。render()

要构建发行版，请运行命令npm run build，并可选择运行命令npm run preview预览生产版本。现在您可以将该.output文件夹部署到任何静态主机。

您可以查看这些示例，以了解 TiniJS 应用的更多工作原理。

• 图库应用 - https://stackblitz.com/edit/try-tinijs
• 待办事项应用 - https://stackblitz.com/edit/try-tinijs-todo-app
• 主页 - https://github.com/tinijs/tinijs/tree/main/apps/tinijs.dev

以上是对TiniJS 框架的基本介绍，更多信息请访问：https://tinijs.dev。

下一个主题：TiniJS 应用的结构以及组件的使用

感谢您抽出时间与我交流。如果您遇到任何问题，请留言、提交问题或在Discord上寻求帮助，我很乐意为您提供帮助。

祝你一切顺利，编程愉快！ 💖