「回忆2022,展望2023,我正在参与2022年终总结征文大赛活动」

京东零售 于明明

前语

韶光飞逝,流年似水,让咱们倒带 2022,回忆这跌宕起伏一年走过的 “晋级之路”。 NutUI 体现怎么? 成绩单等着您打分!

2022 是 NutUI 在技能长廊中探索和生长的第四个年头,悄然度过了自己的“孩提“韶光。NutUI 也从单一 Vue 技能栈的组件库逐步生长为适配多端的多技能栈的组件库,晋级规划标准「京东APP视觉」「京东科技视觉」,适配 Taro 框架支撑小程序开发,拓展 React 技能栈,打造 NutUI 事务组件生态等。

2022 是不普通的一年,新冠末年前端技能也急剧革新,低代码的风起(Retool),D2C 和 AI(codefun & ChatGPT) 的涌动,对各行各业的开发者带来了很大的冲击。但是 NutUI 初心未变,做好 UI 组件,服务于原始的代码开发者,一起亦为低代码渠道供给支撑,就在这一亩三分地里精耕细作。

2022,咱们相继完结了 React 技能栈的发布、多端小程序的适配、对组件功用进行比较并补齐、添加单测、丰厚主题定制、完备国际化功用、推出 IDE 插件,在线代码调试等功用。意图只有一个:「打造一款好用的移动端组件库,为开发提效,为事务赋能,为开源奉献一份力量」

2022 倒带 - NutUI

React 技能栈扩充

这一年,咱们完结了 React 技能栈的扩充。

NutUI 自发布以来都是以 Vue 技能栈为底座进行迭代和晋级,随着集团内部及社区对 React 版别的呼声越来越高。2021 年 6 月咱们启动了 NutUI-React 规划并随即进入开发。

2022 年 1 月,发布NutUI-React1.0版别。基于 React 17 和 更快的构建东西 Vite,全面运用 TypeScript, 组件规模 60+。下半年咱们持续加码,修正问题 160+,晋级到 React18,组件规模最终达到 70+,对齐了 Vue。NutUI-React 的规划与 Vue 版坚持一致,比如项目架构,小到组件的 props、events 都坚持产品的统一性。

NutUI-React 根本坚持每周一个版别的迭代频率,快速解决开发者的诉求和问题,累计发布 26 巨细版别。截止现在在集团内部 15+ 项目中得到运用,其中不乏一些战略级项目如京东万商。

多端小程序适配

这一年,咱们完结了 Vue 和 React 两大技能栈对小程序运用的支撑。

一直以来 NutUI 都只是移动端的 H5 组件,咱们经过集团内兄弟产品 Taro 对 NutUI 每一个组件进行深度适配,从 4 月份 NutUI-Vue 到 12月份 NutUI-React 均完结了全部组件的适配。NutUI 完结从单一的 H5 组件进化到小程序组件,为广巨细程序开发者带来便利和提效。

  • 2021年6月,NutUI-Vue 完结多端小程序的适配并发布「NutUI 3.1 正式发布:敞开多端开发之路」。
  • 2022年11月,NutUI-Vue 发布京东小程序「NutUI 京东小程序发布了」。
  • 2022年12月,NutUI-React 完结多端小程序的适配并发布「京东 React 组件库支撑小程序开发了」。

2022 倒带 - NutUI

组件级款式修正

这一年,咱们完结了比传统主题定制更细粒度的组件等级定制。

区别于传统组件库的主题定制,咱们用「组件级款式修正」字样来表达,为完成「组件级款式修正」,咱们做了很多重构作业,抽取多达 500+ 款式变量,只为完成组件款式完全定制化,最终完成不同事务场景不同的 UI(千场景千变UI)。

NutUI 还供给在线主题定制功用,可依据需求场景装备主题色,实时预览 UI 作用。主题定制装备层分为大局根本变量、组件根本变量,如组件库大局主题颜色、字体等款式;组件层的装备更细节,可设置如圆角、边框尺寸等。想快速了解,请点击:一分钟上手主题定制

2022 倒带 - NutUI

主题皮肤建造

这一年,在支撑事务开发的一起咱们联合兄弟部门开发了 2 套主题:零售B商城主题、零售企业事务主题。截止现在累计有 4 套官方主题供开发者选用。

B 商城主题

京东零售 B 商城旨在打造全我国最大的综合性的 B2B 买卖渠道,构建健康的 B 事务生态,方针是成为我国最大的商家买卖服务渠道。B 商城全体还是京东红风格,但在细节方面有很大不同,重新输出了规划 UI 稿。
咱们在第二季度按 B 商城 UI 完成了B 商城版主题,为开发者供给更多款式挑选。

企业事务主题

第三季度,京东企业事务逐步梳理并输出了视觉标准,咱们遵从企业事务视觉标准开发出了企业事务主题,服务于京东慧采、京东锦礼、京东企业购等产品。本套主题依据事务产品和规划师的需求一起修正拟定,共涉及 17 个组件,优化或新增 scss 变量近 100 处,完成对企业事务的定制化开发。

京东科技主题

最后,还有上一年上线的京东科技主题(蓝色)NutUI-JDT,您能够依据项目诉求挑选这三套不同的 UI 风格开发项目。

2022 倒带 - NutUI

组件国际化才能

这一年,咱们完结了组件国际化才能建造,翻译完结 4 套语言包。

2022年第一季度接到内部京东国际研制团队的诉求(满意泰国站、印尼站移动端需求),在 2022 年 5 月咱们完结了组件国际化才能建造。国际化支撑多语言设置,支撑繁体中文、英语、印尼语、泰语五种语言包,默认运用中文,直接引入 locale 和语言包就能够,如有其他语种可参考现在的语言包来快速装备。

视频资源:NutUI 3.0组件库通用才能提高

组件功用差异性剖析和补齐

这一年,咱们剖析业界干流和闻名移动端组件库,比照了每一个组件功用,补齐 NutUI 缺失功用。

”三人行,必有我师焉“,2022Q1开始咱们从组件的运用文档、功用点、API维度比照了业界干流组件库Vant、Antd mobile、TDesign。并在接下来的 9 个月时间内新增或改造组件 100+ props、优化组件文档 70+ 处、新增 Demo 20+。使得 NutUI 功用更加完善和文档更好用。

2022 倒带 - NutUI

这儿也有一篇视频共享:NutUI 组件才能剖析和夯实

新增暗黑形式

这一年,咱们全面提高用户体会保护视力,新增暗黑形式(深色形式)。

移动端用户首要运用的是安卓和苹果系统,手机系统的显示亮度可挑选深色或淡色、即依据周边环境或时间来调整 UI 的深淡色,让用户的眼睛更舒服,也保护了视力。为提高用户体会感,NutUI 添加暗黑形式,依据手机的亮度形式主动适配,运用 ConfigProvider 装备一键自在切换。

2022 倒带 - NutUI

组件质量提高

这一年,进一步夯实组件质量,除正常每月的代码 Review 外,咱们为全部组件新增单元测验。

NutUI 现具有 70+ 组件,组件库的丰厚度完全能够掩盖绝大多数事务场景。正所谓”慢工出细活“,添加单元测验功用,打磨组件的质量。单元测验的编写掩盖多数运用场景,使其测验掩盖率尽可能达到 80% 以上,每个单元测验都可主动执行,每个用例都独立且彼此隔离,断言和快照等关键功用校验经过。单元测验有用排除 TS 类型、DOM 等错误或不标准问题,进一步检测和排查到组件逻辑问题、动画作用反常等。

开发体会

这一年,为了提高开发者体会咱们在官网新增了在线调试功用,在干流 IDE 开发了 NutUI 插件。

预览调试

并不是全部的同学对 NutUI 都一目了然,怎么让大家快速感知到组件的功用和属性?一般是阅读组件相关文档,组件的文档就要完好和明晰,示例全面。经过社区的反馈和团队开发打磨,NutUI 的组件文档和示例也在按部就班。

为提高开发和阅读体会,全部组件 demo 中添加在线预览调试功用codesandbox、codeHouse,可直观的感触组件的各种属性和方法。

预览,首要面向产品、测验、运营同学,经过修正组件的 props 看到实时作用;调试,首要面向研制同学,复现问题、测验交互及功用。

2022 倒带 - NutUI

IDE 插件

”工欲善其事,必先利其器“,vscode 和 webStorm 依然成为开发神器,以 IDE 为基础,年中咱们发布了一款开发辅助插件,它供给组件高亮才能,代码主动补全,快速查看文档,props、event 阐明。

2022 倒带 - NutUI

vscode 可到插件市场搜索 nutui-vscode-extension 装置,结合 Vetur 东西运用更佳;webStorm 内只要项目内有 NutUI 就可直接体会;插件简化了切换浏览器、编辑器等的操作,让开发称心如意。

2022 倒带 - NutUI

开源收成

这一年,在开源之路上咱们坚定前行,与很多社区开发者共享创造效果,收成满满,心存感恩。

至 2022 年末,NutUI 开源类产品累计 star 6500+,NPM 下载量全年激增 6.8w,社区运用人数超越 3600+ 人。团队成员也积极参与社区技能论坛,共享建造经历。

NutUI 团队成员受邀参与早早聊共享会、k+全球软件研制行业立异峰会、K+Talk等技能会议,共享 NutUI 的生长进程与技能晋级。2022 年成功入选“科创我国”开源立异榜,一起作为开源项目参与 2022 敞开原子开源大会。

2022 倒带 - NutUI

感恩尽力的您

NutUI 的生长离不开广阔社区开发者的反馈和共建,现在 contributor 达到 150+ ,微信服务群有 4 个,内部咚咚群 3 个。2022 年开发者 commit 代码 3496 条记录,在社区开发者的一起尽力下累计关闭了 3053 个 issue。

感谢您的每一次 PR!

2023 展望

2022 风劲潮涌,对于每个个体都是不普通的一年。展望新的一年,NutUI 将继续奋楫扬帆,将务实进行到底,围绕研制提效和事务赋能不断夯实质量,体会立异。

咱们即将迎来 NutUI 4.0 的到来,为了带来更好的产品体会,新版别晋级了架构并有一些破坏性改动。咱们抽离出独自的 icon 图标库便利开发者运用自己的 icon 库替换、运用 pnpm 包办理、晋级到 vite3 构建速度快 2-3 倍、组件统一 BEM 标准、运用最新的 CSS 动态主题特性、对组件减肥体积减少 100kb、选用函数式组件等、新增 Tour 引导组件,Pullrefresh 组件。官网拆分 H5,小程序运用的运用文档,供给新的代码风格指南等。

全部全部只为打造一款好用的移动端组件库,2023 年阴历新年前发布,敬请赐候~