乐趣区

关于前端:京东-vue3-组件库震撼升级如约而至

jiezi

京东批发开源我的项目 NutUI 是一套京东格调的轻量级挪动端 Vue 组件库，是开发和服务于挪动 Web 界面的企业级产品。通过长时间的开发与打磨，NutUI 3.0 终于和大家见面了！3.0 版本在技术和视觉方面都做出了较大改良，让组件看起来更壮丽，用起来更难受。

源码领先看：https://github.com/jdf2e/nutui

3.0 官网：https://nutui.jd.com/3x

全新扭转

技术看点

  1. 拥抱 Vue3
  2. 引入 Vue3 新个性 Composition API、Teleport、Emits 等
  3. 破坏性变更，全面降级
  4. 采纳组合式 API Composition 语法重构，构造清晰，性能模块化
  5. 组件 emits 事件独自提取，加强代码可读性
  6. 应用 Teleport 新个性重构挂载类组件
  7. 构建工具降级为 Vite2.x

弃用 webpack，引入下一代前端构建工具 Vite。启动速度由原来 30s 晋升到 500ms 左右，将大幅晋升开发效率。

  1. 全面应用 TypeScipt

NutUI 3.0 应用 TypeScript 作为次要开发语言，在前端利用复杂度一直飙升的大背景下，应答组件不易保护且难于扩大的问题。

视觉体验全面降级

NutUI 是一套领有京东格调的轻量级的 Vue 组件库，随着 Vue 3.0 不断完善和公布，咱们的京东设计体系也降级了全新 APP9.0 设计语言，NutUI 基于京东 APP9.0 设计语言联合批发泛滥的利用场景打造更加标准化的设计语义，对于组件的扩展性，根底组件可笼罩多种业务场景下的应用

  • 缩小冗余控件
  • 帮忙挪动端设计师疾速复⽤根底组件
  • 建设通⽤的细节设计标准
  • 进步界⾯的模块化通用水平
  • 建⽴设计与开发对接的根底规范
  • 提⾼产研输入对接的效率，升高输入工作量
  • 基于京东设计语言体系，构建场景
  • 骨骼精细化重构主流程，构建“场景动线”，让体验更晦涩
  • 面对一直成长的产品体系，业务类型和内容一直复杂化，设计提效推动着设计体系的改革。通过组件化的解决方案，升高冗余的设计生产成本，使设计师专一于更好的用户体验，施展更高的设计价值。

制作初衷

痛点与难点

组件和标准已有雏形，在思考业务场景组件的时候新的问题又来了：咱们应该在什么时候放弃标准，什么时候保持标准？
除了基于京东 APP 9.0 的最新标准抽离进去的组件，咱们还要思考还有很多非批发场景下用户的各种业务要用到的组件，这是每个从本人业务为终点做组件库团队都会遇到的问题：

（1）一方面咱们想保障整体产品的一致性，尽量不突破原有的规定去设计，尽量应用组件笼罩业务需要；

（2）另一方面，在一些非凡的业务场景下，不应用组件的设计方案会有更好的体验。这样的两难窘境会常常遇到，业务的特殊性和组件的一致性很难共存。

倒退与挑战

互联网的疾速倒退给设计师和工程师带来了微小的挑战，以往的单向合作模式很难再实用，取而代之的新合作流程将会是一种循环演进的模式，令二者之间的交换变得更多。然而，设计师和工程师之间难以逾越的“鸿沟”会升高合作的效率，为了彼此有更多的工夫去做各自畛域更具价值的事件，就必须打消这层妨碍。


一套优良的组件库便能够让咱们的沟通更高效，开发更快捷，产品的体验更统一，能够极大限度地晋升产研效率。

规范与体验

组件库的初衷其实是为设计和开发带来一套标准化的体验，保障对立不同页面层级的信息架构、视觉表白和交互体验。用户在产品终端内，各链路、各阵地的体验是统一的，看到的信息元素，也会有共性的传播。
开发通过建设公共组件库，能够极大地提高开发效率，款式一旦被前端工程师开发成对立的组件，便有了如下长处：

  • 缩小冗余，优化性能，晋升开发效率；
  • 进步设计还原度；
  • 升高设计和研发的对接老本；
  • 对立产品体验，映射品牌心智。


设计师产出与技术人员产出之间的同步性，这个事件简直在以后每个体系中都比拟头疼。因为设计师设计的组件，与技术人员开发出的组件，其可组合性并不等价。

举个例子：设计师给出的设计稿，是 6 个组件拼装的，然而技术人员发现，他须要用 8 个货色能力拼装进去，这就是不等价的可组合性。这个问题，就会导致当初很多尝试打消设计与开发边界的产品做起来困难重重，因为设计师视角的那些组件，其可组合性的思考通常是有余的。本人的眼界往往是局限的，不可能齐全理解用户在各个模块下，各个状态下的应用场景。其余角色的输入其实十分有价值。不冲突意见，接收各种思维，形象提炼要害设计点，能力推导出大家认可的解决方案。


NUT UI3.0 在建设设计与开发对接的根底规范方面，咱们团队的设计师和研发独特摸索，打散每个组件元素，从新思考其内在的【一致性】和【可组合性】。在不同的需要和场景中也可能灵便撑持页面内容进行延展和裁减，NutUI 也会在一直的迭代降级优化中成长，在产研协同中倒退提高。

赋能案例

作为一个开源的组件库，咱们不仅笼罩批发业务下的诸多场景需要，对于开源面对宽广的用户的各种场景下的组件利用，也都进行了深刻思考。对组件库所做的每一个优化，都是基于用户和场景的假如。咱们的优化须要经得起用户和市场的考验，验证 - 迭代是咱们长期要做的事。

【NUT UI3.0 局部赋能案例】如下：

贴心通道

长期以来，团队的小伙伴都在尽心尽力地保护着 NutUI 2.0。在 3.0 版本公布后，咱们仍然会踊跃地保护与迭代，为有须要的同学提供技术支持，也会不定时地公布一些相干的文章帮忙大家更好地了解与应用咱们的组件库。

附上咱们研发小哥哥在每次开发组件当中的所见所想，来看看咱们在开发中点点滴滴的研发小故事吧： https://jelly.jd.com/search/all?keyword=nutui

敬请期待

NutUI 自 2018 年公布以来播种了 2800+ Star。

2020 年，在 Vue 编程范式做出了重大降级，并公布了 Vue3.0 的大背景下，咱们踊跃投入到 NutUI 对 Vue 3.0 的降级适配工作中。因为线上版本较低、款式老旧且标准不对立，咱们下定决心进行大换血，新的 NutUI 3.0 仍坚守着【基于京东格调】即组件标准是依据京东 APP 最新挪动端标准 9.0 来进行视觉延展设计的，各组件秉承着体验极致，标准规范和扩性强来进行产出模板，同时在产品的性能、体验、易用性和灵活性等各个方面做了全面的降级！

平滑过渡到 Vue3 总归是很件很艰巨的事件，须要思考兼容性和用户影响等种种问题，但历经 6 个月的开发，NutUI 3.0 版本终归是如期和大家见面了！

这是一款组件丰盛的 Vue 组件库，涵盖 70+ 精美组件，本次发版预计上线 34 个，将来会继续补充更新，敬请期待~

NutUI 着眼将来，领有成熟的设计体系，弱小的可组合性和灵便的可扩大能力，期待您的应用与反馈，如您喜爱，来点个 Star ❤️ 反对咱们一下吧 ~

退出移动版