从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

相关推荐

  • 「走龙江大地 看今昔巨变」胜利农场:蜕变,走向新胜利

    东北网8月15日讯(王志弘 记者 赵亚东)初秋时节,广袤的三江平原,处处稻浪翻滚。 因为洪水破坏道路抢修,走田间路再辗转上高速。东北网“走龙江大地看今昔巨变”报道组赶到胜利农场时,…

    科研百科 2023年1月15日
    345
  • 科研项目缴税

    科研项目缴税 随着科技的不断发展,科研项目的参与度越来越高,科研项目的缴税也成为了一项不可或缺的任务。缴税不仅体现了科学家对国家利益和社会责任的贡献,也是他们实现个人成就和自我提升…

    科研百科 2025年2月20日
    0
  • 哈尔滨兽医所发现调控猪瘟病毒复制的新宿主因子

        近日,中国农业科学院哈尔滨兽医研究所猪烈性传染病创新团队研究发现了一个新的调控猪瘟病毒复制的宿主分子——丝裂原活化蛋白激酶激酶2…

    科研百科 2022年5月15日
    277
  • 涉河项目管理系统

    涉河项目管理系统 随着水资源的日益短缺,涉河项目管理系统成为了越来越重要的一部分。这些系统可以帮助组织管理河流项目,确保项目的成功完成,并最大限度地减少对环境的影响。本文将介绍一种…

    科研百科 2024年12月26日
    6
  • 潢川县三家企业与武汉工程大学成功对接校企科研合作项目(武汉工程大学黄河老师)

    12月27日上午,武汉工程大学与潢川荣丰纺织、滨湖印务、多栗多三家企业共建的科学研究所(中心)正式揭牌成立,揭牌仪式在荣丰纺织办公楼二楼会议室举行。 潢川县委常委、宣传部长、副县长…

    科研百科 2024年4月2日
    145
  • 南昌管理系统开发项目

    南昌管理系统开发项目 南昌管理系统开发项目是一个针对南昌地区的综合性管理系统,旨在为南昌地区的企业和商家提供全面的管理解决方案。该项目的目标是建立一个高效, 灵活, 实用的管理系统…

    科研百科 2025年6月19日
    0
  • 建筑工程项目管理方法

    建筑工程项目管理方法 在建筑工程项目管理中,有效的计划、组织、协调和控制非常重要。以下是一些建筑工程项目管理方法的建议。 1. 确定项目目标和范围 在开始项目之前,必须明确项目的目…

    科研百科 2024年8月29日
    32
  • 北京大学本科生科研项目奖

    北京大学本科生科研项目奖 北京大学本科生科研项目奖是一项旨在奖励优秀本科生的奖项,鼓励他们在学术研究方面做出杰出的贡献。自2007年设立以来,该奖项已经吸引了大量的本科生参与,成为…

    科研百科 2024年4月8日
    164
  • 科研项目经理怎么写总结

    科研项目经理怎么写总结 科研项目经理在项目结束后,通常会写一份总结来回顾项目经历,总结经验教训,并为未来的项目做好准备。在写总结时,需要注意以下几点。 1. 总结项目目标 在写总结…

    科研百科 2025年5月24日
    1
  • qt 程序开发

    Qt程序开发是一种流行的跨平台开发框架,它提供了丰富的工具和库,使开发者能够轻松地创建高质量的应用程序。Qt程序开发具有许多优势,包括易于学习和使用、强大的功能和良好的可移植性。 …

    科研百科 2023年7月21日
    112