Проект с открытым исходным кодом JD Retail NutUI — это набор облегченной библиотеки мобильных компонентов Vue в стиле JD, которая представляет собой продукт корпоративного уровня для разработки и обслуживания мобильных веб-интерфейсов. После долгого периода разработки и полировки NutUI 3.0 наконец-то здесь! В версии 3.0 были внесены значительные улучшения как в технических, так и в визуальных аспектах, благодаря чему компоненты выглядят более великолепно и удобнее в использовании.
Сначала посмотрите на исходный код:https://github.com/jdf2e/nutui
3.0 официальный сайт:https://nutui.jd.com/3x
новое изменение
Технические особенности
- Примите Vue3
- Представьте новые функции Vue3 Composition API, Teleport, Emits и т. д.
- Критические изменения, полные обновления
- Рефакторинг с использованием комбинированного синтаксиса API Composition с четкой структурой и модульными функциями.
- События, испускаемые компонентом, извлекаются отдельно для повышения читабельности кода.
- Рефакторинг компонентов класса скакунов с использованием новых функций Teleport
- Обновление инструмента сборки до Vite2.x
Откажитесь от веб-пакета и представьте Vite, инструмент сборки внешнего интерфейса нового поколения. Скорость запуска увеличена с исходных 30 до примерно 500 мс, что значительно повысит эффективность разработки.
- Полное использование TypeScript
NutUI 3.0 использует TypeScript в качестве основного языка разработки, а в контексте растущей сложности интерфейсных приложений сложно поддерживать и расширять компоненты.
Полностью обновленный визуальный опыт
NutUI представляет собой набор облегченной библиотеки компонентов Vue в стиле Jingdong. Благодаря постоянному совершенствованию и выпуску Vue 3.0 наша система дизайна Jingdong также была обновлена с новым языком дизайна APP9.0. NutUI основан на дизайне Jingdong APP9.0. язык в сочетании с розничной торговлей Многочисленные сценарии приложений создают более стандартизированную семантику дизайна Для масштабируемости компонентов базовые компоненты могут охватывать использование в различных бизнес-сценариях
- Сократите избыточные элементы управления
- Помогите мобильным дизайнерам быстро повторно использовать базовые компоненты
- Установить общие стандарты детализации
- Улучшить модульность и универсальность интерфейса
- Установить основные стандарты связи между проектированием и разработкой
- Повысьте эффективность производства и стыковки результатов исследований и сократите рабочую нагрузку на выходе.
- На основе системы языков проектирования JD строить сценарии
- Основной процесс реконструкции костной ткани и построения «движущихся линий сцены» делает процесс более плавным.
- Сталкиваясь с постоянно растущей системой продуктов, бизнес-типы и содержание становятся все более и более сложными, а эффективность дизайна стимулирует реформу системы дизайна. Благодаря компонентным решениям снижаются избыточные затраты на проектирование и производство, что позволяет разработчикам сосредоточиться на улучшении взаимодействия с пользователем и повышении ценности дизайна.
Первоначальный замысел сделать
Боль и трудности
Компоненты и спецификации обрели форму, и при рассмотрении компонентов бизнес-сценария возникают новые вопросы: когда следует отказаться от спецификации, а когда придерживаться спецификации? В дополнение к компонентам, извлеченным на основе последней спецификации JD.com 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 получил более 2800 звезд с момента своего выпуска в 2018 году.
В 2020 году, в контексте серьезного обновления парадигмы программирования Vue и выпуска Vue 3.0, мы активно участвуем в обновлении и адаптации NutUI к Vue 3.0. Из-за низкой онлайн-версии, старого стиля и противоречивых спецификаций мы полны решимости внести серьезные изменения.Новый NutUI 3.0 по-прежнему придерживается [на основе стиля JD], то есть спецификация компонента основана на новейшая спецификация мобильного терминала 9.0 JD APP для визуального расширения. Разработанный каждый компонент соответствует максимальному опыту, стандартным спецификациям и сильной расширяемости для создания шаблонов, и в то же время было произведено комплексное обновление всех аспектов функциональности продукта, опыта, простоты. использования и гибкости!
Плавный переход на Vue3 — это всегда очень сложно, и необходимо учитывать различные вопросы, такие как совместимость и влияние на пользователя, но после 6 месяцев разработки NutUI версии 3.0, наконец, идет по графику.
Это библиотека компонентов Vue с богатыми компонентами, охватывающая более 70 изысканных компонентов. Ожидается, что в этом выпуске будет запущено 34, и в будущем он будет дополняться и обновляться, так что следите за обновлениями~
NutUI ориентирован на будущее, имеет зрелую систему дизайна, мощную компонуемость и гибкую масштабируемость, с нетерпением жду вашего использования и отзывов, если вам это нравится,Приходи и поддержи нас Звездой ❤️~