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

在 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.mzph.cn/news/734049.shtml

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

相关文章

mmap匿名映射区

在创建映射区时,我们创建了一个文件,后面又需要unlink删除,然后munmap释放内存映射区,所以一开始就没必要创建。匿名映射区是指创建的映射区域不与任何文件关联,而是由操作系统分配的匿名内存。 mmap 内存映射里所谓的…

Vue中ElementPlus的按需导入

目录 1 新建一个Vue项目 2 安装ElementPlus 3 安装按需导入的组件 4 配置文件中添加相关内容 1 新建一个Vue项目 可看本人的这篇文章《创建一个Vue项目(含npm install卡住不动的解决)》 2 安装ElementPlus 在项目文件夹目录下,输入该指…

Hive的数据存储

Hive的数据存储在HDFS的:/user/hive/warehouse中 The /user folder in HDFS is a directory typically used to store user-specific data and configurations. It serves as the home directory for Hadoop users, analogous to the /home directory in Unix-like …

启发式算法:模拟退火算法

文章目录 退火的含义算法概述Metroplis准则算例-旅行商TSP问题退火的含义 退火(annealing)现象指物体逐渐降温的物理现象,温度愈低,物体的能量状态会低;够低之后,液体开始冷凝与结晶,在结晶状态时,系统的能量状态最低。大自然在缓慢降温(亦即,退火)时,可“找到”最…

空间复杂度的OJ练习——轮转数组

旋转数组OJ链接:https://leetcode-cn.com/problems/rotate-array/ 题目: 思路: 通过题目我们可以知道这是一个无序数组,只需要将数组中的数按给定条件重新排列,因此我们可以想到以下几种方法: 1.暴力求解法…

C语言字符数组的输入与输出的详细说明

前记:由于c面向过程编程语言,不像C和java等面向对象的编程语言,没有string类。 只能凭借数组存储字符串。接下来是关于c语言的字符数组的输入输出的详细说明! 一,输入函数 1.scanf() scanf这种格式串不能接收带空格的字…

【QT+QGIS跨平台编译】之七十五:【qgis_native.h生成】

文章目录 一、qgis_native.h介绍二、信息分析三、qgis_native.h生成一、qgis_native.h介绍 qgis_native.h 是 QGIS(Quantum GIS)软件中的一个头文件,主要用于包含 QGIS 底层系统的声明和定义。这个头文件中通常包含导出宏信息的定义。 二、信息分析 在qgis\src\native目录,…

HTML 学习笔记(一)开始

一、介绍: 首先引用百度百科的一段话作为介绍:   HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签,通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本…

Qt QPainter的使用方法

重点: 1.QPainter在QWidget窗口的paintEvent中使用。 2.QPainter通常涉及到设置画笔、设置画刷、绘图(QPen、QBrush、drawxx)三个流程。 class Widget : public QWidget {Q_OBJECTprotected:void paintEvent(QPaintEvent *event) Q_DEC…

React组件(函数式组件,类式组件)

函数式组件 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>React Demo</title> <!-- 引…

seo蜘蛛池的概念!蚂蚁SEO

蜘蛛池是一种特殊的网络营销技术&#xff0c;它的主要作用是吸引搜索引擎爬虫&#xff0c;提高网站的收录和排名&#xff0c;从而增加网站的流量和曝光度。 蚂蚁SEO是一个SEO工具&#xff0c;可以帮助您提高网站权重&#xff0c;吸引更多的搜索引擎爬虫&#xff0c;提高网站的…

【Demo】游戏小地图

简介 该Demo基于2D关卡随机生成项目进行实现&#xff0c;旨在初步探索游戏小地图的制作。 演示 MiniMapDemo 资源下载 百度网盘&#xff08;提取码&#xff1a;1314&#xff09; 如果这篇文章对你有帮助&#xff0c;请给作者点个赞吧&#xff01;

6. Gin集成redis

文章目录 一&#xff1a;连接Redis二&#xff1a;基本使用三&#xff1a;字符串四&#xff1a;列表五&#xff1a;哈希六&#xff1a;Set七&#xff1a;管道八、事务九&#xff1a;示例 代码地址&#xff1a;https://gitee.com/lymgoforIT/golang-trick/tree/master/14-go-redi…

Linux多线程之线程控制

(&#xff61;&#xff65;∀&#xff65;)&#xff89;&#xff9e;嗨&#xff01;你好这里是ky233的主页&#xff1a;这里是ky233的主页&#xff0c;欢迎光临~https://blog.csdn.net/ky233?typeblog 点个关注不迷路⌯▾⌯ 目录 一、pthread_crate 二、pthread_join 三、p…

腾讯面经学习笔记

&#x1f496; 前言 &#x1f469;‍&#x1f3eb; 参考地址 &#x1f496; 操作系统 1. 进程和线程的区别 本质区别 进程是操作系统资源分配的基本单位线程是任务调度和执行的基本单位 开销方面 每个进程都有独立的代码和数据空间&#xff08;程序上下文&#xff09;&#…

使用大型语言模型进行实体提取

原文地址&#xff1a;Using A Large Language Model For Entity Extraction LLM 能否比传统 NLP 方法更好地提取实体&#xff1f; 2022 年 7 月 12 日 Large Language Models for Generative Information Extraction: A Survey 实体简介 使用Co:here大型语言模型。 实体可以被视…

pytorch_retinaface训练Resnet50_Final.pth过程+无图版安装Nvidia+CUDA驱动GPU

背景 当前处于人脸检测分支&#xff0c;项目就是retinaface官方的代码加上数据集目录结构&#xff0c;目的是训练出最后的模型文件Resnet50_Final.pth 代码 https://gitee.com/congminglst/pytorch_-retinaface.git 项目结构与设计 图片数据集采用widerface&#xff0c; 前…

java实现pdf转word

java实现pdf转word 前言pom文件启动入口过滤器对象ConvertPdfToWordWithFlowableStructure转换实现类 前言 1.java实现pdf转word。 2.纯免费开源。 3.pdf解析完会生成word文件和图片文件夹。 4.无页码限制&#xff0c;文本类型生成到word中&#xff0c;图片生成到图片文件夹中…

基于 llvm 3.4 的C++重构工具

还未测试&#xff0c;存个档&#xff0c;未完待续 1,源码 Makefile LLVM_CONFIG?llvm-configifndef VERBOSE QUIET: endifSRC_DIR?$(PWD) LDFLAGS$(shell $(LLVM_CONFIG) --ldflags) COMMON_FLAGS-Wall -Wextra CXXFLAGS$(COMMON_FLAGS) $(shell $(LLVM_CONFIG) --cxxflags…

如何通过隐藏服务器真实IP来防御DDOS攻击

我们知道&#xff0c;服务器对外提供服务&#xff0c;基本上都是放置在公网上的。所以说服务器放置在公网上会面临很多攻击&#xff0c;如果不做好必要的防护措施&#xff0c;服务器被人攻击只是时间上的问题。 而我们面临的众多攻击中&#xff0c;DDoS攻击是最常见同时也是影响…