리액션으로 이동 - 소개

날짜가 확정됨에 따라end of AngularJS long-term support AngularJS 프로그램을 유지하고 있는 많은 회사들에게 경종이다.나와 나의 팀은 우리의 대형 AngularJS 응용 프로그램을 React로 바꾸려고 노력해 왔다. 이 과정에서 우리는 많은 것을 배웠다.React와 같은 자바스크립트 프레임워크로 이전하는 것은 어려운 작업인 것 같지만, 이것은 완성할 수 있습니다. 같은 작업을 수행하는 데 도움을 줄 수 있도록 우리가 그것을 어떻게 처리하는지 보여 드리겠습니다.

마이그레이션 또는 재작성

비록 매우 매력적이지만, 완전히 다시 쓰는 것은 위험이 매우 높은 일로, 감당할 수 있는 사람이 매우 적다.처음부터 애플리케이션을 재작성하면 마이그레이션 문제가 제거되지만, 결과적으로 코드 중복이 도입되고 실제 사용자에 대한 프로덕션 테스트를 수행하는 데 시간이 오래 걸립니다.신기술에서 다시 쓴 코드에 대한 지연 피드백은 그것이 정확하게 완성되었는지 믿지 못하게 할 것이다. 이것은 이 방법의 고유한 위험이다.
다른 한편, 증량 이전은 단일 부품을 한 번에 전환할 수 있기 때문에 모든 기능이 신속하게 생산에 들어가고 실제 사용자가 대규모의 테스트를 진행할 수 있다.이전에 출하에서 받은 피드백은 더욱 많은 개선을 추진할 것이고, 시간의 추이에 따라 이러한 개선은 더욱 복잡해질 것이다.또 다른 장점은 새로운 우선사항이 생겼을 때 팀을 조정할 수 있다는 것이다.새로운 기능은 신기술의 기존 응용 프로그램에 쓸 수 있지만, 다시 쓰기를 통해, 다시 쓰기를 한 응용 프로그램이 기능이 대등해지기를 기다려야 발표할 수도 있고, 더 나쁜 것은 낡은 기술로 새로운 기능을 작성할 수도 있다.
소형 응용 프로그램에 대해서는 다시 쓰는 것이 가능한 방법일 수도 있지만, 대형 응용 프로그램에 대해서는 증량 이전이 가능한 방법이다.

메서드

우선, 프로그램의 화면에서 목록을 점검하십시오.간단한 표, 논리성이 낮은 화면, 또는 정보만 표시하는 영역을 찾으십시오.이것들은 반응으로 전환할 가장 좋은 후보자들이다.
우리의 첫 번째 전환은 비밀번호 화면을 바꾸는 것이다.이것은 일부 입력과 기본적인 검증만 포함하는데, 우리 응용 프로그램에서 이것은 데이터가 매우 많은 분야가 아니다.고도로 사용된 기능을 전환하는 것은 더욱 큰 위험을 가져올 수 있기 때문에 전통적인 기능부터 시작하는 것이 가장 좋다.다른 사람들을 당신의 팀에 남겨 두어 성공을 거둘 때.

명심해야 할 원칙

응용 프로그램을 트리 구조로 간주하십시오. 우리는 잎부터 시작하여 위로 작업하기를 바랍니다.
다시 말하면 AngularJS는 반대가 아니라 반응을 보일 것이다.

AngularJS 응용 프로그램, 일부 구성 요소가 React로 변환됨
형식에 관해서는 한 번에 모든 것을 바꾸는 것이 가장 좋다.
React 입력 컨트롤이 Angular JS 폼 프레임워크에서 작동할 수 있다고 확신하지만 문제는 우리가 이렇게 해야 하는가 하는 것입니다.이러한 제어 입도를 가지면 우리는 특정 상황에서 무엇을 전환해야 하는지 알기 어려울 것이다. 이것은 나의 다음 점을 끌어낸다.
집적 코드는 일회용 코드이기 때문에 우리가 적게 쓸수록 좋다.
이전의 예에서, 나는 AngularJS 폼에서 맞춤형 React를 사용하여 구성 요소를 입력하고, AngularJS가 원하는 모든 것을 완성하도록 하는 데 많은 시간을 들였다. (폼이 바뀔 때 폼을 더럽히고, 값을 바꾸며, 폼을 검증하는 등) 이것들은 모두 폼 전체를 변환하고 그것을 사용하여 완성할 수 있다.
또 다른 피해야 할 것은 기존 AngularJS 서비스의 React 버전을 만들고 코드를 작성해서 동기화시키는 것이다.전역 상태는 AngularJS에서 제어해야 합니다. 전체 응용 프로그램을 가지고 있기 때문입니다.React에서 복제 서비스를 작성하고 동기화하는 것은 불필요하며, 이상한 오류가 발생할 수 있습니다.간단함을 유지하다.

경로

이동의 가장 큰 도전 중 하나는 공유기와 관련된 것이다.모든 어셈블리가 파이프라인 정의에 따라 렌더링되기 때문에 전면 척추를 충당합니다.라우팅 아래의 AngularJS 템플릿을 React로 변환할 수 있지만 AngularJS 코드의 라우팅 정의는 유지되어야 합니다.
하지만 그게 문제야.상상해 봐, 너는 이미 모든 노선의 템플릿을 바꾸어 반응을 했다.다음은요?모든 노선 정의를 동시에 바꾸시겠습니까?만약 많지 않다면 그것도 괜찮지만, 대형 응용 프로그램에 있어서는 악몽이 될 것이다.
우리가 생각해낸 해결 방안은 AngularJ와 React 공유기가 같은 페이지에 공존하도록 하는 것이다.시간의 추이에 따라, 이것은 우리가 루트를 React 코드로 옮길 수 있도록 허용한다.
파이프라인 정의는 AngularJS만 렌더링하기 시작합니다.
구성 요소

첫 번째 노선은 반응 노선으로 전환되었다.

그리고 두 번째 노선이 바뀌었다.

현재/details와 /permissions의 노선 정의는
단일 React 어셈블리로 이동합니다./users/{id} .

코드 라이브러리 준비

Angular JS에서 React로 이전하기 위해서는 먼저 Babel과 Webpack (또는 다른 현대 패키지를 사용하는 것) 을 업데이트하는 것이 필요하다.우리가 이전 반응에 대해 이야기하기 시작했을 때, 우리는 여전히 Gulp을 사용하고 있기 때문에, 우리의 첫 번째 단계는 우리의 저장소를 Webpack으로 옮기는 것이다.

코드가 어디에 있습니까?

네가 먼저 해야 할 결정은 네 새 코드가 어디로 갈지 하는 것이다.만약 응용 프로그램이 하나의 저장소에 있다면, React 코드를 AngularJS 코드와 함께 두는 것은 의미가 있습니다.그러나 만약 응용 프로그램에 자신의 저장소가 있는 모듈이 있다면, React 설정을 사용하여 새로운 저장소를 만들 수 있습니다.

JSX 지원

JSX와 React 프로그램에서 일반적으로 사용하는 모든 자바스크립트 기능을 처리할 수 있도록 babel-preset-react-app 패키지를 사용하는 것을 권장합니다.이것은 Create React 응용 프로그램에서 사용하기 때문에 React 개발에 필요한 모든 문법 지원을 받는 가장 간단한 방법입니다.
https://www.npmjs.com/package/babel-preset-react-app
Babel 구성에 사전 설정을 추가하면 이동할 수 있습니다.

{
  "presets": ["react-app"]
}

테스트 주자 설정

React 코드의 위치에 따라 테스트 실행 프로그램은 전혀 문제가 되지 않을 수 있습니다.만약 React 코드가 자신의 저장소에 있다면, 이것은 그것을 간단하게 할 것이다.Jest를 새 저장소에서 구성하기만 하면 됩니다.하지만 AngularJS와 어깨를 나란히 하고 싸운다면 아직 해야 할 일이 있다.
Jest(React)와 Karma(AngularJS)를 같은 저장소에서 처리하는 방법은 파일에 별도의 접미사를 사용하는 것입니다.예를 들어 현재 .spec.js 을 사용하여 AngularJS 테스트를 진행하고 있다면, .test.js 을 사용하여React 테스트를 진행할 수 있습니다.모든 테스트 실행 프로그램이 지정한 접미사만 찾을 수 있도록 확보하십시오.

요컨대

대규모 애플리케이션에 대해 증분 마이그레이션을 수행하는 것이 좋습니다.

먼저 간단한 구성 요소를 바꾸어 일을 간단하게 한다.

사용babel-preset-react-appReact 개발 설정 코드 라이브러리.

React 코드를 단독 저장소에 저장하거나 파일 접두사를 사용하여 React와 Angular 테스트 실행자가 적당한 테스트를 겨냥하도록 돕는다.