从0到1实现 OpenTiny 组件库跨框架技术(openui5 框架)

本文分享自华为云社区《从0到1实现 OpenTiny 组件库跨框架技术-云社区-华为云》,作者:华为云社区精选 。

在华为云《DTSE Tech Talk》技术直播第44期《0基础玩转 OpenTiny 跨框架组件库,实现一站式前端进阶》中,华为云前端开发 DTSE 技术布道师莫春辉老师在本期直播中与开发者一起交流了OpenTiny组件库解决方案的核心优势和设计理念,并通过具体的实操给大家演示OpenTiny如何从0到1实现组件库跨框架技术。

从0到1带你开发一个跨框架的UI组件

实现组件库跨框架技术是一种提高 Web 页面开发效率和应用灵活性非常重要的方法。随着前端技术的快速发展,组件库和框架的种类也日益繁多,因此,实现组件库跨框架技术对于解决开发痛点、降低开发成本具有重要意义。

本次实操的目标是搭建一个跨 VueReact、Solid 框架的按钮演示 demo,展示如何实现组件库跨框架技术的应用。通过本期的演练,希望能够为开发者提供一个清晰、具体的实现过程,帮助大家更好地理解这一技术的实际应用。

具体源码可参考:https://github.com/opentiny/dtt-cfc

从0到1实现 OpenTiny 组件库跨框架技术(openui5 框架)

本次实操流程主要是分为四个部分:

1、初始化工程

a) 使用pnpm管理项目,并配置pnpm-workspace.yaml

b) 配置项目eslint、prettier和git环境

从0到1实现 OpenTiny 组件库跨框架技术(openui5 框架)

2、创建 vue 应用并添加 @opentiny/vue-button 组件相关逻辑:

a) 初始化 Vue应用

b) 开发 Vue 组件的适配层和vue-button组件

c) 开发适配无渲染层renderless的js文件

从0到1实现 OpenTiny 组件库跨框架技术(openui5 框架)

3、创建 react 应用并添加 @opentiny/react-button 组件相关逻辑:

a) 初始化 React 应用

b) 开发 React 组件的适配层和react-button组件

c) 开发适配无渲染层renderless的js文件

从0到1实现 OpenTiny 组件库跨框架技术(openui5 框架)

4、创建 Solid 应用并添加 @opentiny/solid-button 组件相关逻辑:

a) 初始化 Solid 应用

b) 开发 Solid 组件的适配层和solid-button组件

c) 开发适配无渲染层renderless的js文件

从0到1实现 OpenTiny 组件库跨框架技术(openui5 框架)

TinyVue组件库当前已实现跨端、跨框架、跨版本

得益于 Renderless 无渲染的设计架构,OpenTiny 项目的 TinyVue 作为一个 Vue 组件库,不仅实现了组件库跨框架,同时也实现了一套代码不仅同时支持 Vue 2 / Vue 3,还同时支持PC和移动端,更适应多主题规范。在实际应用中,开发者是可以开发出跨终端(PC端、移动端、手表端)、跨框架(Vue2、Vue3、React、Solid)、跨主题(字体、颜色、圆角、图标…)、跨设计规范(图标、交互、默认配置…)的项目。

下图是 OpenTiny 跨端、跨框架、跨版本、跨设计规范示例启动后的演示效果(具体源码可以参考:https://github.com/opentiny/cross-framework-component):

从0到1实现 OpenTiny 组件库跨框架技术(openui5 框架)

那为什么 OpenTiny 要实现组件库跨端、跨框架、跨版本呢?

目前业界组件库,一般按前端框架React、Angular、Vue的不同来分类。要么按面向的终端,如PC组件库、Mobile组件库、小程序组件库等。由于 Vue 2和 Vue 3版本不能兼容,因此 Vue 2的组件库跟 Vue 3的组件库代码是不同的,即同一个技术栈也有不同版本的组件库。当前现状对于开发组件库和使用组件库都无疑是一种负担。

而且Vue 2 / Vue 3 两套组件库对应两套不同的代码,难免存在组件功能和 API 不同步的情况,开发者如果要从 Vue 2 组件库迁移到 Vue 3 组件库,将面临一定的成本和风险。

当前组件库分类如下所示:

从0到1实现 OpenTiny 组件库跨框架技术(openui5 框架)

面对相当业界的痛点,TinyVue 采用组件与框架分离的设计理念(Renderless 架构),通过让 Web 组件支持跨端跨技术栈跨 UX 规范的特性,使得开发人员只需开发和维护一套组件库代码,就能推出不同终端不同技术栈的版本,减少开发和维护的成本。同时用户在使用这套组件库时,虽然在使用不同终端不同技术栈的版本,但由于底层基于一套代码,其 API 接口基本相同,从而降低用户学习使用以及迁移升级的成本。

从0到1实现 OpenTiny 组件库跨框架技术(openui5 框架)

当然,这套设计架构需要同时结合面向业务逻辑的开发范式与无渲染组件的设计模式。因为单纯使用面向业务逻辑的开发范式,仅仅只能让相同的业务逻辑从原本散落到生命周期各个阶段的部分汇聚到一起。而无渲染组件的设计模式的实现方式有很多种,比如React中可以使用HOC高阶函数,Vue中可以使用 scopedSlot 作用域插槽,但当组件业务逻辑日趋复杂时,高阶函数和作用域插槽让代码变得难以理解和维护。因此只有将两者结合在一起,才有实现 Web 组件支持跨端、跨框架的可能性。

TinyVue 通过完成设备适配、分辨率适配、交互适配等问题,最终达到在不同的框架和不同终端中使用的效果。不仅如此,针对 Vue 2 和 Vue 3 ,TinyVue 还推出了相应的版本适配器,抹平 Vue 2 和 Vue 3 的差异,实现一套代码同时支持 Vue 2 和 Vue 3两个版本。这样不管是 Vue 2 项目还是 Vue 3 项目,使用组件的方式都是一样的,可以实现无缝切换,极大地降低了 Vue 2 迁移到 Vue 3 的成本和风险。

总结:

OpenTiny 是一套企业级 Web 前端开发解决方案,提供跨端、跨框架的UI组件库,适配 PC 端 / 移动端等多端,支持 Vue2 / Vue3 / Angular 多技术栈,拥有灵活扩展的低代码引擎,包含主题配置系统 / 中后台模板 / CLI 命令行等丰富的效率提升工具,可帮助开发者高效开发 Web 应用。

当然 OpenTiny 作为华为云解决方案中的重要组成部分,使能开发者构建云原生应用,也将助力开发者提高应用的性能和可靠性,促进应用的创新和发展。

从0到1实现 OpenTiny 组件库跨框架技术(openui5 框架)

未来,随着技术的不断发展和应用,OpenTiny 也将持续为开发者带来更加便利和高效的体验。

关注#华为云开发者联盟# 点击下方,第一时间了解华为云新鲜技术~

华为云博客_大数据博客_AI博客_云计算博客_开发者中心-华为云

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2024年2月15日 上午9:38
下一篇 2024年2月15日 上午9:50

相关推荐

  • 油料所多项成果入选农业部主推品种技术

        日前,中国农业科学院油料作物研究所油菜新品种中双11号、阳光2009、中农油6号和花生新品种中花16入选农业部2015年油料主导品种,油菜机械…

    科研百科 2022年5月16日
    294
  • 我公司测绘科研项目

    我公司测绘科研项目取得重要进展 近年来,我公司一直专注于测绘领域的研究和开发。近期,我们的测绘科研项目取得了重要进展,为公司的发展奠定了坚实的基础。 我们的测绘科研项目主要是研究如…

    科研百科 2025年3月22日
    1
  • 低代码开发将有大机会

    低代码开发将有大机会 低代码开发是一种新兴的软件开发方法,它通过使用图形化界面和少量的编码来快速构建应用程序。随着技术的不断进步和市场的需求增加,低代码开发将有着巨大的机会。 首先…

    科研百科 2024年2月23日
    135
  • 项目管理类证书有哪些

    项目管理类证书有哪些 项目管理是一个非常重要的职业领域,它涉及到项目的规划, 执行, 控制和结束。项目管理类证书是一种证明项目管理技能和知识的证书,它们可以帮助个人和公司提高项目管…

    科研百科 2024年8月18日
    38
  • 云南省教育厅科学研究基金项目属于什么级别

    云南省教育厅科学研究基金项目属于什么级别 云南省教育厅科学研究基金项目是云南省教育厅为支持高等教育科学研究而设立的一项资助项目。该项目的资助力度较大,旨在为高校提供资金用于科学研究…

    科研百科 2024年10月4日
    18
  • 原创 – 自动化技术驱动的管理模式创新——以中控技术为例(自动化中控系统)

    导语 本文以中控技术提供的自动化服务为例,提出采用自动化控制系统及其配套的管理模式,有利于企业进行供应链管理、安全管理、流程管理、战略与创新管理、碳排放管理、风险管理。具体而言,自…

    2022年10月7日
    434
  • 大专院校环保科研项目

    大专院校环保科研项目 随着经济的发展和城市化进程的加速,环境污染问题日益突出。为了改善环境,许多大专院校纷纷开展环保科研项目,致力于推动环保技术的发展和应用。 其中,最具代表性和有…

    科研百科 2025年4月4日
    1
  • 世界上科研实力最强大的"10家科技巨头",看我国能入榜几家企业

    你知道世界上最强大的科技公司,是哪家公司吗?有人可能会说是美国的苹果公司,或者是我国的阿里巴巴,但事实真的是如此吗? 这一次我给大家带来的就是:世界上科研实力最强大的10家科技公司…

    科研百科 2023年3月21日
    525
  • 管理系统项目安全评价

    管理系统项目安全评价 管理系统项目安全评价是指对管理系统项目进行安全性评估,以确定该项目在实施过程中可能面临的安全风险和风险影响,并采取相应的措施来降低这些风险的影响和损失。管理系…

    科研百科 2024年12月26日
    0
  • 科研项目申请依据

    科研项目申请依据 科研项目申请是推动科技进步和社会发展的重要力量。在申请科研项目时,需要提供详细的项目申请书,包括研究背景、研究目的、研究方法、预期成果和预算等。本文将介绍科研项目…

    科研百科 2025年3月6日
    0