Путь к фронтенд-разработке членов JD PLUS в 2019 году

внешний интерфейс

Время летит, белые кони проносятся мимо, а 2019 год быстротечен. Этот год был ухабистым и насыщенным для передовых студентов программы членства PLUS.Как сказал Бай Яньсонг, он был болезненным и счастливым. Оглядываясь назад, мы сталкиваемся с такими проблемами, как последовательный доступ к правам на межотраслевое сотрудничество, большое продвижение 6.18 и событие double 11, а также вкрапления белых страниц на первом экране некоторых моделей.После периода паники, мы постепенно стабилизировали наше положение. При выполнении ежедневных требований, основанных на оригинальном фреймворке, стабильность, загрузка, опыт, эффективность разработки и другие аспекты проекта были консолидированы.

В 2019 году было поддержано около 90 больших и малых требований. Он в основном делится на четыре категории: модернизация продукта, межотраслевое сотрудничество, рекламная деятельность и неотложные потребности. Эти требования включают в себя требования к правам и интересам новых пользователей классических карт, таких как здоровье, чтение, экспресс-купоны и скидка 5% на права на товары. Он также значительно расширил свои союзы с другими зарубежными отраслями, такими как Tencent Video, Ctrip Travel, Kugou Music и т. Д. Кроме того, есть оптимизация производительности и оптимизация взаимодействия с пользователем, инициированная стороной R&D.

Программа членства PLUS охватывает три рабочих места: отдел исследований и разработок и проектов в Пекине (2 рабочих места) и команда разработчиков в Шанхае. Коммуникация особенно важна. Любая небольшая проблема может стать проблемой среди пользователей. Каждая операция в Интернете должна быть осторожной, как ходьба по тонкому льду.

Функции проекта сложные, состояние громоздкое, а бизнес-логика часто содержит загадку, одно изменение может затронуть десятки состояний, влияющих на все тело. Вся страница не может вместить интерактивную логику всплывающего окна, изменить одно место и свернуть все это. Кроме того, часто параллельно идет более десяти требований, и объединенную функцию нужно запускать несколько раз в неделю.

Однако разрыв кокона в бабочку и возрождение из нирваны, которую не нужно сублимировать после крайней боли. Пережив сумасшедший рост, членский проект PLUS похож на безудержного ребенка Мы полны решимости реорганизовать его, изменить статус-кво и позволить ему расти здоровым. В этой статье будут подробно рассмотрены вопросы оптимизации производительности, эффективности разработки и оптимизации процессов, как показано на рисунке:

icon

Что такое членство ПЛЮС

Прежде всего, позвольте мне кратко представить ПЛЮС.Чтобы предоставить основным клиентам лучший опыт покупок, JD.com специально ввела членство в JD.com ПЛЮС, которое включает в себя более десятка преимуществ:

  • 10-кратный возврат покупок в Jingdou: участники PLUS могут вернуть Jingdou на сумму до 220 юаней на человека в течение одного года, а членский взнос за покупку нескольких крупных электроприборов в течение одного года будет возвращен.
  • Бесплатная доставка: получайте 5 купонов на доставку в месяц и 60 купонов на доставку в год. Кроме того, есть экспресс-купон на 36 юаней на весь год.
  • Товары по цене участника: вы можете воспользоваться ценой члена в размере 5 миллионов единиц продукции Jingdong Mall и покупать товары по более низкой цене.
  • Возврат и обмен «от двери до двери»: участники пользуются бесплатной доставкой и бесплатной доставкой «от двери до двери» для послепродажного обслуживания (возврат, обмен, ремонт) самообслуживаемой продукции.
  • Огромные жизненные привилегии: купи один десерт и получи его бесплатно, 50% скидка на просмотр фильмов, 2 часа бесплатного пения на KTV, бесплатный рулет из баранины, когда ты ешь горячее, и много-много других привилегий! система! Нет! хотеть! Деньги!
  • ...

Подробнее права не буду вдаваться в подробности, подробнеекликните сюда

Кроме того, если вы купите кобрендинговую карту членства JD PLUS, у вас будет более двух прав членства, тсс~ сдержанно, в конце концов, все являются членами~

Ребенок: Мама, я хочу купить членство в JD PLUS~ Мама: Купите, купите кобрендинговую карту, одну на двоих, этого достаточно? Ребенок: Хватит, спасибо мама, такая хорошая мама!

Далее, давайте взглянем на участников PLUS.часть страницыИстинное лицо горы Лу:

icon

Ладно, реклама закончилась, переходим к делу.

Интерфейсная архитектура

Проект участника PLUS начал использовать технологический стек Vue в 2018 году, используя инструмент сборки Gaea и библиотеку компонентов NutUI, разработанную командой, и представил Carefree, SMock, Vuex, TS, PWA и т. д.

Инструменты сборки Gaea, представляет собой набор инструментов построения стека технологий Vue, независимо разработанный нашей командой, полный набор решений для стека технологий Vue на основе Node.js, проекта шаблона Webpack и т. д., включая полный рабочий процесс разработки, отладки, упаковки и запуска. . Это значительно повысило эффективность работы, и в настоящее время все Vue-бизнесы команды используют эти леса.

Библиотека компонентов NutUI, представляет собой набор облегченной библиотеки компонентов Vue для мобильных устройств в стиле JD. Он оттачивался нашей командой в течение нескольких лет. В настоящее время используется более 30 мобильных проектов JD.com, а на github получено более 1,5 тыс. звезд. Библиотека компонентов Vue предоставляет большое количество повторно используемых базовых компонентов Vue, что значительно облегчает разработку проектов PLUS.

Carefree , набор универсального решения для тестирования мобильных веб-приложений на реальных машинах, которое не зависит от точек доступа Wi-Fi, является проблемой, которую наша команда обнаружила в ежедневной разработке, поскольку реальные машины полагаются на компьютеры для отправки точек доступа для отладки. , мы стремимся избавиться от точек доступа Wi-Fi. Это набор решений, независимо разработанных для бесплатного и самостоятельно разработанного мобильного веб-тестирования на реальных машинах.

SMock , самостоятельно разработанный командой, для решения проблемы отсутствия данных на ранней стадии проекта, анализа документов, требующих мока, вывода соответствующих mock-данных и запуска службы узла для отладки во фронтенд-разработке, улучшения эффективность разработки переднего плана и поддержка междоменного доступа.

Кроме того, мы внедрили Vuex для управления состоянием, PWA для кэширования данных и автономных приложений, а также попробовали использовать язык разработки TypeScript.

icon

оптимизация производительности

Улучшение производительности рендеринга страниц и улучшение взаимодействия с пользователем — это направление, на котором сосредоточилась команда. На домашней странице использовалось множество методов для оптимизации производительности, в том числе использование скелетного экрана для сокращения времени ожидания пользователя, прямой экспорт основных данных для сокращения времени интерфейса запроса, отложенная прокрутка загрузки внутри пола, использование Webp для уменьшения размера изображения, и так далее. Итак, в начале мы словно стояли на плечах гигантов, неподвижно, из-за боязни случайно поскользнуться и упасть~~

Улучшить производительность рендеринга страниц

Причина этого в том, что полгода назад страница зависла, и проблема с белым экраном время от времени всплывала, преследуя нас, как призрак. И появляется он случайным и случайным.Среди десятков миллионов пользователей всегда найдется несколько мобильных телефонов, выбранных богом удачи, позволяющих им иметь белый экран, застревать и в гневе разбивать свои телефоны об стену. ! Однако тот же мобильный телефон, та же конфигурация и та же версия приложения всегда в безопасности на нашей стороне. За это время мы испробовали множество методов исследования, таких как

спать, пить чай, болтать
Забавно, как это возможно? Мы вернулись к пользователям, чтобы проконсультироваться с этапами воспроизведения, сотрудничали с исследованиями и разработками WebView для выяснения причины, запросили информацию о сбое в соответствии с пин-кодом пользователя, исследовали скрытую точку и сообщили об этом и т. д. Однако случайная проблема не имела большого эффекта. , и только по белой картинке экрана определить проблему было сложно.Где она проявляется? Даже изменение кода, который предположительно влияет, не может подтвердить, что он исправлен.

icon

Вот и думать о чае не хочу, есть не хочу, не могу разобраться. Это кот Шредингера в квантовой механике? Результат окончательного изменения вещей меняется в соответствии с человеческим наблюдением? Можно ли будет получить следующую Нобелевскую премию по физике после ее решения? Внезапно почувствовал легкое возбуждение...

Первый этап: начальное решение проблемы

К счастью, Huangtian окупается: после переключения различных скоростей сети и моделирования различных сред было обнаружено, что при зависании страницы часто сообщается об ошибке, вызванной тем, что зависимые переменные не определены.

Мы знаем, что проекты, разработанные на основе каркаса Webpack и платформы Vue, будут упакованы для создания зависимого JS-файла и бизнес-JS-файла. Для облегчения выхода в интернет в то время использовались ссылки на динамически генерируемые статические ресурсы. Браузеры часто загружают несколько внешних статических ресурсов параллельно, и если бизнес-JS-файл выполняется раньше зависимого JS-файла, зависимая переменная не может быть найдена, и результат только один: страница зависает!

Что ж, поскольку настоящий виновник был заблокирован, следующий шаг — как его изменить.Поскольку динамическая генерация внешних ссылок на статические ресурсы может привести к неопределенности в порядке выполнения JS, мы вернулись к форме упаковки Webpack и автоматическая вставка статических ссылок на ресурсы. Однако действительно ли это конец?

Второй этап: новые вопросы

Конечно, после этого белый экран похож на призрак, и он все еще иногда появляется! Хотя жалоб клиентов стало меньше, чем раньше, время от времени все же возникают спорадические случаи. И с течением времени разрабатываются все новые и новые требования, и каждый раз приходится разрабатывать множество требований параллельно. Чтобы код разрабатывался параллельно без конфликтов и чтобы клиент не кэшировал старые файлы каждый раз, когда они подключаются к сети, файлы с новыми номерами версий используются каждый раз, когда они подключаются к сети. Однако это приводит к тому, что даже при незначительном изменении кода клиентская и серверная части должны быть подключены к сети вместе. дюжина статических ресурсов для каждого изменения, а фронтенд и бэкэнд исследования и разработки огромны. Поэтому мы решили использовать систему «голова и хвост» компании и поместить путь статических ресурсов в систему «голова и хвост». один клик. Однако хорошие вещи требуют много времени.Из-за обслуживания нескольких страниц каждая страница соответствует двум статическим файлам: один файл JS, а другой файл CSS, которые соответственно размещаются в<body>хвост и<head>среди. В результате каждое изменение головного и хвостового файлов влечет за собой модификацию более дюжины файлов (эй, я скучаю по тем дням, когда одноклассники помогали изменить номер версии~), стоимость обслуживания резко возросла, и с увеличением страниц это явление увеличивается или уменьшается;

Кроме того, чтобы облегчить беспокойство пользователей, ожидающих рендеринга страницы, в возвращаемый HTML-код добавлен экран-скелет. К сожалению, мы обнаружили, что каркасный экран не отображается в системе IOS, а напрямую отображает окончательную отрендеренную страницу.

Опираясь на решение вышеуказанных проблем, вместо того, чтобы убегать подобно страусу, зарывающему голову в песок при столкновении с опасностью, мы решили активно оптимизировать и грызть эту твердую кость!

Третий этап: горы и реки полны сомнений, а там еще одна деревня темная и светлая

При обычном механизме рендеринга в браузере после того, как клиент запрашивает HTML обратно с сервера, анализатор HTML будет проходить по этим узлам один за другим от начала до конца HTML-файла. Когда эти узлы являются обычными узлами, синтаксический анализатор HTML добавит эти узлы в дерево DOM. Когда эти узлы представляют собой код JS, синтаксический анализатор HTML передаст управление синтаксическому анализатору JS. Если эти узлы представляют собой код CSS, парсер HTML передаст управление парсеру CSS. Однако, когда исходящий код JS и код CSS не были переданы с сервера в браузер, если в это время в дереве DOM есть визуальные элементы, браузер обычно заранее выбирает отображение некоторого контента на экране в это время. появиться. Но проблема в том, что WebView в системе IOS не отображает эту часть HTML-страницы прямо из сгиба. Структура DOM прямо из HTML будет ждать загрузки и выполнения внешнего CSS и JS перед однородным рендерингом.

Чтобы проверить это предположение, мы можем сократить HTML-код до минимума: просто поместите красный элемент div внутри элемента mount и зеленый элемент div снаружи.

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
    <head>
        <meta content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0,viewport-fit=cover" name="viewport">
        <title>PLUS会员</title>
        <link rel="stylesheet" type="text/css" href="//static.360buyimg.com/exploit/mplus/4.3.2/v4/css/index.css">
        <script>document.documentElement.style.fontSize = 320 / 7.5 + "px"</script>
    </head>
    <body>
    <div id="app">
        <div style="width:100%;height: 200px;background:red;"></div>
    </div>
    <div style="width: 100%;height: 200px;background:green;"></div>
    <script type="text/javascript" src="//static.360buyimg.com/exploit/mplus/lib/4.1/vendor.dll.js"></script>
    <script type="text/javascript" src="//static.360buyimg.com/exploit/mplus/4.3.2/v4/js/index.js"></script>
    </body>
</html>

Тогда эффект в системе IOS показан ниже:

icon

Видно, что, поскольку красный div расположен в элементе mount, он напрямую заменяется сгенерированной страницей Vue, а зеленый div отображается вместе со страницей Vue. отобразится чуть позже. Но ни один из div не будет отображаться до первоначального рендеринга страницы Vue.

Тогда скелетный экран на стороне IOS сталкивается с такой же ситуацией: если он размещен внутри элемента монтирования, то он вообще не будет отображаться, если же он размещен вне элемента монтирования, то появится одновременно с рендерингом Vue. страницу, и смысл скелетного экрана будет потерян.

Во избежание внешней загрузки CSS и JS, из-за которой система IOS влияет на отрисовку экрана-скелета прямо из первого экрана, по-прежнему необходимо динамически импортировать JS и CSS после загрузки экрана-скелета. объем кода самого каркаса экрана домашней страницы невелик, после его загрузки можно динамически импортировать статические ресурсы, а время мало на что влияет (экспериментальные данные последуют позже). Но вернемся к первому этапу, проблеме порядка выполнения JS, вызванной динамической генерацией статических ресурсов.

Итак, после круга нет решения, конец пьесы~

Подождите, шучу, легко сдаться! После многих попыток мы приняли метод введения мониторинга событий, основная идея которого заключается в выполнении бизнес-кода после загрузки всех зависимых файлов. преимущество:

  1. Обеспечивает параллельную загрузку статических ресурсов, не затрагивая исходный метод загрузки;
  2. Порядок выполнения кода гарантируется;

Во время этого процесса необходимо обратить внимание на:

  1. Не пишите код синтаксиса ES6 в HTML, чтобы избежать несовместимости браузеров с низкими версиями из-за компиляции без Babel;
  2. Создайте несколько тегов JS, сначала подключите их к объекту виртуального узла, а затем единообразно подключите их к телу, чтобы уменьшить перерисовку страницы;
    var oFragment = document.createDocumentFragment();
    var indexScript1 = document.createElement('script');
    var indexScript2= document.createElement('script');
    oFragment.appendChild(indexScript1);
    oFragment.appendChild(indexScript2);
    body.appendChild(oFragment);
  1. Совместимость с локальной разработкой, по-прежнему используйте Webpack для автоматического импорта статических ресурсов во время локальной разработки и динамического создания статических ресурсов для упаковки и повторного использования в Интернете:
<script type="text/javascript">
    var staticVersion = 'dev';
</script>
<script type="text/javascript">
    //头尾系统的版本号，重新定义 staticVersion
    var staticVersion = '1.0.0';
</script>
<script type="text/javascript">
    window.onload = function(){
        if(staticVersion != 'dev'){
            //动态生成代码
        }
    }
</script>

После экспериментов, в нормальных сетевых условиях, хотя отрисовка страницы в системе IOS в среднем на 266 мс медленнее, каркасный экран больше не ждет загрузки CSS и JS и появляется примерно на 1000 мс раньше. В случае слабой сети время рендеринга страницы почти такое же, и скелетный экран все еще можно быстро отобразить после возврата HTML.

icon

Решаются следующие вопросы:

  1. Оптимизируйте последовательность выполнения статических ресурсов, чтобы избежать зависания белого экрана, поскольку бизнес-код выполняется раньше, чем зависимые файлы;
  2. Как система IOS, так и система Android могут отображать скелетный экран сразу после возврата HTML;
  3. Сократить время рендеринга экрана-скелета, не дожидаясь загрузки внешних статических ресурсов;
  4. Как показано на рисунке ниже, из-за динамического создания статических путей к ресурсам в прошлом на каждую страницу добавлялись два файла заголовка и хвоста (включая файлы путей JS и CSS).После оптимизации требуется только три файла заголовка и хвоста. После переноса следующей версии весь проект должен поддерживать только 1 головной и хвостовой файлы!

icon

Оптимизируйте ленивую загрузку пола

Ленивая загрузка на пол страницы может эффективно повысить скорость загрузки главной страницы и уменьшить количество ненужных запросов. На домашней странице участника PLUS длинная нижняя часть продукта очень удобна для ленивой загрузки, и пользователи не увидят этаж продукта при входе. В предыдущем проекте запрашивалась только одна страница данных каждый раз при сканировании продуктового этажа, что сокращало ненужные запросы и рендеринг. Однако пространство для оптимизации еще есть: если на первом экране мобильного телефона пользователя не отображается пол продукта, нам не нужно загружать JS-код этой части, как только мы заходим. Глядя на размер этого файла, сжатый файл JS онлайн составляет 11,7 КБ, а размер CSS — 16,8 КБ, что в сумме составляет 28,3 КБ, что кажется немалым.

Чтобы еще больше уменьшить ненужную загрузку домашней страницы, мы используем плагин Vue-lazyload для реализации функции ленивой загрузки компонента и используем технологию предварительной загрузки, чтобы позволить браузеру сначала загрузить файл во время простоя, чтобы чтобы пользователи не сползали в товарное здание для тестирования, чтобы загрузить соответствующие статические ресурсы.

на основе веб-пакета@babel/plugin-syntax-dynamic-importА плагин Vue-lazyload позволяет легко реализовать независимую упаковку асинхронно загружаемого кода.

icon

Обратите особое внимание на область на странице над полом продукта.Если нет этажа с фиксированной высотой, вы должны убедиться, что после завершения рендеринга вы можете запустить расчет того, находится ли пол продукта в видимой области. После того, как компонент ленивой загрузки будет окончательно открыт, перейдите к загрузке пола продукта. Не забудьте отменить Disable cache в сетевой панели, эффект будет следующим:

icon

Эффект виден.Файл floor-feeds.js загружается только на товарном этаже страницы, а он уже предварительно загружен, поэтому получается из кеша, и время 2мс.

icon

Как показано на рисунке выше, на мобильном телефоне с маленьким экраном floor-feeds.js не будет загружаться при входе на страницу, а файл будет загружаться из предварительной загрузки Prefetch только при пролистывании страницы. Наконец, рассмотрите пользовательский опыт и производительность. Пол продукта под мобильным телефоном с большим экраном готов появиться под первым экраном. В настоящее время нет смысла устанавливать функцию ленивой загрузки, потому что пользователь скользит по экрану немного, и пол изделия будет оголен, и пол изделия будет отрендерен.Это тоже требует времени. На некоторых мобильных телефонах с маленькими экранами пол продукта находится далеко от первого экрана, поэтому ленивая загрузка этажа продукта очень важна.

Внедрение PWA

Полное название PWA — Progressive Web App, то есть прогрессивное веб-приложение. Это относительно популярная технология в последние два года. Она часто используется для реализации функции кэширования в автономном режиме. Пользователи могут быстро получить доступ к страницам, которые они посетили. Члены PLUS впервые использовали эту технологию. Мешок, давайте поговорим о менее упомянутые ямы здесь.

  1. Попробуйте поместить sw.js в тот же каталог, что и HTML страницы, иначе будет недействительно зарегистрировать serviceWorker; Изначально код шаблона был размещен в src/template/index.html, я положил sw.js в корневой каталог, который то же самое, что и src. По пути перейдите к настройке области, он всегда подсказывает, что регистрация serviceWorker недействительна;

  2. После того, как регистрация наконец-то прошла успешно, код не сообщает об ошибке, но глядя в Сеть в консоли, все запросы не идут в сервисворкер, файл конфигурации менялся и менялся, кеш удалялся и удалялся, и Отключить кэш в сети также был снят флажок, и, наконец, обнаружена проблема с конфигурацией среды! Как показано ниже:

icon

Откройте консоль браузера, выберите вкладку «Приложение» и выберите вкладку «Сервисные работники» слева.Обязательно обратите внимание на эти три параметра:

  1. Автономный режим: после выбора отключите сеть, в это время вы можете имитировать автономную ситуацию;
  2. Обновлять при перезагрузке: если этот флажок установлен, это означает, что при каждом обновлении страницы файл sw.js перезагружается;
  3. Обход для сети: После выбора запрос идет только в сеть, не загружается из кеша;

Мой начальный обход для сети выбран по умолчанию, поэтому именно сетевой запрос вызывает постоянное выполнение запроса страницы.

icon

Следует отметить, что в этот раз мы добавили PWA только на страницу ненормального статуса с меньшим количеством итераций обновления в качестве попытки, остальные статусы запускаются не реже двух раз в неделю, и ритм десятка требований параллельно, каждая страница соответствует sw.js В случае с файлами, если бэкенду необходимо обновлять файл sw.js каждый раз, я чувствую, что детская обувь бэкенда должна носить с собой пятиметровый нож, чтобы прийти и поиграть со мной~~

Знакомство с TypeScript

Неудивительно, что упоминается TypeScript — надмножество JavaScript, в основном обеспечивающее систему типов и поддержку ES6. Его внешний вид позволяет разработчикам обнаруживать большинство ошибок на этапе компиляции, повышая удобочитаемость и ремонтопригодность кода. Однако перед лицом программы членства PLUS с десятками миллионов пользователей мы не решились на это, учитывая, что программа членства PLUS имеет широкий спектр влияния, сложную бизнес-логику и постоянно добавляются новые бизнес-потребности. , небольшие изменения могут иметь серьезные последствия, непредвиденные последствия.

В соответствии с мыслью о тщательной проверке, а затем расширении победы. Мы пытаемся внедрить TypeScript в требования новой страницы и провести небольшой эксперимент Vue + Webpack + Vuex + TypeScript на этой новой странице. Опираясь на принцип безопасности, не меняя исходный код проекта, мы осторожно встали на путь миноискания глубокой ямы vue + по слухам машинописный текст:

icon

После вышеперечисленных шагов выполняется преобразование TypeScript на основе исходного проекта JavaScript, после чего синтаксис TypeScript можно использовать для разработки. Процесс разработки ничем не отличается от разработки проекта Vue, но есть несколько проблем, с которыми мы столкнулись во время разработки, о которых следует упомянуть:

1. Проблема пути к фоновому изображению

Если вы импортируете такие изображения в свой проект:

.weixin {
  background: url("../img/weixin-pay.png") no-repeat center;
  background-size: 0.46rem 0.41rem;
}

И в файле ts есть файл css, введенный импортом

<style lang="scss">@import '../asset/css/pay-method.scss';</style>

Затем фоновое изображение может быть недоступно при запуске службы.Первоначальная оценка этой проблемы заключается в том, что синтаксический анализ пути неверен. Пробовал писать стиль прямо на страницу или в common.css или импортировать с @ в пути, но не смог решить.В итоге можно решить эту проблему введением файла css в файл входа .

2. Импорт компонентов

Мы можем ввести компоненты в исходный проект следующим образом:

import Dialog from "@/component/dialog/index.js";
Dialog.install(Vue);

Но если есть ссылка на TS, нам нужно переписать его так, иначе он сообщит об ошибке:

import Dialog from '@/component/dialog/index.js';
(Dialog as any).install(Vue);

3. Использование этого

В TS мы хотим использовать это для введения глобальных компонентов, но контекст, на который он указывает, не является глобальным, поэтому для использования глобальных компонентов нам нужно определить это:

(this as any).$toast.text('正在处理中，请稍后再试～');

4. Объявление глобальных переменных

После введения ТС, если вы хотите использоватьwindowВсе глобальные переменные должны быть объявлены в начале кода.

declare var wx;
declare var MPing;
declare var window;

Выше приведены текущие проблемы, возникающие при разработке проекта, и наш текущий метод обработки может быть не оптимальным решением, добро пожаловать, чтобы оставить сообщение для обсуждения и совместного обучения ~~

Оптимизация производительности из CodeReview

С ростом итерационных требований избыточность и громоздкость кода также становятся более серьезными, а ремонтопригодность в долгосрочной перспективе ухудшается. Кроме того, разработчики имеют разные уровни и стили написания кода, что может оставлять скрытые опасности.В связи с этим, как правило, лучше всего проводить CodeReview перед запуском проекта.После обнаружения проблем его легко модифицировать, а организованный тестовые ресурсы могут быть проверены и подключены к сети. . .

Однако членам команды PLUS из-за наплыва давления со стороны спроса и задержек с датой запуска каждого запроса часто бывает трудно добиться своевременного запуска спроса. Поэтому после запуска проекта мы можем тратить время только на проведение CodeReview, что приводит к конфузной ситуации, когда нет ни расписания проекта, ни тестовых ресурсов после модификации. Но для того, чтобы продвигать проблемы, обнаруженные в CodeReview, и беспрепятственно выходить в онлайн, мы делали следующее после каждого CodeReview:

  1. Разобрать проблемы, обнаруженные после CodeReview, и проанализировать, какие проблемы нужно доработать и оптимизировать;
  2. Разберите проблемы, которые может вызвать каждая точка модификации;
  3. Отправляйте электронные письма с расписанием, чтобы подать заявку на оптимизацию проекта, менеджерам проектов, менеджерам по продуктам, тестировщикам и другим специалистам по исследованиям и разработкам;
  4. После того, как график определен, затем организуйте проблемы модификации исследований и разработок, чтобы избежать ранней модификации, потому что ежедневная разработка спроса, перемежающаяся в середине, может привести к скрытым опасностям, вызванным более поздним объединенным кодом;
  5. После того, как тест и проверка прошли правильно, снова подключитесь к сети;

До сих пор мы сосредоточились на повышении надежности кода, оптимизации взаимодействия с пользователем, повышении производительности рендеринга страниц, оптимизации структуры кода и повышении эффективности разработчиков.Мы проверили некоторые проблемы, которые необходимо оптимизировать, разобрались с этими проблемами. , и подали заявки на проекты Планирование и ценные ресурсы для тестирования для выполнения требований по оптимизации в режиме онлайн.

icon

Эффективность разработки

Как повысить эффективность разработки? Мы не только улучшаем производительность и пользовательский опыт, но и продолжаем думать об этом направлении. Заточка ножей не рубит дрова по ошибке.Только решая болевые точки сотрудников отдела исследований и разработок в процессе разработки, сотрудники отдела исследований и разработок могут быстрее участвовать в развитии бизнеса.

Импортировать файлы автоматически

В проекте разработки фреймворка Vue идея компонентизации глубоко укоренилась в сердцах людей, но по мере усложнения проекта мы обнаруживаем, что каждый раз, когда мы создаем новый компонент, мы должны импортировать путь к файлу в домашнюю страницу и добавьте компонент в компоненты:

icon

Если компонентов больше дюжины, сюда нужно импортировать больше дюжины компонентов.Как и в одностраничных приложениях, каждый раз при добавлении нового маршрута необходимо импортировать большое количество маршрутов. Столкнувшись с такой ситуацией, чтобы повысить эффективность работы разработчиков и сократить процесс разработки компонентов, мы используем метод автоматического импорта компонентов в папку, чтобы избежать введения слишком большого количества импортов и механических монотонных шагов внедрения на странице. ;

  1. Сначала классифицируйте все файлы для импорта по папкам и создайте новый файл экспорта myIndex.js.
const files = require.context('./', false, /\.vue$/); //引入当前路径下所有的vue文件
let configRouters = {};
const modules = {};
files.keys().forEach(key => {
    const handleKey = key.replace('.vue', '').replace('./', '');//提取vue文件名字
    const newName = handleKey.split('-');  //将floor-coupon.vue 改为 ['floor','name','defal']
    let newString = '';
    newName.forEach((item, index) => {
        let newStr = '';
        if ( index !== 0) {
            newStr = item.substring(0, 1).first.toLocaleUpperCase() + item.substring(1);
        } else {
            newStr = item;
        }
        newString += newStr;
    })
    configRouters[newString] = files(key).default;//将files文件和对应的配置文件 configRouters 联系起来

})
export default configRouters; //导出配置文件
  1. В файле index.vue бизнес-кода импортируйте указанный выше файл записи:
import configRouters from '@/component/myIndex.js';
export default {
  components: configRouters, //把组件配置文件赋值给 components 即可。
}

Таким образом, каждый раз при добавлении нового компонента его можно создавать прямо в папке, что реализует функцию автоматического импорта компонентов. Преимущества вышеуказанной оптимизации:

  1. Сократить количество компонентов, вводимых в бизнес-код;
  2. Оптимизируйте процесс добавления компонентов, нужно только разработать код компонента в соответствующей папке, компонент может быть введен автоматически.

Запустить локальную службу

Если рабочий хочет хорошо работать, он должен сначала заточить свои инструменты. Процесс разработки с высокой эффективностью — это то, к чему стремится каждый специалист по исследованиям и разработкам. Для удобной и быстрой разработки обычно используется локально.webpack-dev-serverСтартовый проект. Однако, как только он входит в последующую итерацию, из-за проблемы междоменного интерфейса и ограничений информации для входа невозможно открыть страницу локально для разработки. В прошлом большинство из них использовали свисток или fildder для настройки онлайн-прокси-файла, чтобы увидеть эффект отладки.Конфигурация выглядит следующим образом:

plus.m.jd.com/index               https://localhost:8080/index.html
plus.m.jd.com/js/                 https://localhost:8080/js/
plus.m.jd.com/css/                https://localhost:8080/css/
plus.m.jd.com/img/                https://localhost:8080/img/
plus.m.jd.com/vendordev.dll.js    https://localhost:8080/vendordev.dll.js

Поскольку каждая страница соответствует набору прокси-файлов конфигурации, несколько страниц имеют разные прокси-файлы конфигурации. Переключение агентов конфигурации и работа, процесс настройки очень громоздкий. Чтобы решить вышеуказанные проблемы, как можно вызвать интерфейс в локально включенной среде? нужно решитьзапросить перекрестный домениинформация для входаДва блокпоста.

  1. Как решить кроссдоменную проблему?

В настоящее время распространенным методом междоменного решения является использование webpack-dev-сервера в сочетании с прокси-интерфейсом прокси-сервера или использование Nginx для настройки междоменного прокси-сервера. Поскольку webpack-dev-server настраивается локально, все участники проекта могут использовать его раз и навсегда. Мы используем интерфейсный прокси, который настраивает прокси в webpack-dev-server, и настраиваем webpack-dev-server в файле webpack.config.js следующим образом:

proxy: [
    {
        context: ['/user','/apis'], //使用context属性，可以把多个代理到同一个target下
        target: 'https://rsp.jd.com/', //把用 user 和 apis 开头的接口代理到 https://rsp.jd.com/域名下
        secure: false, //默认不支持运行在https上，且使用了无效证书的后端服务器，这里设置为true，可以支持
        changeOrigin: true,//如果接口跨域，需要进行这个参数配置
        pathRewrite: {'^/apis': ''},//由于apis开头的路径，是人为添加方便区分哪些接口要代理的，所以这里去掉apis
        headers: { //设置请求头
            origin: 'https://plus.m.jd.com', //请求接口限制来源，所以要改动请求源
            host: 'rsp.jd.com',//设置请求头的host
            referer: 'https://plus.m.jd.com/index'//设置请求头的referer，因为后端接口会有限制
        }
    }  
]

После вышеуказанного интерфейса запроса конфигурации и установки всех префиксов интерфейса в проекте, чтобы они начинались с пользователя и API, если это новый префикс для локальной разработки, вам необходимо переключить префикс интерфейса в соответствии со средой разработки и удалить префикс на онлайн-среде.

Таким образом, междоменные проблемы могут быть решены во время локальной разработки.Если возникает ошибка кода состояния, вам нужно спросить, есть ли какие-либо ограничения у бэкэнда.Как правило, вы можете изменить информацию, соответствующую заголовкам заголовка запроса.

  1. Как решить проблему, что интерфейс передает данные для входа?

Междоменная проблема решена, и к интерфейсу по-прежнему можно получить доступ, поскольку интерфейс запроса также должен содержать информацию о файлах cookie, чтобы определить, вошел ли пользователь в систему. Мы знаем, что после того, как пользователь войдет в систему, браузер сохранит значение id, соответствующее текущей информации о пользователе, в файле cookie, и каждый последующий запрос будет содержать файл cookie под доменным именем, чтобы определить статус входа пользователя. Локально разработанный проект не может содержать файл cookie под доменным именем плюс, поэтому интерфейс с локальным доступом вернет, что пользователь не вошел в систему, поэтому соответствующие данные не могут быть получены.

Браузер сказал: Все действия, требующие данных без предоставления файла cookie для входа, являются хулиганскими действиями! Ну такое поведение понятно, ведь мы не можем быть волками с пустыми перчатками, мы должны спасать страну кривым путем. Чтобы предотвратить атаки XSS, сервер устанавливает атрибут httpOnly в значение id информации о пользователе в файле cookie, чтобы избежать использования JS для ее получения. Но это приводит к тому, что у нас нет возможности использовать JS для получения файла cookie с информацией о пользователе, поэтому сначала нам нужно посетить страницу онлайн-плюс в браузере. Затем найдите идентификатор информации о пользователе на панели dev-tool и поместите значение в локальный файл cookie. Это запускает локальную службу webpack-dev-server и передает cookie в последующих запросах:

icon

Благодаря двум вышеуказанным основным шагам разработчики могут запускать проект с помощью одной ключевой команды локально, что очень удобно для разработчиков. Чтобы смоделировать пользователей в разных состояниях, просто замените соответствующую переменную cookie в js.

icon

Автоматически форматировать код

Мир так прекрасен своим разнообразием, но когда дело доходит до форматирования кода, это катастрофа! Я считаю, что при развитии командного сотрудничества большинство мелких партнеров столкнутся со следующими неловкими сценариями:

  1. Различные стили кода могут быть изменены человеческой плотью только после того, как инструмент lint обнаружит проблемы, и обычно такими ошибками являются точки с запятой, отступ табуляции, пробелы, кавычки и т. д.;
  2. Когда вам нужно провести вторичную разработку на основе веток других коллег, вы обнаружите, что его стиль кода отличается от вашего собственного, и его очень неудобно читать и разрабатывать;

Для того, чтобы избежать такой ситуации, мы используем суперпопулярный инструмент автоматического форматирования Prettier, который может автоматически форматировать код для вас в соответствии с настроенными спецификациями, что не только экономит время и силы, но и улучшает читаемость вашего кода. просто евангелие совместной разработки команды!

Преимущества красивее

  • Его можно использовать в редакторе или из командной строки, а настройка очень проста.
  • Он может не только форматировать текущий файл при сохранении кода, но и форматировать все файлы одним кликом;
  • Он поддерживает основные форматы файлов, такие как HTML/JS/JSX/TS/JSON/CSS/SCSS/LESS/VUE;

Шаги по установке и использованию Prettier следующие:

icon

Таким образом, каждый раз, когда вы изменяете код, он будет автоматически форматироваться при сохранении файла. Если вы хотите форматировать все файлы в проекте одним кликом, вы также можете воспользоваться методом командной строки, рекомендуется настроить команду scripts в package.json:

"prettier:check": "prettier -l src/**/*.{js,vue,scss}",
//"prettier:check" 是检查项目src目录下的任何js、vue、scss文件是否存在格式问题；
"prettier:fix": "prettier --write src/**/*.{js,vue,scss}"
//"prettier:fix" 是一键格式化项目中src目录下所有js、vue、scss文件；

Таким образом, мы можем проверить формат кода и автоматически восстановить формат, выполнив командный метод, уменьшив стиль кода разных разработчиков в команде и недостатки индивидуального изменения формата кода, раз и навсегда.

Улучшить нормализацию Git

Быстрые итерационные требования проекта PLUS и ритм параллельной разработки множества требований каждый раз приводят к появлению новых веток для разработки с целью модификации. Система управления версиями git внесла выдающийся вклад в порядок и стабильность кода, но ее также необходимо стандартизировать и оптимизировать, чтобы сделать git более ценным.

Канонический git коммит

Для всех представлений предлагается использовать форму Identifier:Content , указав цель представления и сделав каждое представление ценным.

логотип инструкция
feat Новая функция
fix исправлять ошибки
docs документация
style Формат (изменения, не влияющие на выполнение кода)
refactor Рефакторинг (т.е. изменения кода, которые не являются новыми дополнениями или исправлениями ошибок)
test добавить тест
chore Изменения в процессе сборки или вспомогательных инструментах

Отправить оптимизацию информации

icon

Выше приведен фрагмент информации о коммите в проекте PLUS, несколько одинаковых коммитов подряд, ценность таких коммитов будет уменьшаться. В общем, сообщение коммита должно быть четким и кратким, объясняя цель коммита. Для этого обычно существуют следующие сценарии:

  1. Текущую ветку нужно срочно переключать на другие ветки, когда она наполовину разработана.Если ее не подать, то может быть не разрешено переключать ветки или вносить текущие изменения в новую ветку.Все сначала отправляют временную, а потом вернуться назад и снова развиваться;
  2. Текущая функция ветвления была разработана, отправьте версию, а проблема будет найдена позже, это может быть просто строка кода, и отправьте ее один раз. Отправлял код туда и обратно несколько раз;

Для обоих случаев:

  1. можно использоватьgit stash, чтобы временно сохранить, но не отправлять код, а затем прочитать его для разработки при переходе обратно в веткуgit stash apply;

  2. Он был представлен для второго случая и может быть использован в настоящее время.git commit --amend, отменить последнюю отправку в промежуточную область и повторно отправить содержимое;

Примечание. Этот метод должен работать с фиксацией, которая не была отправлена ​​на удаленный сервер.Не выполняйте эту команду после ее отправки на удаленный сервер.

Оптимизация процесса

Оглядываясь назад на 2019 год, у меня другое чувство в моем сердце~~ Проведя всю ночь в сети, я увидел своих коллег, которые пришли на работу на следующий день с затуманенными глазами. Я также был разбужен телефонным звонком в выходные утром, чтобы поддержать срочную потребность. Иногда я только что вышел с работы, но меня уведомляют о необходимости немедленного пересмотра. Были также периоды стресса, спутанности сознания и перепадов настроения. Хотя мы ни о чем не жалеем, стандартизированный процесс не должен быть таким утомительным. Работа – это процесс постоянного сталкивания с проблемами и их решения.Активное продвижение стандартизации проектов и повышение эффективности человека – это позитивные установки. Поэтому мы взяли на себя инициативу продвижения в следующих направлениях:

icon

Сформулировать спецификацию разработки

Кадровые изменения в команде и необходимость быстрой итерации однажды заставили новых членов не знать, как начать проект PLUS. В то же время квалифицированный проект также должен сформулировать спецификации разработки, которые могут не только позволить участникам разработки быстро понять вход в проект, но и позволить старым участникам четко и стандартизировать процесс разработки. Поэтому наша команда в основном резюмирует следующие аспекты:

  1. Отсортируйте соответствующее распределение состояний каждой ветви
  2. Разработать процесс разработки проекта
  3. Сводные методы отладки проекта
  4. Стандартизируйте онлайн-процесс
  5. Агрегат плюс информационные ссылки, связанные с участниками

Включая, помимо прочего, вышеуказанные направления, путем формулирования и обобщения спецификаций проекта, обобщения проблем, возникших во время разработки, и эффективного продвижения знакомства разработчиков команды с проектом, избегая статус-кво новых участников, пересекающих реку, ощупывая камни путем Это способствует быстрой интеграции проекта PLUS и беспрепятственному проведению опытно-конструкторских работ.

Оптимизировать механизм обзора

Быстрое развитие бизнеса PLUS, частые обзоры спроса и массовые встречи в любое время и в любом месте беспокоили всех членов команды проекта PLUS. Вещи, которые были запланированы изначально, часто прерываются, и приходится работать сверхурочно, чтобы переварить. Если так пойдет и дальше, это не только перегрузит членов команды, но и нарушит график всего проекта, вызвав серьезный эффект бабочки, что может повлиять на будущий спрос, поэтому необходимо срочно решить эту проблему.

На совещании по рассмотрению проекта было предложено создать более разумный механизм рассмотрения для стандартизации совещаний по рассмотрению требований. К счастью, благодаря тесному сотрудничеству каждой команды была принята система проведения коллективного обзора требований каждые две недели. Для неотложных нужд, следует ли организовать отдельный обзор в соответствии с оценкой его срочности.

После того, как механизм проверки спроса определен, если нет интенсивных проверок во время акции 6.18, мероприятий Double 11 и других фестивалей, другие времена были значительно улучшены.Разумный механизм проверки позволяет каждому лучше организовать работу, так что путаница у людей значительно уменьшилась головная боль.

Продвижение обучения новым технологиям

Обучение похоже на греблю против течения: если вы не будете продвигаться вперед, вы отступите. В условиях, когда фронтенд-технологии все больше обновляются, если рассматривать только реализацию бизнес-потребностей, члены команды будут не только медленно входить в зону комфорта, но и постепенно отставать технически. Однако для поддержки нескольких одновременных требований каждую неделю в сочетании с работой по оптимизации проекта, инициированной внешним интерфейсом, и позволить членам команды получить новые знания, время часто растягивается. Поэтому мы не можем бесцельно осваивать новые знания. Должен быть нацелен в сочетании с программой членства PLUS. Изученные новые технологии можно практиковать в проекте PLUS, будь то улучшение кода или оптимизация взаимодействия с пользователем, вы можете применить то, чему научились.

Итак, исходя из вышеуказанных целей, мы начали сознательное исследование. Поскольку проект разработан с помощью Vue, мы обратили внимание на выпуск исходного кода Vue 3, и наше внимание привлекла используемая в нем технология TypeScript. Я обнаружил, что TypeScript имеет много преимуществ, особенно для проектов совместной разработки с участием нескольких человек, что повышает удобочитаемость и удобство сопровождения кода. Здесь нет правил и кружков, поэтому наша команда сформулировала план обучения, и каждый использует свободное время для учебы.Когда потребности проекта не напряжены, некоторые члены организации проводят обмен технологиями и обсуждения знаний по этой технологии. Кроме того, на новой странице была предпринята попытка представить TypeScript, что привело к практической части TypeScript выше.

Взаимодействие с визуальной стороной

Из-за множества повторяющихся потребностей членов PLUS большинство потребностей связано с обновлением визуальных набросков, а тесное общение с дизайнерами является нормой. В ходе этого процесса мы обнаружили две важные проблемы.

  1. Дизайнеры используют инструменты компании для совместной работы над продуктамиRELAY (например, «Голубое озеро»), но некоторые изображения не были обрезаны, или при разработке мы обнаружили, что некоторые обрезания не соответствуют ожиданиям НИОКР, поэтому, когда мы связались с визуальным дизайнером, чтобы попросить соответствующий обрез, потому что все были очень заняты, может не ответить вовремя. Проблема будет заблокирована, а в серьезных случаях, например, при рефакторинге страницы, отсутствии большого количества вырезок или невозможности получения соответствующего размера шрифта, цвета и другой информации, прогресс проекта зависнет. Незаметно увеличить стоимость связи.

  2. Онлайн-требование должно пройти пошаговое руководство по стилю визуального дизайнера, а задача пошагового руководства должна быть пересмотрена. Однако по разным причинам много раз проект запускали ночью, а визуальный осмотр проходил днем. В результате нет времени для изменений в исследованиях и разработках, и как только они будут изменены, легко вызвать другие проблемы со стилем.

Пройдя через это несколько раз, мы встретились с визуальными дизайнерами, чтобы обсудить, как решить эти проблемы.

  • Для проблемы 1: добавьте ссылку на исследования и разработки, чтобы подтвердить визуальный проект.После того, как визуальный дизайнер завершит черновик или до того, как исследования и разработки будут готовы к разработке, просмотрите визуальный черновик, необходимый на этот раз, и верните необходимые сокращения. в процессе визуальному дизайнеру. , равномерно предоставить вырезанные картинки, кроме того, модельеры также продуманно дополнили рукописи PS, что нам удобно проверять и заполнять пробелы, когда мы не можем связаться с людьми.
  • Для проблемы 2: каждый раз, когда отдел исследований и разработок отправляет тестовое электронное письмо, он должен копировать соответствующий @визуальный дизайнер и продвигать визуальное пошаговое руководство на этапе тестового тестирования. Кроме того, студенты-испытатели заранее информируют продукт, когда требуется визуальный осмотр, и сторона продукта заранее подает заявку на визуальные ресурсы, а результаты применения и проверки отправляются по электронной почте.Планируется несколько напоминаний для продвижения процесса проверки стиля.

С помощью вышеуказанных методов в наибольшей степени гарантируется, что R&D получает визуальную информацию, которую он хочет, при разработке проекта, избегая проблемы зубрежки и коммуникации до момента разработки и снижая стоимость коммуникации. Кроме того, визуальный дизайнер заранее уведомляется о том, что нужно провести пошаговое руководство по стилю, что позволяет избежать скрытых проблем, вызванных изменениями, перед выходом в онлайн.

Предварительный переход на старую версию

По историческим причинам программа членства PLUS имеет три отделения на 9 страницах в разных штатах. Первая партия страниц была разработана два года назад, некоторые технологии и коды разработки, использовавшиеся в то время, были не очень стандартизированы.jdf + Некоторый код для стека zepto. В последующем процессе разработки постепенно расширяются три основные ветви разработки: V2, V3 и V4.

  • Версии 2/3, разработанные в первой половине 2017 года, не основанные на Webpack, с учетомjdf Воздействие велико и неразумно. Home Calculator и My PLUS Calculator не мультиплексированы и используют старый интерфейс.
  • V4, новая версия в первой половине 2019 года, основанная наGaea4 Модифицированное многостраничное приложение Vue, включающее множество новых функций, значительно улучшило производительность.

Новые функции в V4 включают

  • Обновление Webpack до 4.0, обновление Vue-loader до 15
  • интегрированныйcarefree иNutUI2.0 Загружать плагины по запросу
  • Babel обновляется до версии 7.0, чтобы включить загрузку полифилов по запросу.
  • Объедините ленивую загрузку кода и напольных данных, Tree-shaking, Scope Hoisting, DllPlugin, чтобы исключить неиспользуемый CSS, и другие технические средства для уменьшения размера кода.
  • Некоторые ссылки H5 в приложении JD открывают новый веб-просмотр через протокол openapp, улучшая взаимодействие с пользователем и повышая вероятность успешного отслеживания и отчетности.
  • Комплексное применение форматов изображений webp и dpg для уменьшения размера изображения и повышения скорости рендеринга изображения.
  • Представьте Vuex для централизованного управления данными, иммерсивного каркасного экрана.

project.png

  • Узким местом в скорости загрузки старой версии является последовательный запрос: скрипт страницы → интерфейс с информацией о пользователе → интерфейс с информацией об этажах → данные каждого этажа → рендеринг.
  • Версия V4 напрямую печатает интерфейс с информацией о пользователе и интерфейс с информацией об этаже на странице через серверную часть, что позволяет избежать последовательного ожидания интерфейса и повышает скорость рендеринга домашней страницы: скрипт страницы → данные каждого этажа → рендеринг

На следующем изображении встроенный в Chrome инструмент автоматической оценки тестов, Audits, имеет высокую оценку производительности новой страницы V4.

图片2.png

Введение каркасного экрана сокращает время ожидания белого экрана.Как показано в тесте, каркасный экран отображается в течение периода белого экрана 200–600 мс, а время белого экрана сокращается на 2/3, что помогает улучшить субъективную скорость загрузки страницы, тем самым улучшив взаимодействие с пользователем.

图片3.png

Поэтому переход на V4 особенно важен с точки зрения производительности и эффективности разработки. Особенно, когда возникает несколько параллельных требований, это включает в себя разработку серии подветвей из трех основных ветвей, и недостатки поддержки нескольких версий очевидны. С этой целью мы взяли на себя инициативу высказаться и положить факты в целях повышения эффективности в качестве отправной точки. В первую очередь я получил понимание и поддержку со стороны продукта (отдельная благодарность) для инициации проекта и поднятия спроса, а затем получил ресурсную поддержку менеджера проекта и тестирование. Продвигайте сторону продукта, чтобы обратить внимание на миграцию версий кода и постепенно переносите старую версию кода на последнюю ветку V4 в последующей итерации требований.

На данный момент главная страница сезонной карты с истекшим сроком действия, домашняя страница годовой карты с истекшим сроком действия, страница эксклюзивного продукта [позже измененная на страницу руководства по экономии денег], моя страница PLUS (официально истекший, пробный статус) и пробная версия, срок действия которой истек в течение 30 дней, имеют все был перенесен из ветки V2 в V4. В версии 2 по-прежнему очень мало ненормальных домашних страниц, а также код в пробном периоде и в течение 30 дней после истечения пробного периода в версии 3. Этот процесс еще не завершен, и конечной целью является миграция всех пользовательских состояний и кода страниц в новейшую ветвь архитектуры стека технологий.

icon

Нормализация расписания

Уделяя особое внимание проекту PLUS, мы организовали отдельные исследования и разработки, чтобы отслеживать все потребности и графики, чтобы всем не приходилось поддерживать разработку, отвлекаясь на различные встречи. После того, как все требования рассмотрены и отсортированы, определяется, какие из них можно разрабатывать параллельно, а какие необходимо разрабатывать последовательно. Затем вместе с менеджером проекта сформулируйте график работы фронтенд-команды. Таким образом, определяется работа каждого на следующую неделю, четкое разделение труда, и оно не будет нарушено временными нуждами и неотложными потребностями.

Кроме того, все неотложные потребности, новые потребности и онлайн-проблемы должны быть отсортированы и проверены стыковщиком в зависимости от потребностей:

  1. Механизмы срочного спроса относительно бесплатны для поддержки НИОКР;
  2. Запланируйте следующий график для потребностей, которые не являются особенно срочными;
  3. Онлайн-проблемы, если их можно быстро исправить, обычно запускаются вместе со следующим онлайн-требованием; если они не могут быть исправлены быстро, они будут перепланированы.

Таким образом, лучше распределяется время всей команды, и требования к проекту не будут водить за нос.Недельная работа организована, и работа каждого понятна, и ритм их работы может быть скорректирован соответствующим образом. вставка различных неотложных потребностей.

После вышеуказанных мер члены команды могут быстро приступить к разработке проекта, четкое разделение труда и становится понятным, чем занимается каждый узел. Это также улучшает общение и сотрудничество с другими командами и снижает уклончивость. Мэн-цзы однажды сказал: «Если вы не будете следовать правилам, вы не сможете составить квадрат и круг; если вы не будете следовать шести правилам, вы не сможете исправить пять звуков». Принимать как должное!

Эпилог

На Double Eleven в 2019 году количество официальных участников PLUS превысило 1500 дней, что стало новым историческим моментом. Член PLUS потратил 467 000 юаней за одну транзакцию, что сделало ее самой крупной отдельной транзакцией на JD.com. В то время как мы чувствуем достижения команды, мы также чувствуем большую ответственность. Оглядываясь назад на 2019 год, можно сказать, что это был необычный год для членов команды PLUS. Программа членства PLUS становится все более и более совершенной, исходя из предпосылки обеспечения удовлетворения притока повторяющихся потребностей, начиная с оптимизации пользовательского опыта, повышения эффективности разработки и продвижения и улучшения институциональных процессов.

В этот момент ледяной холодный ветер завывает холодной зимой за окном, сдувая смог прошлого, принося яркое солнце и ясное небо. Тихо хватаясь за хвост 2019 года, полны надежд на наступающий 2020 год. Как и проблемы, с которыми сталкивается программа членства JD PLUS, она в конечном итоге пересечет прошлое и откроет новое путешествие, увидимся в 2019 году и давай в 2020 году!


Категории