从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年5月16日 下午2:06
下一篇 2024年5月16日 下午2:18

相关推荐

  • 云南省科研项目差旅费标准云南省科研项目差旅费标准

    云南省科研项目差旅费标准 随着科技的不断发展,科研项目也在不断地进行中。在科研项目中,差旅费是一项必不可少的支出,它关系到科学家们的出行、住宿和餐饮等费用。云南省是一个拥有丰富历史…

    科研百科 2024年7月4日
    75
  • 钛合金材料科研项目有哪些钛合金材料科研项目有哪些

    钛合金材料是现代科技领域中的重要材料之一,其具有高强度,轻量和耐腐蚀等优点,因此在航空,航天,汽车,建筑等领域得到了广泛的应用。近年来,随着科技的不断进步,钛合金材料的科研项目也在…

    科研百科 2024年9月13日
    30
  • 敏捷项目管理工具排名

    敏捷项目管理工具排名 随着敏捷开发方法的普及,越来越多的企业开始采用敏捷的方法来管理项目。但是,在选择敏捷项目管理工具时,企业需要考虑的因素有很多,比如性能、易用性、可靠性、安全性…

    科研百科 2024年8月19日
    41
  • 国内工程项目管理系统包括哪些(国内工程项目管理系统包括哪些模块)

    国内知名的工程项目管理系统有:1、Worktile;2、PingCode;3、用友协同云;4、泛微;5、广联达;6、泛普OA;7、新中大;8、红圈CRM;9、zoho Projec…

    科研百科 2023年10月28日
    112
  • 宜搭低代码高级认证实操题2

    宜搭低代码高级认证实操题2:网站设计 在宜搭低代码高级认证实操题2中,我们考察了网站的设计和实现。作为网站的设计师,我们需要熟悉网站的结构和布局,并且能够根据客户的需求设计出符合客…

    科研百科 2024年10月10日
    15
  • 未知3100758444

    未知 人类是一种神奇的生物,拥有无限的创造力和想象力。我们可以创造出令人惊叹的科技,创造美丽的艺术作品,探索宇宙的奥秘,也可以创造美好的家庭和社区。 然而,人类也面临着许多挑战。环…

    科研百科 2024年11月14日
    0
  • 别等了,真正高清的视频通话,在这里

    别等了,真正高清的视频通话,在这里 天知道我经历了怎样的一个平安夜。 大家的平安夜,想必是和老婆、女朋友、家人一起度过的。 即便分隔异地,也一定会通过视频聊天的方式互通情感。 而机…

    科研百科 2024年3月29日
    116
  • lsi-lnvgy_utl_msm_17.05.01.03_windows_x86-64

    lsi-lnvgy_utl_msm_17.05.01.03_windows_x86-64 lsi-lnvgy_utl_msm_17.05.01.03_windows_x86-64是…

    科研百科 2024年11月28日
    2
  • 科技大赛队伍名称

    科技大赛队伍名称:挑战者 挑战者团队是一个由志同道合的年轻人组成的科技团队,他们致力于将科技创新应用于现实世界中,并为社会带来积极的影响。 团队成员们来自不同的专业背景,但他们都有…

    科研百科 2024年12月8日
    4
  • Linux进程与任务计划管理(linux系统计划任务)

    程序和进程的关系 1.程序 保存在硬盘,光盘等介质中的可执行代码和数据 文件中静态保存的代码 2.进程 在CPU及内存中运行的程序代码 动态执行的代码 父,子进程 每个程序可以创建…

    科研百科 2022年7月6日
    332