QCon北京「鸿蒙专场」火热来袭!即刻报名,与创新同行~ 了解详情
写点什么

【技研录】Zarm 3.0 正式发布!

  • 2023-11-24
    北京
  • 本文字数:2096 字

    阅读完需:约 7 分钟

【技研录】Zarm 3.0 正式发布!

写作思考:

Zarm 是众安科技基于 React 研发的一款适用于企业级的移动端 UI 组件库Zarm 项目中沉淀了一批高质量的组件资产,大大降低了移动展业下页面的开发成本,规范了产品的视觉交互,保障了用户体验的一致性;在移动设备系统版本碎片化严重的场景下,集中化的解决了浏览器兼容性问题。目前在众安系列移动端产品中有着广泛的应用,用户体验得到了整体明显的提升。


前言

随着前端技术的日新月异、React v18 的发布和自身业务的发展,基于 React 的移动端组件库 Zarm,升级势在必行,经过团队多月研发和打磨,在 2023 年春天开始的时候,Zarm 3.0 终于要和大家见面了。



目录

一、新组件

二、体验升级

三、从能用到好用

四、主题多样化及定制能力

五、未来

六、最后


一、新组件


在新版本中,我们增加了 10+ 全新的组件,它们是基于我们自身的业务实践而开发。这些组件经过严谨的推敲,确保了其通用性和扩展性,相信它们将为用户带来更好的使用体验。


Skeleton 骨架屏:在界面等待加载区域展示占位图形。

WaterMark 水印:展示页面版权所有者信息,内容泄露后以便追溯。

Grid 宫格:在水平方向上把页面分隔成等宽度的区块,用于展示等宽内容或进行页面导航。

Rate 评分:对事物进行评级操作,丰富了表单交互的形式

Image 图片:提供 5 种图片填充模式,支持懒加载、加载中/加载失败占位和回调

......


以及提供了 5 个常用的 hooks ,帮助各位开发者解决常见交互问题。


  • useClickAway 单击外部跟踪器

  • useInViewport 进入浏览器窗口

  • useLongPress 长按

  • useOrientation 屏幕方向

  • useScroll 滚动


二、体验升级

 

在 3.0,我们进行了一次全面的组件重构,将所有组件从类组件重写为函数式组件,这个变化将为开发者们带来更好的使用体验和更高的性能表现。


01 手势交互细节


我们使用了 use-gesture,它提供了更加灵敏、可靠的手势识别能力,让用户可以更加自然地操作,提高用户的交互体验。


02 流畅的动画


目前我们使用了 react-transition-group 作为动画库,它使用了一些优化手段,可以在保证动画流畅性的同时,最大限度地减少性能开销,为应用带来更加生动、流畅的动效。


03 视觉升级


同时,我们结合了 IOS 16 组件库设计资源,对部分组件的 UI 细节进行了调整,保持了组件视觉的整体一致性和整体美观度,让用户可以享受到更加优秀的视觉体验。


三、从能用到好用


我们还优化了组件的设计和 API,以更好地满足开发者们的需求

01 指令式调用


首先,我们对所有弹层交互组件增加了指令调用方式,这样就不再需要添加大量的代码来实现弹层的状态管理,只需通过简单的指令式调用,就可以在任何地方轻松使用弹层组件。



支持指令式调用的组件:

  • Modal

  • Picker

  • DatePicker

  • ActionSheet

  • Cascader

  • Toast


02 挂载监听节点的全局配置


其次,我们提供了全局配置统一管理组件默认的挂载节点与滚动监听节点,解决微前端挂载节点变更的需求。



03 日期组件


另外,我们对日期组件也进行了改进,移除了内置预设模式,调整为更加灵活的时间类型列进行配置,并且增加了“周”时间类型和 12 小时制。



此外,还增加了对时间类型值过滤的 API。



04 全面拥抱 TypeScript


我们将 TypeScript 应用于整个组件库和组件样式,并且将这些类型进行了导出,这意味着我们可以为开发者提供更好的类型安全和编辑器支持,以及更容易防止一些潜在的错误,帮助我们更好地构建可靠的应用程序。 


05 组件拆分和 API 整合


我们把在 2.x 一些设计不合理的部分组件做了一些调整,为了更符合功能含义、便于记忆、使用预期更明确。


例如:

  • CustomInput 和 Input 分离

  • ActivityIndicator 重命名 Loading

  • StackPicker 重命名 Cascader,并且动画和交互调整为 Tabs + Radio

......


总而言之,这些变化将帮助开发者们更加轻松地实现他们的项目需求,并带来更好的用户体验。


四、主题多样化及定制能力


01 CSS Variables 动态主题


在过去的版本中,Zarm 提供了一套默认的主题样式,开发者只能在编译时甚至是样式覆盖对默认主题进行微调,但是,对于一些需要更加动态的主题变化的应用程序来说,这些静态的主题样式可能无法满足需求。现在,我们提供了全新的动态主题功能,并且提供了几种不同的方式来动态地改变 Zarm 默认主题。


全局配置



组件内联



02 自定义内容渲染


在新版本中,除了 Checkbox/Radio 预设样式外,我们提供了显示元素的自定义渲染函数,开发者可以根据实际的业务场景定制开发。



不仅如此,我们同样开放了 Keyboard 源数据自定义的能力,这个功能非常适合那些需要特定的业务场景,比如车牌键盘等等。



五、未来


总的来说,Zarm 3.0 带来了许多改进和新特性,使得 Zarm 变得更加易于使用和定制,后续我们计划提供更多的组件,在将来我们也会在 CSS in JS、headless UI 做更进一步的探索。并且在满足移动端 Web 开发基础上,我们也在积极的发现更多平台的适配问题,比如小程序。


六、最后


对于还在使用 Zarm 2.x 或更早的版本,我们也准备了完善的迁移指南


使用者的反馈是我们不断前进的动力。大家在使用过程中遇到任何问题,都可以在 https://github.com/ZhongAnTech/zarm/discussions或者微信群交流。扫二维码加好友备注 “zarm” 进群。


最后感谢社区同学参与 Zarm 3.0 的开发:faner11、tgioer、jiyingzhi、JunIce、nemoisme



2023-11-24 17:10945

评论

发布
暂无评论
发现更多内容

在线XML转JSON工具

入门小站

工具

Netty核心概念之ChannelHandler&Pipeline&ChannelHandlerContext

CRMEB

2022年Flutter真的会一统大前端吗?

坚果

Flutter 小菜 1月月更

事件驱动架构在 vivo 内容平台的实践

vivo互联网技术

微服务 云原生 事件驱动架构

基于Flink CDC打通数据实时入湖

五分钟学大数据

flink 1月月更

TDSQL PostgreSQL执行计划详解

腾讯云数据库

tdsql 国产数据库

RavenDB起步--安装以及示例数据库

喵叔

为什么ConcurrentHashMap是线程安全的?

王磊

分享四款H5怀旧小游戏魔塔+伏魔记+三国霸业+寻仙纪

echeverra

前端 游戏

华青融天加入,龙蜥社区再添科技风险监测领域新伙伴

OpenAnolis小助手

Linux 开源 合作伙伴

为数据库性能调优插上 AI 的翅膀 | 调优测试框架 Matrix 团队访谈

PingCAP

SparkSQL高并发:读取存储数据库

华为云开发者联盟

数据库 高并发 Sparksql 存储 读取

SAP ABAP 业务开关和 SAP 电商云的 Feature Level

汪子熙

angular abap 1月月更 增强包 增强技术

Redis:我是如何与客户端进行通信的

华为云开发者联盟

redis 通信 协议 指令 客户端

字节跳动数据湖技术选型的思考与落地实践

字节跳动数据平台

数据湖 数据流 Apache Hudi

中科柏诚:积极践行为中小企业服务宗旨,同乡村振兴有效衔接

联营汇聚

第四节:SpringBoot中web模版数据渲染展示

入门小站

springboot

企业可以定级吗?可以自己确定等保等级吗?

行云管家

网络安全 等保 等级保护 等保2.0

ReactNative进阶(三十一): IoC 框架 InversifyJS 解读

No Silver Bullet

​React Native 1月月更 InversifyJS

TDSQL-A技术架构演进及创新实践

腾讯云数据库

tdsql 国产数据库

TDSQL-C PostgreSQL版的高可用特性

腾讯云数据库

tdsql 国产数据库

鸿蒙轻内核M核源码分析:LibC实现之Musl LibC

华为云开发者联盟

鸿蒙 内存分配 LibC Musl LibC Musl

Python监督学习之分类算法的概述

王小王-123

Python 人工智能 机器学习 分类算法

起个变量名,好的代码应该是这样的

蜜糖的代码注释

Java 互联网 开发 后端技术

MySQL 如何解决幻读(MVCC原理分析)

Ayue、

MySQL InnoDB 1月月更

看过来!腾讯文档上架优麒麟软件商店啦

优麒麟

Linux 开源 腾讯 操作系统 麒麟操作系统

智联生活行业加速器热门FAQ:物联网企业该如何与华为云合作?

华为云开发者联盟

物联网 华为云 智联生活 智联生活行业加速器 云市场

☕【Java深层系列】「并发编程系列」让我们一起探索一下CyclicBarrier的技术原理和源码分析

码界西柚

并发编程 AQS CyclicBarrier Java 线程 1月日更

面试官:知道 Flutter 生命周期?下周来入职!

百瓶技术

前端 生命周期 客户端 Flutter 小菜

1月月更|推荐学java——Spring事务

逆锋起笔

spring事务管理 spring ioc java 编程 Spring Java Spring事务

20000字详解大厂实时数仓建设 | 社区征文

五分钟学大数据

数据仓库 实时数仓 1月月更 新春征文

【技研录】Zarm 3.0 正式发布!_云计算_众安保险_InfoQ精选文章