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

Какие изменения мы внесли в нашу функцию

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

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

Использование флагов функций для создания новой функции

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

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

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

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

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

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

‍
Извлечение уроков из этого процесса

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

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

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

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

На что было бы похоже создание без флагов функций

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

Начните использовать флаги функций

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