配景
跟着闲鱼前端架构的不停演进,一些症结技术设施需求结合业务特点逐渐自建,技术计划也要拥抱社区来晋升可扩展性。一方面, 闲鱼跨端开发框架kun 让前端开发者使用JS/CSS/HTML便可交付终端页面,同时统筹了静态性和高机能,另外一方面,前端UI框架也正从团体 rax 逐渐转向社区 react 计划。在这个大配景下,环抱 kun 和 web 两个容器的跨端组件建立也势在必行,因此 Fish UI 应运而生,它将片面拥抱 React 生态,并借助 kun 容器的才能,为闲鱼终端开发者提供一套高易用性和不乱性的跨端(kun & web)UI组件库。
FishUI 的最大的技术翻新点在于跨端,它经过跨端组件的方式对齐 kun 和 web 两个容器的体验规范,让使用者更为专一于业务逻辑而非容器差别,从而完成为业务开发提效的指标。环抱着该翻新和指标,一些可预知的技术困难也随之泛起,好比组件库的工程构造如何组织、分端构建如何做、开发标准是甚么样等等,这些问题将在下文中一一失掉解答。 总体设计分层设计
Fish UI 作为兼容 kun 和 web 两真个组件库,包孕底层的kun容器组件和下层的跨端组件,其分层构造大抵如下:
其中【跨端组件】一层是 Fish UI 最下层的封装,是抹平 kun 和 web 容器差别的一层,同时也是业务开发者使用频率最高的一层。
现实状况是【跨端组件】要尽量依赖底层【w3c标准组件】组合扩展而成,要足够丰硕,而【kun 扩展组件】一层则但愿尽量做薄,由于其与kun 容器强绑定,是为理解决特定场景问题而发生的,不具备通用性。
本文后续也次要讲授环抱【跨端组件】这一层的相干建立内容。 跨端设计
FishUI 最中心的特征在于【跨端兼容 kun 和 h5】,也是与其余组件库最大的差别点。
通常状况下,业务开发者需求手动判别环境,分别完成两个容器对应的代码,好比渲染一张图片的代码如下: