1.XRender - 开源之路
2.Ant Design Vue 3.0 的组件那些正经事儿
XRender - 开源之路
XRender,阿里飞猪孵化的源码t源开源产品,目前在GitHub上获得4.2k star。码分本文旨在分享XRender在过去一年内的组件发展和变革,以及它如何成为更多前端开发者的源码t源朋友。
一、码分淘宝店铺装源码前言
1. 什么是组件 XRender?XRender 是一套基于React.js框架的轻量、易用、源码t源易上手的码分中后台「表单 / 表格 / 图表」解决方案,已经在阿里飞猪内部服务三年,组件未来将持续为用户提供服务。源码t源
2. 为什么需要 XRender?对于中后台业务而言,码分表单+表格能覆盖%的组件业务场景,且大部分场景重复度高。源码t源unturned源码开发人员无需浪费时间在切图上,码分XRender这类工具能有效提升开发效率。
二、XRender 的自我革新
三年前,FormRender作为表单解决方案在GitHub上开源,成为XRender家族的首成员。面对复杂业务场景,FormRender的旧技术方案面临挑战,内部决定升级FormRender,并增加更多Render方案,以提升内部前端开发者的效率。
现在的XRender包括FormRender、FRGenetator、nativejs源码TableRender和ChartRender四个组件,统称为XRender。
1.「FormRender」:协议驱动的表单解决方案。代码示例展示其核心功能不变,遵循「协议驱动渲染」原则。
代码重构,面向未来:FormRender 1.x 对内核进行彻底重构,全面拥抱React Hooks和Antd Design 4.x,增加Typescript类型定义,简化编写方式。新增beforeFinish、onFinish钩子,用于表单提交前的instap源码校验和数据提交,以及onMount方法,类似于React的componentDidMount。引入userForm方法,方便操作表单和schema,提供动态修改功能。新增watch变量,用于数据监听,增加组件丰富度,如rate、treeSelect等内置支持,以及通过JSON Schema的format属性自定义组件。
2.「表单设计器」:中后台表单可视化搭建工具,提供可拖拽、sy源码可搭建能力,并支持导出schema。
3.「TableRender」:表格解决方案,内置搜索、重置、分页功能,简化开发流程。
4.「ChartRender」:基于@ant-design/charts的图表解决方案,提供快速生成图表的能力。
三、适合场景
XRender广泛应用于阿里飞猪的中后台业务,同时被阿里云、高德、淘宝、蚂蚁等BU的开发者使用。对于面向运营的搭建平台,推荐使用XRender。
四、未来规划
1. 内置组件支持自定义:开放List、Array类型的嵌套组件样式定制化,满足不同业务需求。
2. XRender 2.0开发:计划于年中旬完成,支持移动端渲染引擎Rax和Ant Design Mobile v5。
五、结尾
感谢XRender的开发者,特别制作视频以致敬社区。如果你希望在项目中使用XRender,可访问文档站点快速上手。若对源代码感兴趣或有建议,欢迎访问GitHub仓库。如XRender对你有帮助,请在GitHub上给予支持。
Ant Design Vue 3.0 的那些正经事儿
Ant Design Vue 3.0 的发布并非仓促之举,它标志着一个重要的里程碑,旨在提供更深入的源码重构、增强的功能特性、优化的易用性和性能提升。以下是3.0版本的主要亮点:
1. **源码重构与提升**:从 TypeScript 和 Composition API 开始,大部分组件已切换至这种架构,以提升类型提示和管理复杂度。虽然Vue 3在TS支持上有所增强,但组件库的泛型组件和属性类型复用仍面临挑战。团队鼓励对TS技术熟练者加入,共同改进。
2. **功能同步更新**:3.0引入了AntD 4.x的多项功能,如自定义时间库、虚拟滚动、暗黑主题、无障碍辅助和RTL支持,以及CSS Variables。
3. **易用性优化**:在Table、TreeSelect等组件的自定义渲染API上,3.0简化了配置,引入统一的`v-slot`命名,减少了配置膨胀和未来扩展的风险。
4. **性能改进**:FormItem的渲染优化、TreeNode的废弃以及Tree和TreeSelect的虚拟滚动功能,旨在提升组件的性能和大数据渲染能力。
尽管Table暂未支持虚拟滚动,但团队计划推出专门的产品解决大数据问题,预计在接下来的1-2个月推出。
升级Ant Design Vue 3.0,你可以期待更简洁的代码、更好的性能,以及与社区的持续互动。如果你对这些改变感兴趣,别错过月日的Vue专场会议,详细内容可通过关注公众号获取。