TinyNG?是基于 Angular + TypeScript 的前端 UI 組件庫，旨在為開發(fā)人員帶來更高效的開發(fā)體驗(yàn)和統(tǒng)一的視覺交互風(fēng)格。TinyNG 已經(jīng)在華為內(nèi)部使用四年，支撐數(shù)百個(gè)企業(yè)產(chǎn)品，擁有強(qiáng)大的穩(wěn)定性和可靠性?，F(xiàn)在，我們將 TinyNG 開源，讓更多的開發(fā)人員能夠體驗(yàn)它所帶來的驚喜和效率提升。如果您正在尋找一款 Angular UI 組件庫，我們真誠地邀請(qǐng)您來嘗試使用 TinyNG，并享受它所帶來的卓越體驗(yàn)和無限可能。同時(shí)，我們也期待您的反饋和建議，讓 TinyNG 變得更加完善和易用。我們相信，開源后的 TinyNG 將會(huì)得到更多的注重和關(guān)注，并且會(huì)有更多的人參與其中，為它的發(fā)展和壯大做出更大的貢獻(xiàn)。歡迎體驗(yàn) TinyNG ！

組件多

TinyNG 包含了豐富的用戶界面組件，非常易于集成和使用。目前，TinyNG 已經(jīng)開源了 70 多個(gè)基礎(chǔ)組件，并將逐步開源 100 多個(gè)組件，涵蓋了企業(yè)級(jí)全場(chǎng)景，可以滿足各種不同領(lǐng)域的需求。

每個(gè)組件都提供了詳細(xì)的功能介紹和示例，初學(xué)者也可以輕松地理解和使用。此外，我們致力于不斷完善和改進(jìn)組件，以滿足開發(fā)者日益增長(zhǎng)的需求。

主題靈活

TinyNG 可以根據(jù)業(yè)務(wù)需求快速切換主題風(fēng)格，非常靈活方便；也可以輕松打造獨(dú)具特色的主題風(fēng)格，提高開發(fā)效率。

內(nèi)置主題

TinyNG 首創(chuàng)零配置使用默認(rèn)主題，無需手動(dòng)寫入加載 theme-default.css 的代碼，從而簡(jiǎn)化了使用流程。此外，TinyNG 還為用戶提供了內(nèi)置的四套主題，可以根據(jù)實(shí)際設(shè)計(jì)需求進(jìn)行自由切換。這些主題包含豐富的顏色和樣式，滿足了各種不同場(chǎng)景下的設(shè)計(jì)要求，使頁面設(shè)計(jì)更加美觀大方。theme-blue.css?theme-green.css?theme-purple.css?theme-red.css

自定義主題

業(yè)內(nèi)傳統(tǒng)的組件庫一般采用 Less/Sass 作為主題，需要編譯后才能使用。這不僅增加了開發(fā)者的工作量，還侵入了業(yè)務(wù)項(xiàng)目的編譯配置，給項(xiàng)目帶來了不必要的麻煩。TinyNG 采用了全新的方式，使用 CSS Var 自定義主題，免編譯主題，讓主題定制更加便捷；同時(shí)也支持 JavaScript 在運(yùn)行時(shí)更改變量。CSS Var 主題不僅簡(jiǎn)單易用，還可以讓開發(fā)者更加專注于業(yè)務(wù)邏輯的實(shí)現(xiàn)。另外，TinyNG 還支持在 JavaScript 代碼中指定一個(gè)品牌色，來快速創(chuàng)建一套自定義主題，這樣用戶不需要自己編寫復(fù)雜的主題樣式，最輕松實(shí)現(xiàn)主題的個(gè)性化定制。

主題配置平臺(tái)

TinyNG 擁有一款強(qiáng)大的主題配置平臺(tái)，可以讓主題定制變得更加簡(jiǎn)單和直觀。通過所見即所得的方式，用戶可以輕松編譯主題色、場(chǎng)景色、組件色（顏色、字體、邊框、陰影）等，實(shí)現(xiàn)個(gè)性化的主題定制，讓項(xiàng)目更加美觀和獨(dú)特。除此之外，主題配置平臺(tái)還提供了一鍵發(fā)布到 npmjs.org 的功能，讓用戶可以更加方便地分享和使用自己定制的主題。

微組件

TinyNG 的微組件具有單組件獨(dú)立版本號(hào)管理的特點(diǎn)，每個(gè)組件都可以單獨(dú)安裝或升級(jí)，這使得組件的管理更加靈活和方便。如果您使用了多個(gè)組件，只需要升級(jí)其中一個(gè)，就能夠免去全量測(cè)試，提高開發(fā)效率和穩(wěn)定性。

性能超高

TinyNG 的組件庫涉及到海量數(shù)據(jù)的組件（如 Select、Tree、Table 等），都已經(jīng)內(nèi)置虛擬滾動(dòng)功能，可以保持絲滑穩(wěn)定的用戶體驗(yàn)。這一特性極大地提升了組件的性能和響應(yīng)速度，使得高負(fù)載的應(yīng)用程序也能夠輕松運(yùn)行。虛擬滾動(dòng)是一種優(yōu)化技術(shù)，它只在屏幕上顯示當(dāng)前可見的部分?jǐn)?shù)據(jù)，而不是將所有數(shù)據(jù)一次性加載到頁面中。這樣可以避免大量的 DOM 操作，減少頁面的渲染時(shí)間，從而提高了頁面的性能和響應(yīng)速度。

除此之外，TinyNG 的組件庫還支持高性能 OnPush 模式，這意味著當(dāng)組件的輸入屬性發(fā)生變化時(shí)，組件只會(huì)在需要更新時(shí)才重新渲染，從而避免了不必要的 DOM 操作，進(jìn)一步提高了組件庫的性能和響應(yīng)速度。

企業(yè)級(jí)安全

企業(yè)級(jí)安全是我們一直以來的核心關(guān)注點(diǎn)，我們致力于保障客戶的信息安全，所有接口杜絕 XSS 攻擊，讓您百分之百放心。我們的安全技術(shù)團(tuán)隊(duì)不斷更新升級(jí)，采用最先進(jìn)的技術(shù)手段，為您的數(shù)據(jù)保駕護(hù)航。

國(guó)際化

在國(guó)際化方面，TinyNG 不僅提供了五種常用語言，還支持自定義新語言，以滿足不同客戶的需求。TinyNG 可以適應(yīng)各種語言環(huán)境，讓您的用戶可以用自己熟悉的語言使用您的產(chǎn)品，提高用戶體驗(yàn)和滿意度。

開箱即用

TinyNG 采用開箱即用的設(shè)計(jì)，讓您能夠立即開始使用。詳盡而易于理解的文檔示例，讓您能夠輕松上手，快速掌握產(chǎn)品的使用方式。

TinyNG 提供了 CLI 腳手架工具，只需一鍵項(xiàng)目初始化，讓您可以快速搭建項(xiàng)目。

同步升級(jí)

同時(shí)，我們與 Angular 保持同步升級(jí)，TinyNG 支持所有 Angular 活躍版。

繼承

TinyNG 采用面向?qū)ο蟮睦^承，可以輕松地?cái)U(kuò)展基礎(chǔ)組件的功能，節(jié)省代碼的編寫，使得應(yīng)用程序更加容易維護(hù)和管理。例如：所有組件都繼承自 TiBaseComponent 獲得 id 相關(guān)功能，所有表單組件都繼承自 TiFormComponent 免去編寫 Angular 表單相關(guān)函數(shù)。

組合

TinyNG 采用組合模式，通過自由組合各種基礎(chǔ)組件和自定義組件，來實(shí)現(xiàn)所需的復(fù)雜組件。每個(gè)基礎(chǔ)組件都可以根據(jù)需要進(jìn)行配置和自定義，以適應(yīng)不同場(chǎng)景的需求。例如：Select 組件，就是由不同層次的大小組件組合而成。

面向?qū)ο?/h1>

我們?cè)谠O(shè)計(jì) TinyNG 的時(shí)候采用了面向?qū)ο蟮募軜?gòu)，這意味著我們的代碼具有更低的重復(fù)率，遠(yuǎn)遠(yuǎn)超過其他競(jìng)爭(zhēng)對(duì)手（例如谷歌等）一個(gè)數(shù)量級(jí)。我們相信，面向?qū)ο缶幊淌蔷帉懣蓮?fù)用高質(zhì)量代碼的關(guān)鍵，它可以更加靈活的復(fù)用代碼，從而提高整個(gè)項(xiàng)目的可維護(hù)性和可擴(kuò)展性，更加高效地實(shí)現(xiàn)功能和解決問題。

總之，我們?yōu)?TinyNG 注入了我們的心血和熱情，希望能夠?yàn)閺V大開發(fā)者提供便捷、高效、可靠的組件解決方案。TinyNG 作為一款易用、高效的開源組件庫，已經(jīng)準(zhǔn)備好在各種應(yīng)用場(chǎng)景中展現(xiàn)其杰出的性能和功能。我們期待更多的開發(fā)者、設(shè)計(jì)師、產(chǎn)品經(jīng)理以及愛好者加入我們的行列，一起推進(jìn)這個(gè)組件庫的發(fā)展，共同打磨出更加完善、優(yōu)秀的產(chǎn)品，為用戶創(chuàng)造更好的體驗(yàn)和價(jià)值?，F(xiàn)在就加入我們，體驗(yàn) TinyNG 帶來的樂趣吧！

其他說明

目前 OpenTiny 項(xiàng)目已經(jīng)開源啦！OpenTiny 是一套華為云出品的企業(yè)級(jí)組件庫解決方案，適配 PC 端 / 移動(dòng)端等多端，涵蓋 Vue2 / Vue3 / Angular 多技術(shù)棧，擁有主題配置系統(tǒng) / 中后臺(tái)模板 / CLI 命令行等效率提升工具，可幫助開發(fā)者高效開發(fā) Web 應(yīng)用。如果你對(duì)跨端、跨框架的 OpenTiny 項(xiàng)目 感興趣，歡迎參與到 OpenTiny 的開源社區(qū)中來，一起將它建設(shè)得更好！

對(duì)于 OpenTiny 開源項(xiàng)目，歡迎直接添加下小助手微信：opentiny-official，有需要也可以一起交流前端技術(shù)，一起玩開源。

OpenTiny 官網(wǎng)：https://opentiny.design/

OpenTiny 代碼倉庫：https://github.com/opentiny/

TinyVue 組件庫：https://github.com/opentiny/tiny-vue（歡迎 Star）

TinyNG組件庫：https://github.com/opentiny/ng（歡迎 Star）

TinyCLI工具：https://github.com/opentiny/tiny-cli（歡迎 Star）