TinyNG——开源 Angular 组件库，助力 Web 应用快速开发！

2023-07-12
中国香港
本文字数：2672 字
阅读完需：约 9 分钟

TinyNG 是基于 Angular + TypeScript 的前端 UI 组件库，旨在为开发人员带来更高效的开发体验和统一的视觉交互风格。TinyNG 已经在华为内部使用四年，支撑数百个企业产品，拥有强大的稳定性和可靠性。现在，我们将 TinyNG 开源，让更多的开发人员能够体验它所带来的惊喜和效率提升。如果您正在寻找一款 Angular UI 组件库，我们真诚地邀请您来尝试使用 TinyNG，并享受它所带来的卓越体验和无限可能。同时，我们也期待您的反馈和建议，让 TinyNG 变得更加完善和易用。我们相信，开源后的 TinyNG 将会得到更多的注重和关注，并且会有更多的人参与其中，为它的发展和壮大做出更大的贡献。欢迎体验 TinyNG ！

组件多

TinyNG 包含了丰富的用户界面组件，非常易于集成和使用。目前，TinyNG 已经开源了 70 多个基础组件，并将逐步开源 100 多个组件，涵盖了企业级全场景，可以满足各种不同领域的需求。

每个组件都提供了详细的功能介绍和示例，初学者也可以轻松地理解和使用。此外，我们致力于不断完善和改进组件，以满足开发者日益增长的需求。

主题灵活

TinyNG 可以根据业务需求快速切换主题风格，非常灵活方便；也可以轻松打造独具特色的主题风格，提高开发效率。

内置主题

TinyNG 首创零配置使用默认主题，无需手动写入加载 theme-default.css 的代码，从而简化了使用流程。此外，TinyNG 还为用户提供了内置的四套主题，可以根据实际设计需求进行自由切换。这些主题包含丰富的颜色和样式，满足了各种不同场景下的设计要求，使页面设计更加美观大方。theme-blue.css theme-green.css theme-purple.css theme-red.css

自定义主题

业内传统的组件库一般采用 Less/Sass 作为主题，需要编译后才能使用。这不仅增加了开发者的工作量，还侵入了业务项目的编译配置，给项目带来了不必要的麻烦。TinyNG 采用了全新的方式，使用 CSS Var 自定义主题，免编译主题，让主题定制更加便捷；同时也支持 JavaScript 在运行时更改变量。CSS Var 主题不仅简单易用，还可以让开发者更加专注于业务逻辑的实现。另外，TinyNG 还支持在 JavaScript 代码中指定一个品牌色，来快速创建一套自定义主题，这样用户不需要自己编写复杂的主题样式，最轻松实现主题的个性化定制。

主题配置平台

TinyNG 拥有一款强大的主题配置平台，可以让主题定制变得更加简单和直观。通过所见即所得的方式，用户可以轻松编译主题色、场景色、组件色（颜色、字体、边框、阴影）等，实现个性化的主题定制，让项目更加美观和独特。除此之外，主题配置平台还提供了一键发布到 npmjs.org 的功能，让用户可以更加方便地分享和使用自己定制的主题。

微组件

TinyNG 的微组件具有单组件独立版本号管理的特点，每个组件都可以单独安装或升级，这使得组件的管理更加灵活和方便。如果您使用了多个组件，只需要升级其中一个，就能够免去全量测试，提高开发效率和稳定性。

性能超高

TinyNG 的组件库涉及到海量数据的组件（如 Select、Tree、Table 等），都已经内置虚拟滚动功能，可以保持丝滑稳定的用户体验。这一特性极大地提升了组件的性能和响应速度，使得高负载的应用程序也能够轻松运行。虚拟滚动是一种优化技术，它只在屏幕上显示当前可见的部分数据，而不是将所有数据一次性加载到页面中。这样可以避免大量的 DOM 操作，减少页面的渲染时间，从而提高了页面的性能和响应速度。

除此之外，TinyNG 的组件库还支持高性能 OnPush 模式，这意味着当组件的输入属性发生变化时，组件只会在需要更新时才重新渲染，从而避免了不必要的 DOM 操作，进一步提高了组件库的性能和响应速度。

企业级安全

企业级安全是我们一直以来的核心关注点，我们致力于保障客户的信息安全，所有接口杜绝 XSS 攻击，让您百分之百放心。我们的安全技术团队不断更新升级，采用最先进的技术手段，为您的数据保驾护航。

国际化

在国际化方面，TinyNG 不仅提供了五种常用语言，还支持自定义新语言，以满足不同客户的需求。TinyNG 可以适应各种语言环境，让您的用户可以用自己熟悉的语言使用您的产品，提高用户体验和满意度。

开箱即用

TinyNG 采用开箱即用的设计，让您能够立即开始使用。详尽而易于理解的文档示例，让您能够轻松上手，快速掌握产品的使用方式。

TinyNG 提供了 CLI 脚手架工具，只需一键项目初始化，让您可以快速搭建项目。

同步升级

同时，我们与 Angular 保持同步升级，TinyNG 支持所有 Angular 活跃版。

继承

TinyNG 采用面向对象的继承，可以轻松地扩展基础组件的功能，节省代码的编写，使得应用程序更加容易维护和管理。例如：所有组件都继承自 TiBaseComponent 获得 id 相关功能，所有表单组件都继承自 TiFormComponent 免去编写 Angular 表单相关函数。

组合

TinyNG 采用组合模式，通过自由组合各种基础组件和自定义组件，来实现所需的复杂组件。每个基础组件都可以根据需要进行配置和自定义，以适应不同场景的需求。例如：Select 组件，就是由不同层次的大小组件组合而成。

面向对象

我们在设计 TinyNG 的时候采用了面向对象的架构，这意味着我们的代码具有更低的重复率，远远超过其他竞争对手（例如谷歌等）一个数量级。我们相信，面向对象编程是编写可复用高质量代码的关键，它可以更加灵活的复用代码，从而提高整个项目的可维护性和可扩展性，更加高效地实现功能和解决问题。

总之，我们为 TinyNG 注入了我们的心血和热情，希望能够为广大开发者提供便捷、高效、可靠的组件解决方案。TinyNG 作为一款易用、高效的开源组件库，已经准备好在各种应用场景中展现其杰出的性能和功能。我们期待更多的开发者、设计师、产品经理以及爱好者加入我们的行列，一起推进这个组件库的发展，共同打磨出更加完善、优秀的产品，为用户创造更好的体验和价值。现在就加入我们，体验 TinyNG 带来的乐趣吧！

其他说明

目前 OpenTiny 项目已经开源啦！OpenTiny 是一套华为云出品的企业级组件库解决方案，适配 PC 端 / 移动端等多端，涵盖 Vue2 / Vue3 / Angular 多技术栈，拥有主题配置系统 / 中后台模板 / CLI 命令行等效率提升工具，可帮助开发者高效开发 Web 应用。如果你对跨端、跨框架的 OpenTiny 项目感兴趣，欢迎参与到 OpenTiny 的开源社区中来，一起将它建设得更好！