задний план

Представляюсь, у меня 4 года опыта работы, первые два года full-stack разработки, вторые два года фронтенда на полную ставку. три компании. Али — первая компания в сфере электронной коммерции.ISVПоставщик, обслуживающий продавцов Taobao, это также мой первый контакт с миллионамиUVУровень продуктов, в первой компании в течение двух лет, из-за технических узких мест, 槽, вторая компания, индустрия логистики, оставалась в течение шести месяцев (правда, сила работы), Физический дискомфорт, не согласен двигаться вперед . В настоящее время управление проектом и руководитель группы переднего плана, два персонажа, которые в настоящее время остаются на два года, сделали много вещей и поделились с вами некоторыми идеями.

Начальная среда

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

Начальная группа 4 человека

Одним из них управляет технический директор (back-end), а два других находятся в провинции Гуандун. Когда я пришел, я уже был там. Позже мой руководитель сказал мне их снять, я не думал их снимать, и это была яма.

Существует множество исторических проектов, все они основаны на наборе фреймворков, полученных с GitHub.

Отсутствие фронтальной инженерной системы, длительный цикл разработки, некачественная разработка и сложность в обслуживании
Смешанные front-end и back-end проекты, front-end код не чист, в back-end много файлов, не знаю важно это или нет, front-end код работает на сервере С другой стороны, каждый раз, когда вы изменяете строку кода, чтобы увидеть эффект, вам нужно перетащить ее на сервер для компиляции, компилировать Около 1-2 минут или около того, очень болезненно.
Люди, полностью знакомые с проектом, ушли (технические и продуктовые), и передача проекта не была организована должным образом.
Бизнес-логика очень запутанная, нет соответствующей блок-схемы продукта, все основано на памяти.
работает на сервереNodeВерсия очень низкая, и она до сих пор8.x, там есть все виды младших версий библиотек, напримерAnt Designиспользовать3.6.2, в разработке проекта коробку челнока нельзя отобразить в виде дерева (код точно такой же, в хай версии3.19.2, можно отобразить). Другой пример это"translate.js": "git+https://github.com/MichelSimonot/translate.js.git”
Пробовал обновить библиотеку и удалить другие библиотеки, всякие ошибки.
В коде не хватает комментариев, тысячи строк в файле, верноReact,Reduxиспользование, непонимание.
Иметь «взрыв», этот проект будет продолжать «взорваться» в любое время, теперь он уже находится на этапе развития грома.

18 октября 2019 года в 24:00 произошла производственная авария, и авария проявилась в работе определенной страницы, произошел сбой браузера и он завис.

Время выполнения скрипта очень большое.После расследования это вызвано следующим кодом
```
actions.getAgentListByPage({
    companyId: currentAgent.companyId,
    pageIndex: 1,
    pageSize: 20000,
    searchProvince: currentAgent.province,
    searchCity: currentAgent.city
})
```
Есть запросы во многих местах на страницеразмер страницы: 20000В случае с , код написан бывшим фронтендом, конкретная причина написания такого кода неизвестна, план обработки будет решать бэкенд, а фронтенд будет с ним сотрудничать.workbenchПоле, разрешено около 1 утра.
На проекте работают две системы.
Объем упакованного кода проекта составляет49.5MB, страница загружается в первый раз долго11.4 min

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

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

Слабый персонал проекта

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

Стыковка внешнего и внутреннего интерфейса, нет связанных документов

Прототип покраски продукта и эскиз дизайна пользовательского интерфейса не стандартизированы

Перечислил вышеперечисленные пункты, там слишком много косяков.К счастью, есть один момент, поддержка лидеров неплохая, посмотрим как я прорвусь.

Уточните свою миссию

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

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

Как решить

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

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

Управление командой

Кадровый менеджмент

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

управление полномочиями

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

Конкретные меры управления заключаются в следующем:

склад компании, код принадлежит компании, код разрешено изолировать, а интрасеть включена.GitLab, все разрешения на доступ к внешней сети по умолчанию закрыты, и для каждого проекта разработка получает определенные разрешения в соответствии с реальными потребностями.
Отправить разрешение, позволяющая подать разработку под собственный склад, но предполагающая объединение склада компании, ее необходимо инициироватьPR, то в лидере группыCRПосле этого его можно отправить в основной репозиторий.
Разрешения на публикацию, для публикации в производственной среде разрешение дается лидеру группы, и только лидер группы может публиковать.

Стыковка внешнего и внутреннего интерфейса

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

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

Мы используемapiDocв качестве стандарта совместной отладки интерфейса и сервера.

Но на практике все равно будут некоторые интерфейсные документы, не соответствующие реальному интерфейсу, что приведет к некоторым проблемам, над этим мы тоже думаем.

Фронтальная инженерная система

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

Проектирование инфраструктуры

Нормализация управления ветками Git

мы используемGit FlowСтратегия управления филиалом

Git FlowпервоначальноVincent DriessenВыпущенная и получившая бешеную популярность, эта модель была задумана в 2010 году, и сейчас ей более 10 лет.Gitсама родилась не так давно. За последние десять лет,Git FlowОчень популярен среди многих команд разработчиков

соглашение об именовании ветвей

ветка master: есть только одна ветка master, и имя master. GitHub теперь называется main
ветка разработки: есть только одна ветка разработки, имя разработки
ветвь feature: feature/, например: feature/login, чтобы другие могли видеть вашу работу
ветвь исправлений: исправление/дата, например: исправление/0104

описание ветки

master || основная ветка: магазин официально выпущенной продукции,master || mainТребования к продукту в ветке готовы к развертыванию.master || mainВетки могут обновлять контент только путем слияния с другими ветвями.master || mainветка для модификации.
ветка разработки: объединяет работу, проделанную разработчиками,developПродукты на ветке могут быть полуфабрикатами с отсутствующими функциональными модулями, но существующие функциональные модули не могут быть полуфабрикатами.developВетки могут обновлять контент только путем слияния с другими ветвями.developветка для модификации.
ветвь функций: когда необходимо разработать новую функцию, создайте новую из основной веткиfeatureфилиал, и вfeatureразработка на ветке. После того, как разработка завершена,featureветвь слилась сdevelopветку и, наконец, удалитьfeatureветвь.
ветка релиза: когдаdevelopКогда проект в ветке будет готов к выпуску, изdevelopсоздать новую веткуreleaseфилиал, новыйreleaseФилиалы могут выполнять только задачи, ориентированные на выпуск, такие как тестирование качества, исправление ошибок и создание документации, и не могут добавлять функциональные возможности. После завершения этой серии издательских задач необходимоreleaseветвь слилась сmasterна ветке и по номеру версии какmasterветка добавленаtag,ПотомreleaseИзменения, внесенные с момента создания ветки, объединяются обратно вdevelopветвь, удалить последнююreleaseветвь.
ветка исправлений: когдаmasterКогда в продукте в ветке есть ошибка, которую нужно исправить немедленно, изmasterсоздать новую веткуhotfixфилиал, и вhotfixИсправлены ошибки в ветке. После окончания ремонта необходимоhotfixветвь слилась сmasterфилиал иdevelopфилиал, и дляmasterФилиал добавляет новый номер версииtag, и, наконец, удалитьhotfixветвь.

Отправить спецификацию информации

Информация о представлении должна содержать описание того, «что было сделано» и «почему это было сделано», и, если необходимо, «последствие, вызванное», главным образом,3состоит из частей:Header,Bodyа такжеFooter.

Заголовок Раздел заголовка имеет только 1 строку и формат<type>(<scope>): <subject>.

type используется для описания типа отправки, есть 8 значений-кандидатов:

подвиг: новая функция (особенность)
исправить: исправление ошибки
документы: Документация
стиль: настроить формат (не влияет на выполнение кода)
рефакторинг: рефакторинг
тест: добавить тест
рутинная работа: изменения в процессе сборки или вспомогательные инструменты
revert: отменить предыдущую фиксацию
Scope используется для описания масштаба влияния представления, а его содержание зависит от конкретного проекта.

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

Тело опущено

Нижний колонтитул опущен

Преимущества для этого, в рамках этого проекта:

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

Короче говоря, с первого взгляда.

Основной процесс для разработчиков

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

Код основной ветки и онлайн-код изолированы, и руководитель группы укажет версию кода.TagПубликовать в продакшн среду, а потом напрямую от оператора через оператораGitLabПодтянуть указанныйTag, а затем упаковать и опубликовать.

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

инженерный дизайн

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

Пользовательский фреймворк проекта Webpack

Почему бы не создать-реагировать-приложение

приложение create-реагировать основано наwebpackbuild、dev、lint

, система маршрутизации на основе react-router
Loading, нет необходимости повторять компонент Оценка нагрузки
глобализация, интернационализация на основе react-intl-universal
сетевой запрос, на основе перехвата запросов, реализованного axios
взаимодействие со страницей, на основе метода взаимодействия данных, реализованного mobx
UI, используя самый известный в отрасли муравьиный дизайн
Проверка спецификации кода, используя eslint, pre-commit, lint-staged, prettier, stylelint
фиктивные данные запроса, основанный на реализации mockjs
упаковочный инструмент, в настоящее время самый популярный Webpack

Решил следующие проблемы:

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

Завершите замкнутый цикл всего процесса кодирования:

Перед кодированием: соглашения о кодировании, лучшие практики
Кодирование: самостоятельный фреймворк проекта, проверка кода
После написания кода: выпуск средства развертывания JenKins, выпуск вручную или CI/CD

Эти узлы следует делать с минимальными затратами в соответствии с реальной ситуацией, а затем постепенно модернизировать. Например, стандарты кодирования, мы используем более известные в отраслиAirbnb JavaScriptспецификация кода, словосочетаниеeslint、pre-commit、lint-staged、prettier、stylelintзапрещать.

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

Деловая сцена

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

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

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

статические ресурсы

В дополнение к бизнес-коду интерфейс также будет иметь некоторые общедоступные статические ресурсы, такие какReactресурс,Ant Designресурс,BizChartsресурсы, а также некоторые файлы изображений и т. д.

Для этих файлов он является общим для всех проектов.Если эти файлы разбросаны по разным проектам, в этом нет необходимости, и легко привести к тому, что разные файлы зависимостей проекта будут несогласованными.

мы кладемS3на, делайCDNСтатическое ускорение ресурсов, а затем передний конец проекта через введениеurlиспользовать эти ресурсы, что может снизить потребление пропускной способности сети вашего собственного сервера.

управление проектом

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

Знаком с продуктовой линейкой бизнеса

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

Нарисуйте диаграмму архитектуры продукта

Улучшить возможности соответствующего персонала

продукт люди

Требования часты и хаотичны, решения колеблются и часто отменяются. Хороший продакт-менеджер на рынке стоит очень дорого, и никто с 30 000-40 000 юаней не может получить действительно надежного продакт-менеджера, способного выдерживать сложные продуктовые линейки.Однако многие руководители компаний не хотят тратить эти деньги, и они будут Обычно их нанимают.Продакт-менеджер, проработавший год-два, придет первым и выведет этот инструмент на первые позиции. Именно из-за такого восприятия продакт-менеджер не имеет права говорить, и он не может позволить себе бездельничать, поэтому накапливаются бесконечные требования, и долгосрочная продуктовая структура компании не поддается контролю. менеджер не может играть роль.Верх отвечает за заказчика, а низ отвечает за разработку.Он не будет просеивать все требования,а только оставит требования в разработку,и не будет контролировать время работы и качество . Если вы даже не знаете, какие функции есть у существующего продукта, то это не квалифицированный продукт.

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

Тестеры

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

Спецификация проекта

Так как наша компания используетAnt Designбиблиотека пользовательского интерфейса, поэтому стандарты дизайна максимально соответствуютAnt DesignЧтобы сделать это с готовыми компонентами и стилями, чтобы не разрабатывать вторичные модификации, обратитесь по этой ссылкеПринципы проектирования Ant Design

страница со списком

Обычные списки, дизайны и товары согласовываются: вверху — фильтр, внизу — кнопка, внизу — табличное отображение.

страница сведений

На странице сведений будет использоваться множество форм, поэтому используйте ее напрямую.Ant DesignизFromкомпонент формы.

Сколько поставить в каждой строке формы, все начинаются сAnt Designкомпоненты.

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

Результаты реализации

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

Эффективность развития персонала в группе увеличилась примерно в два раза по сравнению с предыдущей.Обычная страница списка (поиск, отображение, всплывающее окно), включая совместную отладку интерфейса + самотестирование, может быть завершена примерно за 1 день. , и страница сведений, сложное взаимодействие с формой, связывание компонентов формы будет завершено примерно через 2 дня, включая совместную отладку интерфейса + самотестирование, и в настоящее время мы изучаемVite,Snowpack, что значительно улучшает опыт разработки.

Системная ситуация

SaaSсистема, первая загрузка без кеша занимает время3.22s, упакованный объем трех систем (более 30 страниц, 14 общих компонентов) находится в9.3MB

Конечно, есть место для оптимизации.

Спецификация проекта

В настоящее время большинство страниц не требуют инвестиций в ресурсы дизайна, старайтесь следоватьAnt DesignСтандарты дизайна и наш собственный стандартный стиль пользовательского интерфейса, чтобы уменьшить объем работы дизайнеров.

проектная документация

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

Суммировать

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

Если вы находите это полезным или вдохновляющим, пожалуйста, ставьте лайк и комментируйте.