TinyNG is a front-end UI component library based on Angular + TypeScript, designed to bring developers a more efficient development experience and a unified visual interaction style. TinyNG has been used internally by Huawei for four years, supporting hundreds of enterprise products, and has strong stability and reliability. Now, we open source TinyNG, so that more developers can experience the surprises and efficiency improvements it brings. If you are looking for an Angular UI component library, we sincerely invite you to try TinyNG and enjoy the excellent experience and infinite possibilities it brings. At the same time, we also look forward to your feedback and suggestions to make TinyNG more perfect and easy to use. We believe that the open source TinyNG will receive more attention and attention, and more people will participate in it and make greater contributions to its development and growth. Welcome to TinyNG!
many components
TinyNG includes a rich set of user interface components that are very easy to integrate and use. At present, TinyNG has open sourced more than 70 basic components, and will gradually open source more than 100 components, covering all enterprise-level scenarios and meeting the needs of various fields.
Each component provides a detailed function introduction and examples, and beginners can easily understand and use it. In addition, we are committed to continuously refining and improving components to meet the growing needs of developers.
theme flexible
TinyNG can quickly switch theme styles according to business needs, which is very flexible and convenient; it can also easily create unique theme styles to improve development efficiency.
built-in themes
TinyNG is the first to use the default theme with zero configuration, without manually writing the code to load theme-default.css, thus simplifying the use process. In addition, TinyNG also provides users with four built-in themes, which can be freely switched according to actual design needs. These themes contain rich colors and styles, which meet the design requirements in various scenarios and make the page design more beautiful and generous.
theme-blue.
css theme-green.
css theme-purple.
css theme-red.css
custom theme
Traditional component libraries in the industry generally use Less/Sass as the theme, which needs to be compiled before use. This not only increases the workload of the developer, but also invades the compilation and configuration of the business project, which brings unnecessary trouble to the project. TinyNG adopts a brand-new method, using CSS Var to customize the theme, no need to compile the theme, making theme customization more convenient; it also supports JavaScript to change variables at runtime. The CSS Var theme is not only easy to use, but also allows developers to focus more on the implementation of business logic. In addition, TinyNG also supports specifying a brand color in the JavaScript code to quickly create a set of custom themes, so that users do not need to write complex theme styles themselves, and it is easiest to customize the theme.
Theme configuration platform
TinyNG has a powerful theme configuration platform that makes theme customization easier and more intuitive. Through the WYSIWYG approach, users can easily compile theme colors, scene colors, component colors (colors, fonts, borders, shadows), etc., to achieve personalized theme customization, making the project more beautiful and unique. In addition, the theme configuration platform also provides a one-click publishing function to npmjs.org, allowing users to share and use their own customized themes more conveniently.
microcomponent
TinyNG's micro-components have the characteristics of single-component independent version number management, and each component can be installed or upgraded independently, which makes component management more flexible and convenient. If you use multiple components, you only need to upgrade one of them to avoid full testing and improve development efficiency and stability.
super high performance
TinyNG's component library involves components with massive data (such as Select, Tree, Table, etc.), all of which have built-in virtual scrolling function, which can maintain a smooth and stable user experience. This feature greatly improves the performance and responsiveness of components, making it easy for high-load applications to run. Virtual scrolling is an optimization technique that only displays part of the data that is currently visible on the screen, rather than loading all the data into the page at once. This can avoid a large number of DOM operations, reduce the rendering time of the page, thereby improving the performance and responsiveness of the page.
In addition, TinyNG's component library also supports high-performance OnPush mode, which means that when the input properties of the component change, the component will only be re-rendered when it needs to be updated, thereby avoiding unnecessary DOM operations and further improving It improves the performance and responsiveness of the component library.
Enterprise Security
Enterprise-level security has always been our core focus. We are committed to protecting the information security of our customers. All interfaces are free from XSS attacks, so you can rest assured. Our security technology team is constantly updating and upgrading, using the most advanced technical means to protect your data.
globalization
In terms of internationalization, TinyNG not only provides five commonly used languages, but also supports custom new languages to meet the needs of different customers. TinyNG can adapt to various language environments, so that your users can use your products in their familiar language, improving user experience and satisfaction.
out of the box
TinyNG is designed out of the box so you can start using it right away. Detailed and easy-to-understand documentation examples allow you to get started easily and quickly master how to use the product.
TinyNG provides a CLI scaffolding tool that only needs one-click project initialization, allowing you to quickly build projects.
Simultaneous upgrade
At the same time, we keep updating with Angular, and TinyNG supports all active versions of Angular.
inherit
TinyNG adopts object-oriented inheritance, which can easily extend the functions of basic components, save code writing, and make applications easier to maintain and manage. For example: all components inherit from TiBaseComponent to obtain id-related functions, and all form components inherit from TiFormComponent to avoid writing Angular form-related functions.
combination
TinyNG adopts the combination mode to realize the required complex components by freely combining various basic components and custom components. Each basic component can be configured and customized as needed to meet the needs of different scenarios. For example: the Select component is composed of different levels of large and small components.
object oriented
We adopted an object-oriented architecture when designing TinyNG, which means that our code has a lower repetition rate, far exceeding other competitors (such as Google, etc.) by an order of magnitude. We believe that object-oriented programming is the key to writing reusable high-quality code. It can reuse code more flexibly, thereby improving the maintainability and scalability of the entire project, realizing functions and solving problems more efficiently.
In short, we have poured our hearts and enthusiasm into TinyNG, hoping to provide developers with convenient, efficient and reliable component solutions. As an easy-to-use and efficient open source component library, TinyNG is ready to show its outstanding performance and functions in various application scenarios. We look forward to more developers, designers, product managers, and enthusiasts joining us to promote the development of this component library, work together to create more perfect and excellent products, and create better experience and value for users. Join us now and experience the fun of TinyNG!
other instructions
The OpenTiny project is now open source! OpenTiny is an enterprise-level component library solution produced by HUAWEI CLOUD. It adapts to multiple terminals such as PC/mobile, covers Vue2/Vue3/Angular multi-technology stacks, and has efficiency improvements such as theme configuration system/middle-background template/CLI command line Tools that help developers efficiently develop web applications. If you are interested in the cross-terminal and cross-framework OpenTiny project, welcome to participate in the OpenTiny open source community and build it better together!
For the OpenTiny open source project, welcome to directly add the small assistant WeChat: opentiny-official, if necessary, you can also exchange front-end technologies and play open source together.
OpenTiny official website : https://opentiny.design/
OpenTiny code warehouse : https://github.com/opentiny/
Vue component library : https://github.com/opentiny/tiny-vue (Welcome Star)
Angluar component library : https://github.com/opentiny/ng (Star welcome)
CLI tool : https://github.com/opentiny/tiny-cli (Star welcome)
