2022倒带NutUI

　　作者：京东零售于明明前言
　　时光飞逝，流年似水，让我们倒带2022，回首这跌宕起伏一年走过的升级之路。NutUI表现如何？成绩单等着您打分！
　　2022是NutUI在技术长廊中探索和成长的第四个年头，悄然度过了自己的孩提时光。NutUI也从单一Vue技术栈的组件库逐渐成长为适配多端的多技术栈的组件库，升级设计规范京东APP视觉京东科技视觉，适配Taro框架支持小程序开发，拓展React技术栈，打造NutUI业务组件生态等。
　　2022是不平凡的一年，新冠末年前端技术也急剧变革，低代码的风起（Retool），D2C和AI（codefunChatGPT）的涌动，对各行各业的开发者带来了很大的冲击。然而NutUI初心未变，做好UI组件，服务于原始的代码开发者，同时亦为低代码平台提供支撑，就在这一亩三分地里精耕细作。
　　2022，我们相继完成了React技术栈的发布、多端小程序的适配、对组件功能进行比较并补齐、增加单测、丰富主题定制、完备国际化功能、推出IDE插件，在线代码调试等功能。目的只有一个：打造一款好用的移动端组件库，为开发提效，为业务赋能，为开源贡献一份力量
　　React技术栈扩充
　　这一年，我们完成了React技术栈的扩充。
　　NutUI自发布以来都是以Vue技术栈为底座进行迭代和升级，随着集团内部及社区对React版本的呼声越来越高。2021年6月我们启动了NutUIReact规划并随即进入开发。
　　2022年1月，发布NutUIReact1。0版本。基于React17和更快的构建工具Vite，全面使用TypeScript，组件规模60。下半年我们持续加码，修复问题160，升级到React18，组件规模最终达到70，对齐了Vue。NutUIReact的设计与Vue版保持一致，诸如项目架构，小到组件的props、events都保持产品的统一性。
　　NutUIReact基本保持每周一个版本的迭代频率，快速解决开发者的诉求和问题，累计发布26大小版本。截止目前在集团内部15项目中得到应用，其中不乏一些战略级项目如京东万商。
　　多端小程序适配
　　这一年，我们完成了Vue和React两大技术栈对小程序应用的支持。
　　一直以来NutUI都只是移动端的H5组件，我们通过集团内兄弟产品Taro对NutUI每一个组件进行深度适配，从4月份NutUIVue到12月份NutUIReact均完成了所有组件的适配。NutUI完成从单一的H5组件进化到小程序组件，为广大小程序开发者带来便利和提效。2021年6月，NutUIVue完成多端小程序的适配并发布NutUI3。1正式发布：开启多端开发之路。2022年11月，NutUIVue发布京东小程序NutUI京东小程序发布了。2022年12月，NutUIReact完成多端小程序的适配并发布京东React组件库支持小程序开发了。
　　组件级样式修改
　　这一年，我们完成了比传统主题定制更细粒度的组件级别定制。
　　区别于传统组件库的主题定制，我们用组件级样式修改字样来表达，为实现组件级样式修改，我们做了大量重构工作，抽取多达500样式变量，只为实现组件样式完全定制化，最终实现不同业务场景不同的UI（千场景千变UI）。
　　NutUI还提供在线主题定制功能，可根据需求场景配置主题色，实时预览UI效果。主题定制配置层分为全局基本变量、组件基本变量，如组件库全局主题颜色、字体等样式；组件层的配置更细节，可设置如圆角、边框尺寸等。想快速了解，请点击：一分钟上手主题定制
　　主题皮肤建设
　　这一年，在支持业务开发的同时我们联合兄弟部门开发了2套主题：零售B商城主题、零售企业业务主题。截止目前累计有4套官方主题供开发者选用。B商城主题
　　京东零售B商城旨在打造全中国最大的综合性的B2B交易平台，构建健康的B业务生态，目标是成为中国最大的商家交易服务平台。B商城整体还是京东红风格，但在细节方面有很大不同，重新输出了设计UI稿。
　　我们在第二季度按B商城UI实现了B商城版主题，为开发者提供更多样式选择。企业业务主题
　　第三季度，京东企业业务逐渐梳理并输出了视觉规范，我们遵循企业业务视觉规范开发出了企业业务主题，服务于京东慧采、京东锦礼、京东企业购等产品。本套主题根据业务产品和设计师的需求共同修改制定，共涉及17个组件，优化或新增scss变量近100处，实现对企业业务的定制化开发。京东科技主题
　　最后，还有去年上线的京东科技主题（蓝色）NutUIJDT，您可以根据项目诉求选择这三套不同的UI风格开发项目。
　　组件国际化能力
　　这一年，我们完成了组件国际化能力建设，翻译完成4套语言包。
　　2022年第一季度接到内部京东国际研发团队的诉求（满足泰国站、印尼站移动端需求），在2022年5月我们完成了组件国际化能力建设。国际化支持多语言设置，支持繁体中文、英语、印尼语、泰语五种语言包，默认使用中文，直接引入locale和语言包就可以，如有其他语种可参考目前的语言包来快速配置。
　　视频资源：NutUI3。0组件库通用能力提升组件功能差异性分析和补齐
　　这一年，我们分析业界主流和知名移动端组件库，对比了每一个组件功能，补齐NutUI缺失功能。
　　三人行，必有我师焉，2022Q1开始我们从组件的使用文档、功能点、API维度对比了业界主流组件库Vant、Antdmobile、TDesign。并在接下来的9个月时间内新增或改造组件100props、优化组件文档70处、新增Demo20。使得NutUI功能更加完善和文档更好用。
　　这里也有一篇视频分享：NutUI组件能力分析和夯实新增暗黑模式
　　这一年，我们全面提升用户体验保护视力，新增暗黑模式（深色模式）。
　　移动端用户主要使用的是安卓和苹果系统，手机系统的显示亮度可选择深色或浅色、即根据周边环境或时间来调整UI的深浅色，让用户的眼睛更舒服，也保护了视力。为提升用户体验感，NutUI增加暗黑模式，根据手机的亮度模式自动适配，使用ConfigProvider配置一键自由切换。
　　组件质量提升
　　这一年，进一步夯实组件质量，除正常每月的代码Review外，我们为所有组件新增单元测试。
　　NutUI现拥有70组件，组件库的丰富度完全可以覆盖绝大多数业务场景。正所谓慢工出细活，增加单元测试功能，打磨组件的质量。单元测试的编写覆盖多数应用场景，使其测试覆盖率尽可能达到80以上，每个单元测试都可自动执行，每个用例都独立且相互隔离，断言和快照等关键功能校验通过。单元测试有效排除TS类型、DOM等错误或不规范问题，进一步检测和排查到组件逻辑问题、动画效果异常等。开发体验
　　这一年，为了提升开发者体验我们在官网新增了在线调试功能，在主流IDE开发了NutUI插件。预览调试
　　并不是所有的同学对NutUI都了如指掌，如何让大家快速感知到组件的功能和属性？一般是阅读组件相关文档，组件的文档就要完整和清晰，示例全面。经过社区的反馈和团队开发打磨，NutUI的组件文档和示例也在循序渐进。
　　为提升开发和阅读体验，所有组件demo中增加在线预览调试功能codesandbox、codeHouse，可直观的感受组件的各种属性和方法。
　　预览，主要面向产品、测试、运营同学，通过修改组件的props看到实时效果；调试，主要面向研发同学，复现问题、测试交互及功能。
　　IDE插件
　　工欲善其事，必先利其器，vscode和webStorm依然成为开发神器，以IDE为基础，年中我们发布了一款开发辅助插件，它提供组件高亮能力，代码自动补全，快速查看文档，props、event说明。
　　vscode可到插件市场搜索nutuivscodeextension安装，结合Vetur工具使用更佳；webStorm内只要项目内有NutUI就可直接体验；插件简化了切换浏览器、编辑器等的操作，让开发得心应手。
　　开源收获
　　这一年，在开源之路上我们坚定前行，与众多社区开发者共享创作成果，收获满满，心存感恩。
　　至2022年末，NutUI开源类产品累计star6500，NPM下载量全年激增6。8w，社区使用人数超过3600人。团队成员也积极参加社区技术论坛，分享建设经验。
　　NutUI团队成员受邀参加早早聊分享会、k全球软件研发行业创新峰会、KTalk等技术会议，分享NutUI的成长历程与技术升级。2022年成功入选科创中国开源创新榜，同时作为开源项目参加2022开放原子开源大会。
　　感恩努力的您
　　NutUI的成长离不开广大社区开发者的反馈和共建，目前contributor达到150，微信服务群有4个，内部咚咚群3个。2022年开发者commit代码3496条记录，在社区开发者的共同努力下累计关闭了3053个issue。
　　感谢您的每一次PR！
　　2023展望
　　2022风劲潮涌，对于每个个体都是不平凡的一年。展望新的一年，NutUI将继续奋楫扬帆，将务实进行到底，围绕研发提效和业务赋能不断夯实质量，体验创新。
　　我们即将迎来NutUI4。0的到来，为了带来更好的产品体验，新版本升级了架构并有一些破坏性改动。我们抽离出单独的icon图标库方便开发者使用自己的icon库替换、使用pnpm包管理、升级到vite3构建速度快23倍、组件统一BEM规范、使用最新的CSS动态主题特性、对组件瘦身体积减少100kb、采用函数式组件等、新增Tour引导组件，Pullrefresh组件。官网拆分H5，小程序应用的使用文档，提供新的代码风格指南等。
　　所有一切只为打造一款好用的移动端组件库，2023年农历春节前发布，敬请赐候