简介:基于 OpenTiny 组件库的 rendereless 无渲染组件架构

news2025/2/26 2:33:34

在 HAE 自研阶段,我们实现的数据双向绑定、面向对象的 JS 库、配置式开发的注册表等特性,随着前端技术的高速发展现在已经失去存在的意义,但是在 AUI 阶段探索的新思路新架构,经过大量的业务落地验证,再次推动前端领域的创新。TinyVue 继承了 HAE、AUI 的基因,所有的新技术都从业务中来,到业务中去。而且,在这个过程中,我们通过不断吸收、融合开源社区的最佳实践和创新,不断提升自身的核心竞争力。

目前OpenTiny的TinyVue组件库,是采用Renderless设计架构,结合面向业务逻辑的开发范式与无渲染组件的设计模式,如果使用面向业务逻辑的开发范式,仅仅只能让使用相同的业务逻辑从原本散落到生命周期各个阶段的部分汇聚到一起。

无渲染组件的设计模式的实现方式有很多种,比如React中可以使用HOC高阶函数,Vue中可以使用scopedSlot作用域插槽,但当组件业务逻辑日趋复杂时,高阶函数和作用域插槽让代码变得难以理解和维护。只有将两者结合在一起,才有实现Web组件支持跨端的可能性。

按无渲染组件的设计模式,首先要将组件的逻辑分离成与技术栈无关的柯里化函数。

在定义组件的时候,借助面向逻辑编程的 API,比如 React 框架的 Hooks API、Vue 框架的 Composition API,将组件外观与组件逻辑完全解耦。

按不同终端编写对应的组件模板,再利用前端框架提供的动态组件,实现动态切换不同组件模板,从而满足不同外观的展示需求。

通过前端组件库跨框架,可以达到以下效果:

1. 提高开发效率和代码复用性,减少重复开发的工作量。

2. 统一 UI 风格和交互体验,提高产品的一致性和可用性。

3. 支持多种前端框架,让开发者更加灵活地选择框架。

4. 降低维护成本,减少代码冗余和重复的工作。

总之,前端组件库跨框架可以在不同的前端框架(如 React、Vue、Solid 等)之间共享和复用组件的能力。这种能力可以让开发者在不同的项目中使用同一套组件库,从而提高开发效率和代码复用性,提高产品的质量和用户体验。

参见:

DTSE Tech Talk | 第33期:带你体验很实用的OpenTiny-云社区-华为云

速速报名,30万奖金不容错过!OpenTiny 挑战赛开发指南来咯~

从自研走向开源的 TinyVue 组件库-CSDN博客

从自研走向开源的 TinyVue 组件库_开源_OpenTiny社区_InfoQ写作社区

HDC精彩回顾|7月8日OpenTiny重磅发布 - 哔哩哔哩

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1504912.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

万用表数据导出变化曲线图——pycharm实现视频数据导出变化曲线图

万用表数据导出变化曲线图——pycharm实现视频数据导出变化曲线图 一、效果展示二、环境配置三、代码构思四、代码展示五、代码、python环境包链接 一、效果展示 图1.1 效果展示 (左图:万用表视频截图;右图:表中数据变化曲线图&am…

宽度优先搜索算法(BFS)

宽度优先搜索算法(BFS)是什么? 宽度优先搜索算法(BFS)(也称为广度优先搜索)主要运用于树、图和矩阵(这三种可以都归类在图中),用于在图中从起始顶点开始逐层…

字节跳动的 SDXL-LIGHTNING : 体验飞一般的文生图

TikTok 的母公司字节跳动推出了最新的文本到图像生成人工智能模型,名为SDXL-Lightning。顾名思义,这个新模型只需很轻量的推理步骤(1,4 或 8 步)即可实现极其快速且高质量的文本到图像生成功能。与原始 SDXL 模型相比&…

嵌入式 Linux 学习

在学习嵌入式 Linux 之前,我们先来了解一下嵌入式 Linux 有哪些东西。 1. 嵌入式 Linux 的组成 嵌入式 Linux 系统,就相当于一套完整的 PC 软件系统。 无论你是 Linux 电脑还是 windows 电脑,它们在软件方面的组成都是类似的。 我们一开电…

.NET高级面试指南专题十六【 装饰器模式介绍,包装对象来包裹原始对象】

装饰器模式(Decorator Pattern)是一种结构型设计模式,用于动态地给对象添加额外的职责,而不改变其原始类的结构。它允许向对象添加行为,而无需生成子类。 实现原理: 装饰器模式通过创建一个包装对象来包裹原…

【数据可视化】动手用matplotlib绘制关联规则网络图

下载文中数据、代码、绘图结果 文章目录 关于数据绘图函数完整可运行的代码运行结果 关于数据 如果想知道本文的关联规则数据是怎么来的,请阅读这篇文章 绘图函数 Python中似乎没有很方便的绘制网络图的函数。 下面是本人自行实现的绘图函数,如果想…

【深度学习笔记】6_9 深度循环神经网络deep-rnn

注:本文为《动手学深度学习》开源内容,部分标注了个人理解,仅为个人学习记录,无抄袭搬运意图 6.9 深度循环神经网络 本章到目前为止介绍的循环神经网络只有一个单向的隐藏层,在深度学习应用里,我们通常会用…

three.js如何实现简易3D机房?(四)点击事件+呼吸灯效果

接上一篇: three.js如何实现简易3D机房?(三)显示信息弹框/标签:http://t.csdnimg.cn/5W2wA 目录 八、点击事件 1.实现效果 2.获取相交点 3.呼吸灯效果 4.添加点击事件 5.问题解决 八、点击事件 1.实现效果 2.…

ChatGPT发不出消息?GPT发不出消息怎么办?

前言 今天发现,很多人的ChatGPT无法发送信息,我就登陆看一下自己的GPT的情况,结果还真的无法发送消息,ChatGPT 无法发送消息,但是能查看历史的对话,不过通过下面的方法解决了。 第一时间先打开官方的网站&a…

Mint_21.3 drawing-area和goocanvas的FB笔记(七)

FreeBASIC gfx 基本 graphics 绘图 8、ScreenControl与屏幕窗口位置设置 FreeBASIC通过自建屏幕窗口摆脱了原来的屏幕模式限制,既然是窗口,在屏幕坐标中就有它的位置。ScreenControl GET_WINDOW_POS x, y 获取窗口左上角的x, y位置;ScreenC…

【REST2SQL】11 基于jwt-go生成token与验证

【REST2SQL】01RDB关系型数据库REST初设计 【REST2SQL】02 GO连接Oracle数据库 【REST2SQL】03 GO读取JSON文件 【REST2SQL】04 REST2SQL第一版Oracle版实现 【REST2SQL】05 GO 操作 达梦 数据库 【REST2SQL】06 GO 跨包接口重构代码 【REST2SQL】07 GO 操作 Mysql 数据库 【RE…

设计模式学习系列 -- 随记

文章目录 前言 一、设计模式是什么? 二、设计模式的历史 三、为什么以及如何学习设计模式? 四、关于模式的争议 一种针对不完善编程语言的蹩脚解决方案 低效的解决方案 不当使用 五、设计模式分类 总结 前言 最近可能工作生活上的稳定慢慢感觉自己丢失…

掌握 Vue3、Vite 和 SCSS 实现一键换肤的魔法步骤

前言 一个网站的换肤效果算是一个比较常见的功能,尤其是在后台管理系统中,我们几乎都能看到他的身影,这里给大家提供一个实现思路。 搭建项目 vitevue3搭建项目这里就不演示了,vite官网里面讲得很清楚。 注:这里使…

浅析开源内存数据库Fastdb

介绍: Fastdb是免费开源内存数据库,其优秀的性能,和简洁的C代码,让我学习使用过程中收益颇多,但是国内中文相关研究的文章相当稀少,外文我查询相当不便。有兴趣的朋友可以通过以下网站访问:Mai…

java-ssm-jsp基于ssm的冰淇淋在线购买网站

java-ssm-jsp基于ssm的冰淇淋在线购买网站 获取源码——》公主号:计算机专业毕设大全

【STM32】HAL库 CubeMX 教程 --- 通用定时器 TIM2 定时

实验目标: 通过CUbeMXHAL,配置TIM2,1s中断一次,闪烁LED。 一、常用型号的TIM时钟频率 1. STM32F103系列: 所有 TIM 的时钟频率都是72MHz;F103C8不带基本定时器,F103RC及以上才带基本定时器。…

react实战——react旅游网

慕课网react实战 搭建项目问题1.按照官网在index.tsx中引入antd出错?2.typescript中如何使用react-router3.react-router3.1 V63.2 V53.3V6实现私有路由 4.函数式组件接收props参数时定义数据接口?5.使用TypeScript开发react项目:6.要使一个组…

探索stable diffusion的奇妙世界--01

目录 1. 理解prompt提示词: 2. Prompt中的技术参数: 3. Prompt中的Negative提示词: 4. Prompt中的特殊元素: 5. Prompt在stable diffusion中的应用: 6. 作品展示: 在AI艺术领域,stable di…

数据结构——线性表顺序表示详解

目录 1.线性表的类型定义 2.基本操作 3.线性表的存储结构 4.补充 1.元素类型说明 2.数组定义​编辑 3.c语言的内存动态分配 4.c的动态存储分配 5.c中的参数传递 引用类型作参数 6.顺序表基本操作的实现 1.线性表的初始化 代码示例: 2.销毁线性表&…

远程连接Linux系统

图形化、命令行 对于操作系统的使用,有2种使用形式: 图形化页面使用操作系统 图形化:使用操作系统提供的图形化页面,以获得图形化反馈的形式去使用操作系统。 以命令的形式使用操作系统 命令行:使用操作系统提供的各…