当前位置: 首页 > Web前端 > HTML

京东vue3组件库震撼升级,如约而至!

时间:2023-03-28 16:36:52 HTML

京东零售开源项目NutUI是一套京东风格的轻量级移动端Vue组件库,是一款开发和服务于移动端Web界面的企业级产品。经过长时间的开发打磨,NutUI3.0终于来了!3.0版本在技术和视觉上都有了很大的提升,让组件看起来更美观,使用起来也更舒服。先看源码:https://github.com/jdf2e/nutui3.0官网:https://nutui.jd.com/3x新变化技术亮点EmbraceVue3并介绍Vue3新特性CompositionAPI、Teleport、Emits等破坏性改动,全面升级使用组合APIComposition语法重构,结构清晰,功能模块组件emits事件单独提取,增强代码可读性,使用Teleport新特性重构挂载类组件构建工具,升级到Vite2.x,弃用webpack,介绍下一代前端构建工具Vite。启动速度从30s提升到500ms左右,将大大提高开发效率。全面使用TypeScriptNutUI3.0以TypeScript作为主要开发语言,应对前端应用复杂度飙升背景下组件维护难、扩展难的问题。视觉体验全面升级NutUI是一款京东风格的轻量级Vue组件库。随着Vue3.0的不断完善和发布,我们的京东设计系统也升级了全新的APP9.0设计语言。NutUI基于京东APP9.0设计语言,结合多种零售应用场景,打造更加规范的设计语义。对于组件的可扩展性,基础组件可以覆盖多个业务场景的使用,减少冗余控制。帮助移动端设计人员快速复用基础组件,建立通用详细设计标准提高接口模块化,建立设计开发对接基础标准提高产研输出对接效率,减少输出工作量“场景动线”到让体验更流畅面对不断壮大的产品体系,业务类型和内容也越来越复杂,设计效率的提升推动了设计体系的变革。通过组件化的解决方案,减少冗余的设计和生产成本,让设计师专注于更好的用户体验,发挥更高的设计价值。生产初衷的痛点难点组件和规范已经形成。在考虑业务场景组件时,新的问题又出现了:什么时候该放弃规范,什么时候又该坚守规范?除了基于京东APP9.0最新规范提取的组件外,我们还需要考虑到用户在非零售场景下的各种业务中需要使用到的组件非常多。这是每个从自己业务出发的组件库团队都会遇到的问题:(1)一方面,我们要保证产品整体的一致性,尽量不打破原有的规则来设计,尽量使用组件满足业务需求;(2)另一方面,在一些特殊的业务场景下,不使用组件的设计方案会有更好的体验。这样的困境会经常遇到,业务的特殊性和组件的一致性很难共存。发展与挑战互联网的飞速发展给设计师和工程师带来了巨大的挑战。以前的单向协作模型很难应用。交流变得更多。然而,设计师和工程师之间难以弥合的“鸿沟”会降低协作效率。为了彼此有更多的时间在各自的领域做更有价值的事情,这个隔阂必须要被扫除。一个优秀的组件库可以让我们的沟通更高效,开发更快,产品体验更一致,可以大大提高产研效率。标准和体验组件库的初衷是为设计和开发带来标准化的体验,保证不同页面层次的信息架构、视觉表达和交互体验的统一。在产品端,跨链接、跨位置的用户体验是一致的,看到的信息元素也会有共同的传达。开发通过建立公共组件库可以大大提高开发效率。一旦样式被前端工程师开发成统一的组件,将具有以下优势:减少冗余,优化性能,提高开发效率;改进设计还原;降低研发的设计和对接成本;统一产品体验,映射品牌心智。设计师的输出与技术人员的输出之间的同步几乎是当前每个系统中令人头疼的问题。因为设计师设计的组件的可组合性不等同于技术人员开发的组件。举个例子:设计师给的设计稿是用6个部件组装起来的,技术人员发现他需要8个东西来组装,这就是不等可组合性。这个问题会让很多试图消除设计和开发边界的产品难以为继,因为从设计者的角度来看组件通常不会考虑可组合性。自己的眼界往往是有限的,不可能全面了解用户在每个模块和状态下的使用场景。其他角色的输出其实很有价值。只有不自相矛盾,接受各种想法,对设计关键点进行抽象提炼,才能推导出大家认可的解决方案。NUTUI3.0在建立设计与开发衔接的基本标准方面,我们的设计师和开发团队共同探索,将各个组成元素打散,重新思考其内在的【一致性】和【可组合性】。在不同的需求和场景下,还可以灵活支持页面内容的扩展和扩展。NutUI也将在不断迭代升级优化中成长,在产学研协同中发展进步。作为一个开源的组件库,赋能案例不仅涵盖了零售业务中众多场景的需求,还对开源面向海量用户的各种场景下的组件应用进行了深入思考。对组件库的每一次优化都是基于用户和场景假设。我们的优化需要经得起用户和市场的考验,验证-迭代是我们长期要做的。【NUTUI3.0部分赋能案例】如下:贴心频道长期以来,团队成员一直在努力维护NUTUI2.0。3.0版本发布后,我们仍将积极维护和迭代,为有需要的同学提供技术支持,不定期发布一些相关文章,帮助大家更好的了解和使用我们的组件库。附上我们研发小哥在各个开发组件中的所见所思,一起来看看我们在开发过程中的研发小故事吧:https://jelly.jd.com/search/all?keyword=敬请关注nutuiNutUI涨了2800+Stars自2018年发布以来。2020年,在Vue编程范式大升级和Vue3.0发布的背景下,我们积极参与NutUI对Vue3.0的升级适配。由于网络版本低,款式陈旧,规格不一致,我们决心进行大改。全新的NutUI3.0依然坚持【基于京东风格】,即组件规范基于京东APP最新移动端规范9.0进行视觉延伸。设计上,每个组件都秉承极致体验、标准规格和强大扩展性制作模板,同时在产品的功能、体验、易用性和灵活性等方面进行了全方位的升级!平滑过渡到Vue3始终是一件非常困难的事情,需要考虑兼容性和用户影响等各种问题。不过,经过6个月的开发,NutUI3.0版本终于如期与大家见面了!这是一个组件丰富的Vue组件库,涵盖70+个精美组件。本次发布预计34日上线,后续会持续补充更新。敬请期待~NutUI着眼于未来,拥有成熟的设计体系,以及强大的可组合特性和灵活的扩展性,期待您的使用和反馈,喜欢就来点个Star吧??支持我们~