Переход с Angular 1.6 на React @ Qwil.
Angular 1.6 больше не делал этого для веб-приложения Qwil. Нам нужно было перейти к чему-то новому, что лучше масштабировалось бы и предоставляло лучший опыт как конечному пользователю, так и нашей растущей команде разработчиков.
Как разработчик, вы должны быть осторожны, когда беретесь за новые, порой разрекламированные технологии. Вы не хотите использовать что-то новое просто потому, что это «круто», о чем скоро забудут, или, что еще хуже, что-то, что провалится в масштабах.
Время было решающим в нашем решении. Angular 2 еще не был выпущен, а фреймворки MVC с двусторонней привязкой уступали место веб-компонентам.
У React уже было большое сообщество, и было доказано, что он готов к работе, поэтому мы решили начать использовать его в нашем внешнем стеке.
Мы также хотели иметь возможность постепенно добавлять новые функции, не поддерживая две разные базы кода.
Выполнение
Redux уже был реализован в некоторых частях приложения и значительно облегчил нам жизнь, поскольку состояние приложения уже было отделено от представлений.
Можно много говорить о сложности Redux в небольших веб-приложениях, но это обсуждение выходит за рамки этого поста. В нашем случае наличие Redux уже сделало нашу миграцию намного проще, а наш код более тестируемым.
Первое, что нужно добавить, это webpack и babel, которые будут использоваться только для создания пакета из компонентов jsx, действий редукции и редукторов редукции. Позже этот пакет может быть внедрен как обычный актив.
Выше приведен пример конфигурации веб-пакета, после того, как он будет запущен и запущен, вы можете добавить полученный пакет в свое приложение angular в любом случае, мы делаем это с помощью gulp, но это выходит за рамки этого поста.
Рендеринг компонентов React в Angular
- Мы создали компонент более высокого порядка, чтобы обернуть наши компоненты-контейнеры в react2angular, вот так:
import React from 'react';
import { react2angular } from 'react2angular';
function angularWrapper(componentName, propTypes = {}) {
return function test(WrappedComponent) {
function Wrapper(props) {
return (
<WrappedComponent
{...props}
store={window.globalReduxStore}
/>
);
}
// attaches the wrapped component to window
window[componentName] =
react2angular(Wrapper, Object.keys(propTypes));
return Wrapper;
};
}
export default angularWrapper;
Это просто прикрепляет экземпляр компонента к window после его обертывания в react2angular и предоставляет хранилище избыточности, поскольку на данный момент у нас нет провайдера.
2. Украсьте компоненты контейнера
const propTypes = {
user: PropTypes.object,
activePage: PropTypes.string,
};
// you need to define the name of your wrapped component
// that will be attached to the window
@angularWrapper('ReactHeader', propTypes)
@connect(mapStateToProps, mapDispatchToProps)
export default class Header extends Component {
...
}
3. Объявить компонент в angular
Помимо украшения ваших компонентов контейнера, вам нужно будет объявить компонент с помощью angular, например:
angular
.module('yourWebapp', ...)
.component('reactHeader', window.ReactHeader);
4. Теперь вы можете использовать компоненты, написанные на React, в своих шаблонах angular.
<react-header />
Обратите внимание, что это то же имя, которое вы указали в декораторе ReactHeader, только в другом регистре. React2Angular преобразует UpperCamelCase в спинномозговой.
Вывод
Мы успешно развернули новые функции для избранного набора отмеченных функций пользователей и смогли собирать статистику без необходимости поддерживать две разные базы кода и конвейеры развертывания.
В самом конце, перед переключением, у нас было две полностью работающих реализации приложения (обе они имели два разных макета и скина), которые можно было очень легко включить или отключить на уровне пользователя.
Очистить
На момент написания этой статьи наша миграция подошла к концу, и все наши пользователи видят новую версию React, старый код удален, и мы постепенно удаляем gulp и устаревший css.
Процесс создал некоторый технический долг, и среда разработки по-прежнему представляет собой гибрид реакции/углового. На данный момент, возможно, имеет смысл создать свежую новую кодовую базу с помощью веб-пакета только для оптимального опыта разработки.
