OpenTiny 前端组件库正式开源啦！面向未来，为开发者而生-低调大师

OpenTiny 前端组件库正式开源啦！面向未来，为开发者而生

2023-07-10 365

华为开发者大会 2023（HDC.Cloud 2023）于 7 月 7 日-9 日在东莞拉开帷幕,本届大会以“每一个开发者都了不起”为主题。OpenTiny 作为前端企业级组件库解决方案，在本次大会上正式进行发布。

OpenTiny 是一套企业级组件库解决方案，适配 PC 端/移动端等多端，涵盖 Vue2 / Vue3 / Angular 多技术栈，拥有主题配置系统 / 中后台模板 / CLI 命令行等效率提升工具，可帮助开发者高效开发 Web 应用。OpenTiny 孵化自华为云和流程 IT，经过九年持续打磨，服务于华为内外部上千个项目，千锤百炼，是一个稳定可靠的组件库，我们希望将内部的优秀实践开源出来，服务于更广大的企业和个人开发者，另一方面技术在不断地进步，我们希望携手社区开发者一起探索新技术，不断扩展 OpenTiny 的能力边界，让更多开发者受益，因此决定全面拥抱开源。

核心亮点

一套代码同时支持 Vue 2 / Vue 3

随着 Vue 3 的逐渐普及以及 Vue 3 开源生态的持续繁荣，未来将会有更多开发者投入 Vue 3 的怀抱，使用 Vue 3 开发新业务，同时存量的 Vue 2 项目也会逐渐迁移到 Vue 3 中来。目前业界主流的 Vue 组件库，要么只支持 Vue 3，要么分成 Vue 2 / Vue 3 两套组件库，比如饿了么的 ElementUI，它的 Element UI for Vue 2，而 Element Plus for Vue 3。再比如 Ant Design of Vue，它的 1.x 版本 for Vue 2，而 3.x 版本 for Vue 3。由于 Vue 2 / Vue 3 两套组件库对应两套不同的代码，难免存在组件功能和 API 不同步的情况，开发者如果要从 Vue 2 组件库迁移到 Vue 3 组件库，将面临一定的成本和风险。OpenTiny 采用组件与框架分离的设计理念（Renderless 架构），将组件拆分为三个构成部分：组件模板、组件样式和组件逻辑，并针对 Vue 2 和 Vue 3 实现了相应的版本适配器，抹平 Vue 2 和 Vue 3 的差异，实现一套代码同时支持 Vue 2 和 Vue 3。这样不管是 Vue 2 项目还是 Vue 3 项目，使用组件的方式都是一样的，可以实现无缝切换，极大地降低了 Vue 2 迁移到 Vue 3 的成本和风险。

TinyVue 组件库介绍：一个 OpenTiny，Vue2 Vue3 都支持！

一套代码同时支持 PC 和移动端

得益于 OpenTiny 的 Renderless 架构，我们不仅实现了一套代码同时支持 Vue 2 和 Vue 3，还实现了一套代码支持多端，这意味着：我们支持 PC 和移动端，同一个组件在不同终端表现不同在多端场景下组件的使用方式完全相同

组件丰富，功能强大

历经 9 年时间打磨，服务于华为内外部 1500 多个业务，稳定、可靠、安全。PC 端包含 80 多个组件，移动端包含 30 多个组件，Table、Tree、Select 等高频组件均内置虚拟滚动，在大数据场景下保持丝滑体验。除了业界组件库都有的组件，我们也提供了一些 OpenTiny 独有的特色组件：

Split 面板分隔器
IpAddress IP 地址输入框
Calendar 日历
Crop 图片裁切欢迎大家体验和使用！

提供 Angular 组件库

国内组件库大多数不提供 Angular 版本，我们提供基于 Angular + TypeScript 的 TinyNG 组件库，包含丰富的组件，支持国际化、主题定制，涉及大数据的组件，已内置虚拟滚动，保持丝滑稳定，并提供企业级安全保障，所有接口杜绝 XSS 攻击。TinyNG 采用面向对象架构设计，代码重复率远低于竞品一个数量级。

TinyNG 组件库介绍：TinyNG——开源Angular框架，助力Web应用快速开发！

开箱即用的中后台模板

为了帮助开发者快速开发 Web 应用，OpenTiny 提供了开箱即用的中后台模板 TinyPro，目前支持中后台应用和云服务控制台应用两套典型页面模板，同时支持 Vue、NG 两套框架，支持 10+ 实用功能，20+ 典型页面场景。

覆盖前端开发全流程的 CLI 工具

为了提升前端开发效率，OpenTiny 提供了一个跨平台的前端工程化 CLI 工具 TinyCLI，为开发者提供一系列开发套件及工程插件，覆盖前端开发的整个链路，保证团队开发过程的一致性和可复制性。

TinyCLI 工具介绍：有手就会！一行命令，安装你的TinyCLI

主题配置系统

OpenTiny 还提供了一款旨在提高开发效率的主题配置系统 TinyTheme，让开发者更专注，让你的 Web 应用风格更多变。

面向未来的技术架构

OpenTiny 采用组件和框架分离的设计理念，支持跨端跨技术栈跨版本 Web 组件只有一套 API 接口，Web 组件可拆分为三个构成部分：组件模板、组件样式和组件逻辑。组件模板借助 Renderless Component 无渲染组件的设计模式，分离出来的模板可以多样化，以适配不同的终端，比如 PC 端模板和 Mobile 端模板。React 组件的业务逻辑借助 React Hooks API，Vue 组件的业务逻辑借助 Vue Composition API，实现面向业务逻辑编程，这样不同技术栈的相同业务逻辑代码就汇聚到一起。对于同一个技术栈的不同版本，比如 Vue 2.0 和 Vue 3.0 则可以做一个版本适配器，只要保证组件逻辑函数的输入输出保持统一即可。

技术架构图：

优秀案例

云服务控制台

华为云控制台是管理所有华为云服务的集合，包括服务总览、资源管理、运维管理、安全管理、自定义控制台。

TinyEngine 可视化设计器引擎

华为首个前端可视化设计器引擎，为可视化设计器开发者提供定制服务，在线构建出自己专属的设计器。支持 Vue、Angular 多技术栈，提供 VSCode 插件，支持高低代码混合开发，支持直接生成 Angular 或 Vue 源代码。

MBM 工业制造系统

设计制造融合平台云服务，致力于打造开放的从工艺设计到制造运营管理领域的工业 aPaaS 平台，平台提供齐全的标准化数据模型底座、高复用的业务模板组件、通用基础组件以及基于平台的低代码开发工具，生态伙伴可以基于此平台快速低成本地开发出各细分行业和领域的工业应用 App。

未来展望

没有哪个开源项目是完美无缺的，未来我们将根据用户反馈和业界趋势不断打磨和完善 OpenTiny。

组件库

组件库方面，根据用户反馈持续优化和丰富组件，支持深色主题，支持全局配置。工程化方面需要完善 TypeScript 类型，完善组件单元测试。基于 Renderless 组件逻辑，扩展 React 框架适配层，使 OpenTiny 支持 React 框架，我们也希望社区开发者与我们一起共建。未来，随着一些新兴前端框架 Svelte、SolidJS 的流行和广泛使用，我们也希望能通过 Renderless 能力快速支持这些新兴框架。

周边生态产品

由于每个行业需要的管理后台模板不完全相同，目前 OpenTiny 支持中后台系统和云服务控制台两套行业模板，后续也会根据用户反馈持续进行丰富，扩展包含物联网、工业制造、监控运维、大屏等更多行业场景模板，方便开发者快速搭建自身行业的 Web 应用，这些模板共用 OpenTiny 所有的基础能力。

后续我们也希望搭建一个物料中心的平台，各行各业的开发者可以在其中创建自己的组件，这些组件物料将对所有开发者可见。

OpenTiny 的 CLI 工具是支持插件体系的，内置了丰富的套件和插件，我们将持续扩充这块的能力，计划将组件库官网套件、组件开发套件、自动化测试插件等逐步开源，也希望社区开发者与我们一起共建。

随着低代码的流行，我们也在做这方面的探索，并希望将华为首个前端可视化设计器引擎 TinyEngine 开源，开发者可以利用 TinyEngine 引擎开发自己低代码平台，成十上百倍地提升 Web 应用构建的效率。更多前端新技术和新领域，期待与你一起探索！

联系我们

如果你对我们 OpenTiny 的开源项目感兴趣，欢迎添加小助手微信：opentiny-official，拉你进群，一起交流前端技术，一起玩开源。

OpenTiny 官网：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）

欢迎进入 OpenTiny 代码仓库 Star🌟TinyVue、TinyNG、TinyCLI~

微信关注我们

原文链接：https://my.oschina.net/u/6769809/blog/10087588

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

一站式运维管家 ChengYing 主机接入原理解析

之前的文章中，我们已经为大家介绍了 ChengYing 的安装原理、产品包制作、产品线部署等内容，本篇将和大家介绍一个困扰许多开发者的内容——ChengYing 主机接入。帮助所有对 ChengYing 感兴趣的开发者更好地了解和使用一站式全自动化运维管家 ChengYing。主机接入流程在部署完 ChengYing 之后，从集群进去，进入主机资源，进行集群编辑之后，开始主机接入流程。具体的接入过程请看下图及文末的视频讲解，主要注意脚本的解析、下载和读取。主机接入中的常见问题在平时和开发者们交流的过程中，也搜集了许多 ChengYing 主机接入过程中大家会遇到的问题，在下文中将进行解答。 Q1：主机接入后，页面一直没有显示问题现象：页面既不显示管控安装成功，也不显示主机初始化成功或者失败问题原因：网络超时，安装脚本无法下载解决方法：先排查端口是否都正常，在 agent 上对 ChengYing 的8889，8864，8890进行 telnet Q2：主机初始化失败问题现象：问题原因：接入用户没有 sudo 权限解决方法：登陆接入主机，切换到 root 用...

2023-07-10

700

本文将通过复制场景下的异常分析，介绍手工搭建MySQL主从复制时需要注意的关键细节。作者：秦福朗爱可生 DBA 团队成员，负责项目日常问题处理及公司平台问题排查。热爱互联网，会摄影、懂厨艺，不会厨艺的 DBA 不是好司机，didi~ 本文来源：原创投稿爱可生开源社区出品，原创内容未经授权不得随意使用，转载请联系小编并注明来源。背景有人反馈装了一个数据库，来做现有库的从库。做好主从复制关系后，在现有主库上使用 show slave hosts; 管理命令去查询从库的信息时，发现从库的 IP 地址竟是自己的 IP 地址，这是为什么呢？因生产环境涉及 IP，端口等保密信息，以下以本地环境来还原现象。本地复现基本信息主库从库 IP 10.186.65.33 10.186.65.34 端口 6607 6607 版本 8.0.18 8.0.18 问题现象不多说，先上图，以下为在主库执行 show slave hosts; 出现的现象：可以看到这里的 Host 是主库的 IP 地址。我们登陆从库查看一下 show slave status\G： mysql> show...

2023-07-10

352

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Rocky Linux

Rocky Linux（中文名：洛基）是由Gregory Kurtzer于2020年12月发起的企业级Linux发行版，作为CentOS稳定版停止维护后与RHEL（Red Hat Enterprise Linux）完全兼容的开源替代方案，由社区拥有并管理，支持x86_64、aarch64等架构。其通过重新编译RHEL源代码提供长期稳定性，采用模块化包装和SELinux安全架构，默认包含GNOME桌面环境及XFS文件系统，支持十年生命周期更新。