Вам когда -нибудь нужно было обновить информацию на веб -странице в короткие сроки, но обнаружили, что весь процесс сложным, медленным и склонным к ошибкам? Редактирование кода, повторное развертывание … разве не было бы здорово, если бы вы могли сделать это в простой консоли администратора без изменения кода? Ну, вы можете с запуском!
LaunchDarkly — это услуга, которая позволяет пользователям легко реализовать флаги функций в своих проектах. Флаги функций могут использоваться для изменения пользовательских функций в запущенном приложении через консоль Admin Admin Adminark Lainchdark.
Это невероятно мощно в тех случаях, когда вы хотели бы добавить функцию в продукт, но хотите контролировать его после развертывания, избегая необходимости повторного развертывания, если вы обнаружите, что вещи не пошли, как планировалось.
Флаги функций также могут использоваться для развертывания функций на указанный процент пользователей или пользователей, которые соответствуют определенным требованиям, что позволяет выполнять супер простые запуска канарейки.
Помимо DevOps и функций развертывания, есть много других вариантов использования реального мира для LaunchDarkly. В этом посте мы рассмотрим, как вы могли бы использовать запуск, чтобы показать результаты определенного известного спортивного события ( , кого не должны быть явно названы, но это связано с чем-то супер 🏈 ), где нет доступного API и информация должна быть обновлена вручную.
StrangeDarkly помогает вам отделить развертывание от выпуска, а также предоставляет механизм нетехнических людей, чтобы управлять поведением вашего хода услуг.
Так что возьмите напиток и садитесь со мной, исследуя мощность флагов. В этом примере используется приложение Create React для развертки пустого проекта и NetLify для хостинга. ❤ ️
Начнем с QuickStart руководство. Это проведет вас через первые шаги создания флага функций.
Сначала создайте флаг функции и выберите имя. Затем выберите, какой язык приложений вы планируете использовать, и выберите среду, для которой она будет использоваться.
Поскольку этот пример использует ReAct, я решил использовать интеграцию, которая поддерживает использование LaunchDarkly с помощью React LD-React Анкет Он следует за идиоматическими шаблонами реагирования и использует API Websocket LaunchDarkly, поэтому изменения флага функций будут направлены на клиент без необходимости обновления страницы.
Примечание
Что -то, чтобы отметить с использованием клиентской стороны SDK, это то, что вы Должен Вручную включите флаги функций для использования клиентской стороны, проверив коробку в разделе «Настройки» в консоли администратора LaunchDarkly. См. Ниже В противном случае вы можете на некоторое время почесывать голову, спрашивая себя: «Но почему? Ну, вот почему.
На фрагменте кода ниже показан флаг, который представляет собой простую логическую переменную с именем ShowCountdown. Это включает в себя компонент обратного отсчета в действите и выключен.
{
this.props.flags.showCountDown ? (
) : (
);
}
Этот второй флаг называется многомерным флагом. Это позволяет пользователю определять ряд вариаций, которые возвращают строковое значение, а не слою. У него есть восемь вариаций, чтобы представлять все команды, участвующие в спортивном мероприятии, на котором этот пример был основан. Иди Глинеры!
Что -то, что вы можете заметить, когда у вас есть первый флаг, это информация о странице обновляется без перезагрузки страницы. Это здорово в случае того, как кто -то ждет страницы, не обновляя ее, не обновляя ее регулярно. Это гарантирует, что у них будет правильная информация немедленно.
Помимо флагов функций, LaunchDarkly также обеспечивает поддержку для A/B -тестирования и отслеживания целей. Возможность отображать определенную информацию/функции для конкретных групп, а затем получить аналитику на взаимодействии с пользователями очень полезно.
Так что продолжайте и внедрите эти флаги! Я хотел бы услышать, как вы используете флаги функций в своих приложениях.
Для более тщательного взгляда на проект проверьте репо Здесь или посетите живая версия Анкет
Счастливого взлома.
Оригинал: «https://dev.to/roseanna/using-launchdarklys-feature-flags-with-react-to-display-real-time-information-400»