Здесь, в SalesLoft, мы активно переносим наше приложение AngularJS в приложение React. Процесс объединения одного внешнего фреймворка с другим при постепенном удалении первого может быть довольно сложным. Одним из инструментов, облегчающих рефакторинг, является Storybook. Следующей тирадой будут мои открытия и знания о том, как добавить React в angular с помощью Storybook.
Этот пост не о том, как писать React или Angular, он о том, как их интегрировать вместе!
Первый шаг - это полу-элегантный перенос кода React в приложение AngularJS. Первым делом нужно создать угловой компонент. Это будет вашим «контейнером» для вашего реагирующего компонента. Здесь вы объявите его реквизит; функции, логические значения и все остальное, что компоненту необходимо отобразить. Теперь я представляю, что вы думаете: «Зачем мне писать больше кода для этого? Почему я не могу сделать все это в контроллере angular? " Потому что, надеюсь, тем самым вы уберете из него функции и логику!
Нет ничего лучше, чем посмотреть на diff вашего контроллера (на фото выше) и посмотреть, как он становится менее сложным, удаляя код вместо того, чтобы загрязнять его, объявляя props или любую конкретную или новую функцию, которая понадобится компоненту React. Это очень важно, особенно когда вы создаете несколько компонентов React и помещаете их в один и тот же шаблон angular. Это значительно помогает уменьшить сложность и путаницу. Когда вы имеете дело с фирменной поркой новых контроллеров, содержать их в чистоте еще проще.
Шаг второй - использование Storybook. Использование Storybook - это не только круто, но и позволяет быстрее разрабатывать компоненты React. На высоком уровне вы можете создавать полные компоненты React изолированно - это означает, что они работают на другом порту, чем ваше приложение. Это ускоряет кодирование Storybook WAY и упрощает просмотр компонентов, которые вы создаете. Еще одно большое преимущество использования Storybook заключается в том, что вы можете создавать все различные состояния, в которых может находиться компонент, передавая компоненту различные заглушки. Взгляните на скриншот ниже. Помимо импорта React и Storybook в файл, в самом файле есть только две вещи; вспомогательная функция для определения реквизита и самих историй!
Внутри пользовательского интерфейса сборника рассказов вы можете переключаться между этими различными состояниями одним щелчком мыши! (на фото ниже)
Возможность разрабатывать компоненты React и все их различные состояния без необходимости настраивать этот «сценарий» в вашем приложении огромна и помогает повысить скорость и производительность. Как я уже говорил выше, Storybook запускается отдельно от вашего приложения, чтобы гарантировать, что ваши компоненты полностью независимы от стилей вашего приложения и javascript, чтобы вы могли действительно создавать повторно используемые компоненты React.
Ну вот и все! Я надеюсь, что это дает вам некоторое представление о том, как я атакую интеграцию React в AngularJS с помощью Storybook. Если у кого-то есть какие-либо вопросы, я хотел бы услышать от вас! Оставьте комментарий или вопрос, чтобы начать разговор.
Стивен Сеттл (Stephen Settle) - инженер-программист в SalesLoft в нашей команде интеграции электронной почты и наш постоянный знаток боевиков. Вы можете найти его в кинотеатре, где он смотрит последний величайший фильм Marvel (Marvel ››› DC; не @ him).
