Автор оригинала: FreeCodeCamp Community Member.
Maciej Gurban.
При единстве мы недавно выяснили, чтобы улучшить наши приборные панели – предпринимаемое, которое резко изменило не только нашу технологический стек Frontend, но и способы работы и совместной работы.
Мы разработали лучшие практики и инструменты, чтобы помочь нам масштабировать нашу архитектуру Frontend, построить продукты с отличным UX и производительностью, а также для отправки новых функций раньше.
Эта статья собирает эти практики и направлена на то, чтобы обеспечить как можно больше рассуждений за каждым решением. Но сначала какой-то контекст.
Наследие
Глядя на количество инженеров, единство более чем в четыре раза больше, чем на персонал в последние 4 года. Поскольку компания выросла как органически, так и благодаря приобретениям, его товар предлагает также рос. В то время как продукты, разработанные изначально при единстве, были в значительной степени униформы с точки зрения технологического и дизайна языка, вновь приобретенные, естественно, не были.
В результате у нас были множественные визуально различные приборные панели, которые работали и ведут себя по-разному, и которые не поделились обычными навигационными элементами. Это привело к плохому пользователю и разочарованным пользователям. В самом буквальном смысле состояние престудов нашей продукции стоило дохода США.
Проанализировав портфель нашей продукции, мы выбрали три различных разделов Unity Dashboard, будут разделены на: разработать, действовать и приобретать, каждый удовлетворяющий другую потребность в бизнесе и предназначенных для различных групп клиентов, в основном содержащих множество функций, в значительной степени независимых друг от друга. Отказ
Эта новая структура, а введение общих навигационных элементов, направленных на решение первого основного выпуска, наши пользователи сталкивались – где можно найти информацию и параметры конфигурации, которые они ищет, и пока все это выглядело на бумаге, путешествие, как Получить там было далеко не очевидно.
Соображения
Многие из наших разработчиков были очень взволнованы возможностью перехода к реакции и более современным технологическим стеком. Поскольку эти решения были битва, проверенные в крупных приложениях, и имели их лучшие практики и конвенции, в основном вытянутые, все выглядело очень многообещающим.
Тем не менее, то, что наши разработчики лучше всего знали и каковы большинство наших активно разработанных приложений были написаны в Angularjs. Решив начать миграцию всего за один ходи, был бы катастрофой, ожидающим произошедшим. Вместо этого мы отправились для проверки наших предположений на гораздо меньшем масштабе.
Возможно, самая расзоррованная группа продуктов, у нас были Монетизация Dishboards Отказ Эти проекты, которые в конечном итоге окажутся под зонтиком Работать приборной панели, Были широко отличаться практически в любом случае: используемые технологии, подход к UI/UX, практики развития, конвенции кодирования – вы называете его.
Вот что такое ситуация грубо выглядела:
После некоторого мозгового штурма мы определили основные области, которые нам нужно будет работать, чтобы принести все продукты вместе:
1. Один продукт
Нам понадобилось этих панелей (разделение на несколько приложений, доменов и технологий) для:
- Почувствуйте себя как единый продукт (без полной страницы перенаправляет, так как пользователь навигации по страницам всех различных приложений)
- Иметь постоянный вид и чувствовать
- Включите общие навигационные элементы всегда видны и выглядят одинаково, независимо от того, какую часть приборной панели пользователь посещает
2. Наследие поддержки
Хотя у нас был чистый сланца, когда речь идет о выборе технологии нашего нового решения Frontend, мы должны были приспособиться к устаревшим проектам, которые необходимо интегрировать в новую систему. Решение, которое не включало больших усилий по рефакторингу, и которые не будут прекращать разработку функций или перетаскивать в течение нескольких месяцев без окончания видом.
3. Практика и инструмент
В то время как почти все команды использовали Angularjs, разные инструменты использовались для решения того же набора задач. Разные тестовые бегуны и библиотеки утверждений, государственные решения для управления или его отсутствие, не хватает в него, селекторы браузера jQuery VS, SASS против меньше, графические библиотеки и т. Д.
4. Производительность разработчика
Поскольку у каждой команды было собственное решение для разработки, тестирования и создания их применения, среда разработки часто пронизана ошибками, ручными ступенями и неэффективностью.
Кроме того, многие из наших команд работают в местах, разделенных 10-часовой разницей (Хельсинки, Финляндия и Сан-Франциско), что делает эффективное принятие решений на любых общих деталях реальной проблемой.
Новый
Наши основные направления фокуса были:
- Поощрять и сохранять гибкие пути работы в наших командах, и чтобы команды были в значительной степени независимы друг от друга
- Используйте и развивать общие инструменты и соглашения как можно больше, чтобы документировать их и сделать их легко доступными и полезными
Мы верили, что достижение этих целей значительно улучшит наше время на рынок и производительность разработчика. Для этого, чтобы это произошло, мы требовали решение, которое будет:
- Создание объектов продукта с лучшим пользователем
- Улучшить качество кода
- Разрешить лучшего сотрудничества не блокируя никто не прогресс в процессе.
Мы также хотели поощрять и облегчить переход к современному технологическому стогу, чтобы заставить наши разработчики более удовлетворены своей работой, а со временем отойти от наших устаревших структур и инструментов.
Вечноразвивающийся результат нашей работы – это спа-салон на основе реагирования, построенный внутри монореспорито, где все страницы и большие функции встроены в в значительной степени независимые пакеты кода, загруженные по требованию, и которые могут быть разработаны и развернуты несколькими командами одновременно. Отказ
В качестве средства песочницы все устаревшие приложения, но все еще отображающие их в контексте той же нового приложения, мы загружаем их внутри IFrame из того, что они могут взаимодействовать с основным спа-центром, используя шину сообщений, реализованный с помощью PostMessage () API.
Монорепоспоритие
Вот структура каталога, которую мы начали с:
/src /components /scenes /foo /components package.json foo.js /bar /components package.json bar.js package.json index.js
Package.json В корневом каталоге содержится набор DevDependonds Отвечает за разработку, тестирование и создание окружающей среды всего приложения, но также содержит зависимости ядра приложения (больше на что чуть позже).
Все более крупные куски UI называются Сцены Отказ Каждый сцена содержит Package.json где зависимости Определены компоненты этой сцены. Это делает возможным двумя вещами:
- Развертывание обновляет только файлы, которые изменились Шаг сборки компилирует отдельный поставщик и пакеты приложений для каждой сцены, называя каждые, используя хеш, который изменится только тогда, когда содержимое файла изменилось. Это означает, что наши пользователи загружают только файлы, которые изменились с момента их последнего визита, и ничего более.
- Сцены загружены только при необходимости Мы загружаем все сцены асинхронно и по требованию, которое резко улучшает время нагрузки всего применения. Здесь «по требованию» обычно значит посещать определенный маршрут или выполнение действия UI, которое выполняет Динамический модуль импорт Отказ
Вот как выглядит такая настройка на практике (упрощенная для читабельности):
// In src/routes.jsconst FooLoader = AsyncLoadComponent( () => import('src/scenes/foo/foo'), GenericPagePreloader,);// In src/scenes/foo/foo.js
AsyncloadComponent Тонкая обертка вокруг Rect.Lazy () Дополнительно принятие компонента предварительного загрузчика, то же самое проходило через Foxback к Отреагировать .suspense () и задержка, после которой предварительный загрузчик должен быть представлен, если сцена не закончила загрузка.
Это полезно при уверенности, что наши пользователи видят один и тот же предварительный загрузчик без каких-либо прерываний или вспышки содержимого с момента, когда сцена запрашивается на момент, когда все его файлы были загружены, все запросы на критические API завершены, и компонент закончил рендеринг.
Компонентные ярусы
Поскольку каждое приложение растет, его структура каталогов и абстракции развиваются вместе с ним. После примерно полгода построения и движущихся функций к новой кодовой базе, имея один Компоненты каталог оказался недостаточным. Нам нужна была структура каталогов, чтобы сообщить нам о:
- Были ли разработанные компоненты быть универсальными, или они предназначены только для конкретного использования?
- Они достаточно общины, чтобы его использовали во всем приложении, или они должны использовать только в определенных контекстах?
- Кто несет ответственность за и самый знающий о коде?
На основании того, что мы определили следующие Компонентные ярусы :
1. Особенности приложения (SRC/APP)
Одноэффективные компоненты, которые удовлетворяют определенным случаям использования в этом приложении, и которые не предназначены для повторного использования или извлеченные в библиотеку компонентов (маршруты, нижний колонтитул, заголовок страниц и т. Д.).
2. Общие (SRC/компоненты)
Общие многоцелевые компоненты, которые будут использоваться по всему приложению и его сценам. После того, как мы приехали в стабильную API для этих компонентов, они могут быть перемещены в общую библиотеку компонентов (подробнее на этом ниже)
3. Компоненты одной сцены (SRC/сцены/my-сцены/компоненты)
Компоненты, разработанные с учетом конкретного применения; не предназначен для использования в любых других сценах. Для случаев, когда компонент из одной сцены необходимо использовать в другом, мы использовали:
4. Мульти-сцены компоненты (SRC/сцены/компоненты/моя функция)
Компоненты, используемые по нескольким сценам, но не предназначены для того, чтобы быть достаточно универсальными для использования где угодно. Иллюстрировать, почему просто перемещать их в SRC/Компоненты не достаточно хорош:
Представьте, что до сих пор у вас была одна сцена, которая содержала компоненты, используемые для создания некоторых довольно конкретных диаграмм данных. В настоящее время ваша команда строит вторую сцену, которая будет использовать разные данные для диаграмм, но визуально два будут выглядеть в значительной степени одинаково.
Импорт компонентов из одной сцены в другую сломал бы капсулирование сцены и означало бы, что мы больше не можем быть уверены, могут ли изменения в компонентах одной сцены влияют только на то, что одна сцена.
Для этого любой компонент или группа компонентов, примерно упоминаются как функция, будут размещены в SRC/сцены/компоненты Откуда он может быть импортирован и используется любой другой командой, однако:
Всякий раз, когда команда хотела бы начать использовать компоненты сцены, которая разработана другая команда, лучшая практика должна была заключаться в том, чтобы сначала обратиться к этой команде, чтобы выяснить, следует ли поддерживать ли он использование этих компонентов для безопасного использования в будущем. Давая руководители к команде, которая изначально разработала код, предотвратит доставку сломанных функций в будущем, когда код, который вы вносили, неизбежно изменяются способами, которые вы не ожидали (из-за, конечно, как вы могли!), И что может не всегда быть пойманным по тестам подразделения.
5. Общая библиотека
Компоненты, которые мы тестировали в побуждение в производстве и захотите извлечь в нашу общую библиотеку компонентов, используемые другими командами приборных панелей при Unity.
Ода для совместных зависимостей
Хотя было бы очень удобно иметь возможность построить и развернуть каждую часть нашего применения в полностью изолированной среде, определенные зависимости – как внешние библиотеки, так и внутренний код приложения – просто будут использоваться все по всей кодовой базе. Такие вещи, как реагируют, Redux и все логические, связанные с redux, общие навигационные компоненты и т. Д.
Выкатывая изменения
На данный момент, полностью инкапсулируя сцены не практично и во многих случаях просто невозможно. Это потребуется либо доставка многих зависимостей несколько раз, и в процессе, замедляющих нагрузки на страницы, или построение абстракций, предназначенные для того, чтобы сделать определенные библиотеки работать в отдале, они не были разработаны.
Поскольку веб-разработка и его экосистема развивается, хотя библиотеки, кажется, становится все более и более автономным и инкапсулированы, что мы надеемся, что в будущем будет мало что значит, что не имеет значения для отсутствия общих зависимостей и истинной изоляции между всеми модулями.
Использование монореспори дает возможным (хотя и не обязательным), чтобы развернуть изменения и обновления кода более постепенным и безопасным способом – если изменение вызывает проблемы, эти проблемы будут влиять на небольшую часть приложения, а не всю систему.
И хотя для некоторой способности выполнять обновления по нескольким несвязанным областям кодовой базы в то же время, в то же время произойдет в пользу, реальность наличия нескольких команд, работающих на одной и той же кодовой базе, и не знала всех функций других команд, которые полностью значит, что Необходимо большое значение осторожности необходимо при построении лесов приложений и принятия мер, чтобы минимизировать риск поломки.
Как избежать нарушения вещей
Возможно, самая фундаментальная стратегия, которая помогает нам сделать это, кроме изоляции сцены, имеет Высокая единица тестового покрытия Отказ
- Тестирование
Агрегаты, конечно, не все, конечно, все – многие зрелые продукты по одному умеренному масштабу делают ведь в инвестировании в люксам интеграции и тесты E2E, которые выполняют лучшую работу при проверке того, работает ли приложение, как и ожидалось в целом. Однако, поскольку количество функций растет, так и стоимость обслуживания и времени, необходимое для их запуска – стоимость, которая не всегда может быть оправдана для менее важных, но все же важных функций.
Некоторые уроки, которые мы узнали из различных стратегий тестирования:
- Постарайтесь установить тест как можно большее из кода, особенно: условная логика, преобразования данных и вызовы функций
- Инвестируйте и используйте тесты на интеграцию в их полную активность, прежде чем решить, чтобы написать любые тесты E2E. Начальные затраты на интеграционные тесты намного выше, но Pales по сравнению с ценой содержения E2E
- Старайтесь не преодолевать реагирование, начиная писать тесты E2E для вещей, которые не попали в единицу или тесты интеграции. Иногда процессы или инструменты находятся на неисправности
- Пусть тестируемые случаи объясняют поведение пользовательского интерфейса, а не детали реализации
- Автоматизированные тесты не могут полностью заменить ручное тестирование
2. Минимизируйте поверхность общего кода
Помимо тестирования, код повторно используется по всему приложению, поддерживается до разумного минимума. Одна из самых полезных стратегий до сих пор заключается в том, чтобы переместить наиболее часто используемые компоненты и код в общую библиотеку компонентов, откуда они используются в качестве зависимостей в сценах, которые им нужны. Это позволяет нам выкатить большую часть изменений постепенно, на в каждой группе или на странице.
3. подотчетность
Последнее, но не менее важное, огромный фактор в нескольких командах может сотрудничать в том же кодовой базе, приходит от поощрения и иметь Разработчики принимают личную ответственность и подотчетность для продукта Вместо того, чтобы выгружать ответственность за должным образом тестирование, что все работает до Q.A., Тестеров или автоматизации.
Это также переносится на обзоры кодирования. Убедитесь, что каждое изменение тщательно рассмотрено сложнее, чем может показаться на поверхности. Как команда работает тесно вместе, между его членами разрабатывается здоровая степень доверия. Однако это доверие, однако, иногда может привести к тому, чтобы люди были менее прилежными в связи с изменениями, сделанными более опытными или надежными заслуживающими доверительными разработчиками.
Чтобы поощрить усердие, мы подчеркиваем, что Автор PR и рецензента одинаково несут ответственность за обеспечение всего работ Отказ
Библиотека компонентов
Чтобы достичь того же внешнего вида и чувствовать себя по всем страницам наших панелей, мы разработали компонентную библиотеку. Что стоит в нашем подходе, состоит в том, что новые компоненты почти никогда не развиваются в этой библиотеке.
Каждый компонент после разработки в кодовой базе панели инструментов, вступает в систему в группе функций в этой кодовой базе. Обычно через несколько недель мы начинаем чувствовать себя более уверенно, что компонент может быть перемещен, учитывая, что:
- API достаточно гибко для поддержки предсказуемых случаев использования
- Компонент был протестирован в различных контекстах
- Производительность, отзывчивость и UX все учитываются
Этот процесс следует за Правило три и стремится помочь нам Отпустите только компоненты, которые действительно многоразовые И были введены в эксплуатацию в различных контекстах, прежде чем быть перемещенным в нашу общую библиотеку.
Некоторые из примеров компонентов, которые мы переехали, будут включать в себя: нижний колонтитул, заголовок страниц, боковых и верхних элементов навигационного навигационного навигация, макетные строительные блоки, баннеры, принудительные версии кнопок, элементы типографии и т. Д.
В первые дни библиотека компонентов была расположена в том же кодовой базе, что и сам приложение. Мы с тех пор мы извлекли его в отдельный репозиторий, чтобы сделать процесс разработки более демократизированными для других команд при единстве – важно во время вождения для его принятия.
Модульная конструкция компонента
В течение более длинного времени сооружения многоразовые компоненты означали дело с несколькими проблемами, многие из которых часто не имели хороших решений:
- Как легко импортировать компонент вместе со своими стилями, и только это
- Как переопределить стили по умолчанию без селектора специфичности войны
- В больших компонентах, состоящих из нескольких небольших, как переопределить стиль меньшего компонента
Наша приборная панель, а также наша библиотека компонентов в значительной степени зависит и использует Материал интерфейс Отказ Что уникально убедительно в стиле укладки материала, является потенциалом, приведенным JSS и их Унифицированный стиль языка (ну стоит читать), что позволяет развивать УИС инкапсулирован дизайном как в случае CSS модули и решить вышеупомянутые проблемы в шаге.
Это значительно отличается от подходов, таких как Бем которые обеспечивают Инкапсуляция по соглашению которые имеют тенденцию быть менее расширяемыми и менее инкапсулированными.
Руководство по живущему стилю
Библиотека компонентов не будет завершена без способа продемонстрировать компоненты, которые он содержит и сможет увидеть компоненты, поскольку они меняются на протяжении всех выпусков.
У нас был довольно хороший опыт работы с Статьгор который был смешно простым в настройке и начать, но через некоторое время мы поняли, необходим более надежное и в конечном итоге. Довольно близко к чему Стильгидист Предложения, но более адаптированы к нашим потребностям.
Существующие проектные документы
Документация, служащая основным источником информации о последних спецификации дизайна, была расположена в слиянии, где дизайнеры содержали современную спецификацию для каждого компонента с использованием скриншотов, иллюстрирующих разрешенные чехлы использования, состояния и вариации, которые могут быть в списке, перечислены Лучшие практики, а также детали, такие как размеры, используемые цвета и т. Д. После этого подхода мы столкнулись с ряд вызовов:
- Спецификация дизайна материала продолжает развиваться И из-за того, что мы часто находили себя либо проводить время на обновлении всех скриншотов и руководящих принципов, или пусть наши руководящие принципы проектирования устарели
- Выяснение, что более правильно: внедрение или спецификация не всегда была легкой задачей. Поскольку мы публикуем демонстрацию Desebook каждого компонента и для каждой версии библиотеки, мы могли бы увидеть, что и как изменилось. Мы не могли сделать то же самое для спецификации дизайна.
- Скриншоты и видео могут общаться только как можно больше Отказ Чтобы обеспечить компоненты высокого качества и которые могут быть использованы несколькими командами, необходимо просмотреть, работает ли каждый компонент во всех резолюциях, отсутствует без ошибок и имеет хороший UX – это было трудно без того, чтобы дизайнер не был сидеть, буквально рядом с вами, чтобы увидеть Реализация демонстрация демонстрации на экране
Приложение для документации компонентов
Наша приложение для документации направлена на предоставление средств эффективного сотрудничества между дизайнерами и инженерами, чтобы сделать его более простым и менее трудоемким для обеих сторон для документирования, рассмотрения и разработки компонентов. Быть более конкретным, нам нужно было:
- Иметь одну точку ссылки, демонстрируя компоненты Как Должны ли они выглядеть, вести себя, и использоваться – предусмотрено для каждого выпуска – замена подробных описаний с живыми демонстрацией
- Сделайте это так легко для дизайнеров и разработчиков для совместной работы на компонентах и их документах и сделать это до того, как компоненты будут выпущены – без необходимости совместного использования видео, скриншотов или быть физически в том же месте
- Разделите дизайн в то, что мы планируем делать против того, что было сделано
Как и ранее, каждый выпуск компонентной библиотеки вызывает опубликованную новую версию живого стиля. На этот раз, однако, есть несколько различий:
- Дизайнеры вносят свой вклад в документацию компонентов напрямую Редактирование файлов документации через пользовательский интерфейс GitHub, совершая изменения в последнем выпуске.
- Компонент демонстрация как WYSIWYG – тот же код, который вы видите в качестве примера того, как реализовать компонент, используется для отображения демонстрации, включая любой промежуточный импорт файлов, переменные объявления и т. Д. В качестве добавленного бонуса компоненты, завернутые в
с помощью ()отображаются правильно ( выпуск на данный момент в истории книги). - Изменения в документах и код почти мгновенно видны Не проверяя ветвь локально и начать приложение Documentation – приложение восстановлено и опубликовано и для каждого коммита.
Опыт развития
Одной из главных целей отзывов кода является уверенность, что каждое изменение тщательно рассмотрено, рассмотрено и проверено перед объединением и развернутым.
Чтобы сделать эту задачу как можно больше препятствий, мы разработали Предварительный просмотр сервера Способен создать новую сборку нашего приложения каждый раз, когда PR создается или обновляется.
Наши дизайнеры, менеджеры и инженеры продукта могут проверять каждое изменение, прежде чем объединить его, как в постановке, так и в производстве, так и в течение нескольких минут после изменения изменения.
Закрытие слов
Прошло почти год, так как мы предприняли, чтобы укрепить наши информационные панели. Мы провели это время, узнав, как вырастить большой, но здоровый проект по программному обеспечению, как лучше поправиться при совместной работе и связи, и как поднять качественную батонку для себя.
Мы масштабировали проект Frontend не только с точки зрения строк кода, но и с точки зрения количества инженеров, которые работают в пределах его кодовой базы – номер, который в четыре раза.
Мы проделали 180 градусов по борьбе со временными различиями между нашими командами, переходя от модели, в которой наши команды работали в полной изоляции к одному, где тесное сотрудничество и связь являются повседневным возникновением.
Пока у нас еще есть долгий путь, чтобы мы могли масштабировать наш подход к большему количеству команд и более крупными проблемами, мы уже заметили ряд улучшений:
- Дорожная карта и видимость работы Из-за одного места, где происходит вся работа, прогресс отслеживается, и все проблемы собраны в
- Скорость развития и время на рынок Новые функции могут быть созданы в большую часть из уже существующих и хорошо проверенных компонентов – легко найти в нашей документации
- Код Качество и тестовое покрытие При строительстве новых вещей решение по аналогичной проблеме обычно уже существует и находится под рукой, наряду с примерами, как это проверить
- Общее качество и UX Особенности тестирования и обеспечение их качества в настоящее время проще, чем когда-либо, как дизайнеры, менеджеры продукта и другие заинтересованные стороны могут тестировать каждое изменение на собственной машине, со своими собственными учетными записями и наборами данных
Естественно, по пути мы столкнулись с ряд проблем, которые нам нужно решить, или которые понадобится решать в будущем:
- Paint & Ci Performance В качестве количества зависимостей, создание пучков и испытаний растут, как и время, необходимое для выполнения развертывания. В будущем нам понадобится разработка инструментов, чтобы помочь нам только построить, тестировать и развернуть части, которые изменились.
- Культура развития Чтобы построить здоровое программное обеспечение, нам нужно постоянно работать над здоровыми способами связи и обмена идеями, а текстовые коммуникации делают эту задачу более сложной. Мы работаем над тем, чтобы решить эту проблему через серию регулярных учебных заседаний в серии и охватывающую более открытые пути работы, а также организацию нескольких сеансов составляют вместе в год для команд, которые встречаются друг с другом лицом к лицу.
- Разрыв изоляции и обновления По мере роста числа функций и страниц нам понадобится более надежный способ выделения наших прикладных модулей для предотвращения распространения ущерба для того, чтобы они не так. Это может быть достигнуто путем версий всего общего кода (логика Redux, SRC/компоненты) или в крайних случаях, создающих автономные сборки определенных функций.
Состояние тогда, теперь и в будущем
Миграция связана с уходом от Angularjs, чтобы реагировать. Вот как ситуация изменилась за прошедший год:
Это обертывание! Спасибо за чтение! Вы можете найти меня на LinkedIn здесь Отказ
Если работать над подобными проблемами звучит интересно для вас, мы всегда ищем талантливых инженеров, чтобы присоединиться к нашим командам по всему миру Отказ