Angular 2 vs React : The Ultimate Dance Off

일몰 휴식 시간 – Alí Marín (CC BY-NC-ND 2.0)

나를 따르는 대부분의 사람들은 내가 개인적으로 React를 선호한다는 것을 알고 있지만 물론 나는 정보가없는 편견이 아니라 내 결정을 교육 받기를 원합니다. 최근에 나는 Angular 2에 대해 깊이 탐구했습니다. 내 의견으로는 React와 비교하는 방법은 다음과 같습니다.

참고 : 때때로 커뮤니티의 일반적인 관행 인 Angular 2“ng2”를 축약합니다.

춤추 자

개발자 경험에 집중하고 싶으므로 개발자가 각각 ng2와 React를 사용하는 것에 대해 어떻게 생각하는지 살펴 보겠습니다. Angular 2와 React 모두에 대해 추종자들에게“다시 사용 하시겠습니까?”라고 물었습니다.

17 %만이 Angular 2를 다시 사용한다고 답했습니다.

56 %가 다시 반응을 사용한다고 말했다.

그게 다야 게임 끝. 권리? 글쎄요 대부분의 응답자는 아직 Angular 2를 사용하지 않았 으므로이 공정을 위해서는 설문에서 해당 그룹을 제거해야합니다.

아직 사용하지 않은 그룹을 제거하면 점수가 더 좋아집니다.

반응 : 84 %

각도 2 : 38 %

React는 고객 만족도 설문 조사에서 분명히 승리합니다. 그러나 이것은 과학적이지 않습니다. 여론 조사를 리트 윗 한 사람들의 추종자 및 추종자 일뿐입니다. 저는 주로 React에 대해 이야기합니다. 그러나 이들은 실제 경험을 공유하는 실제 사용자이기 때문에 숫자가 정확히 같지는 않지만 안전하다고 생각합니다 일반 사용자 모집단에서 우리는 무엇을 기대해야하는지 좋은 아이디어를 제공합니다.

차이점과 사람들이 자신의 기분을 느끼는 이유를 자세히 살펴 보겠습니다.

공연

많은 사람들이 기술 선택이 성능에 관한 것이라고 생각합니다. React vs Angular 1 기사는 성능에 중점을 두는 경향이 있습니다 (Angular 1 더티 검사 및 다이제스트 주기로 인해 쉽게 승리했습니다). 그러나 Angular 2는 그 행동을 정리했습니다. 빠릅니다. React와 Angular 2에 대한 테스트에서 성능은 큰 문제가되지 않았습니다. 그들에게는 각각 경고가 있지만, 깊이 들어 가지 않겠습니다.

다른 모든 CS 성능 문제와 마찬가지로 값 비싼 작업을 여러 번 반복해야하는 경우 앱 속도가 느려집니다. React & ng2의 경우, 가능한 경우 DOM 업데이트를 피하고, 가능한 경우 깊은 상태 반복을 피하고, 객체 및 구성 요소를 과도하게 생성 / 해제하지 않도록하십시오 ...이 기사의 목적 상 우리는 가정합니다 몇 대의 슈퍼카를 비교하고 있으며, 그들은 모두 속도 악마입니다. 귀하의 마일리지가 다를 수 있습니다.

즉, 팀의 성과를 앱 성과만큼 높이 평가합니다. 이 비교는 개발자 경험 및 개발자 팀 성능 문제에 중점을 둘 것입니다. 궁극적으로 팀은 빠르게 이동하고 빠르게 변경할 수 있어야합니다. 우리는 이러한 각 도구가 그 전선에서 어떻게 비교되는지 살펴볼 것입니다.

Angular 1이 프런트 엔드를 변화시킨 방법

Angular 1은 Backbone, Knockout 및 떠오르는 웹 구성 요소 사양의 아이디어를 결합하고 ng1 사용자 지정 지시문을 통해 사용자 지정 구성 요소를 대중에게 제공했습니다. 또한 OOP (종속성 주입 컨테이너)의 공통 패턴을 가져 왔습니다.

지금 당장은 분명하지만 Angular 1이 가장 대중화 한 IMO는 사용자 지정 구성 요소였습니다. 오늘날 널리 사용되는 모든 프런트 엔드 프레임 워크는 사용자 지정 구성 요소를 지원합니다.

반응이 프런트 엔드를 변화시킨 방법

React가 출시되었을 때 MV * 및 2-way 데이터 바인딩은 폭풍으로 프론트 엔드를 취했습니다. 백본과 녹아웃은 타자였습니다. Angular 1은 블록의 새로운 아이였습니다.

React에는 모델의 기본 제공 개념이 포함되어 있지 않으므로 팀은 Flux 아키텍처와 함께 사용하는 것이 좋습니다. Flux는 단방향 데이터 흐름 및 트랜잭션 상태를 규정하는 UI 아키텍처입니다. “더 나은 Redux 아키텍처를위한 10 가지 팁”에서 두 가지 이점을 자세히 설명했습니다. React, Flux 및 Redux에 익숙하지 않은 경우이 기사를 계속하기 전에 읽어 보는 것이 좋습니다.

React는 한 손으로 MVC를 쓸모없는 기술처럼 보이고 대중에게 단방향 흐름을 제공했기 때문에 변형되었습니다.

내 생각에 이것은 HTML 및 JavaScript 이후 프론트 엔드 아키텍처의 가장 중요한 변형입니다.

다행스럽게도 변형이 심해서 더 이상 반응하지 않습니다. ng2에서도 달성 할 수 있습니다.

Angular 2의 내용은 반응하지 않습니다

물론 두 프레임 워크 모두 사용자 지정 구성 요소 작성을 지원합니다. Angular 2에는 몇 가지 추가 사항이 있지만 본질적으로 응용 프로그램 스택의 프런트 엔드에 UI를 빌드하기 위해 존재합니다. Angular 2에는 더 많은 처방전과 "배터리 포함"철학이 있습니다.

Angular 2의 처방전 중 일부를 살펴 보겠습니다.

TypeScript

TypeScript와 사랑 / 증오 관계가 있습니다. 내 애완 동물 친구 중 하나는 TypeScript가 모든 종류의 버그에서 앱을 저장한다는 일반적인 아이디어입니다. 나는 당신에게 나쁜 소식이 있습니다.

"정적 유형에 대한 충격적인 비밀"을 읽으십시오. 버그 감소는 정적 유형이 좋지 않습니다.

타입 정확성은 프로그램 정확성을 보장하지 않습니다.
  • 정적 유형에는 잡히지 않는 많은 버그가 있습니다.
  • 버그 (TDD, 코드 검토)를 잡는 데 객관적으로 더 나은 방법이 있으며 대부분의 유형 오류를 잡아냅니다.

결과? 정적 유형은 한 종류의 버그를 제거 할 수 있지만 코드 복잡성이 증가하고 프로젝트에 대한 전체적인 버그 감소 영향은 적습니다.

정적 유형은 주로 개발자 툴링에 적합합니다. 코딩 할 때 함수 호출 서명과 같은 것에 관한 인라인 문서를 얻는 것이 매우 좋습니다. 그러나이를 달성하기 위해 항상 인라인 주석이 필요한 것은 아닙니다.

명확성, 개발자 설명서 및 향상된 개발자 툴링이 필요할 때 유형 주석을 지정한다는 아이디어가 마음에 들지만 대부분 유형 유추를 선호합니다. 인라인 형식 선언은 코드를 어지럽히고 읽기 어렵게 만듭니다.

좋은 소식은 TypeScript가 형식 유추에 매우 능숙하다는 것입니다. 원하는 경우 대부분의 경우 유추에 의존 할 수 있습니다. 추론 기능은 Tern보다 낫고 Atom 및 Microsoft Code 용 개발자 도구는 비슷한 Tern 플러그인보다 훨씬 좋습니다. 실제로 TypeScript는 오늘날 JavaScript 세계에서 사용할 수있는 최고의 인텔리전스 개발자 경험을 제공한다고 말하고 싶습니다. 당신은 그것에 사랑에 빠질 수 있습니다.

TypeScript는 오늘날 JavaScript 세계에서 사용할 수있는 최고의 인텔리전스 개발자 경험을 제공합니다.

형식 유추 기능에 TypeScript를 엄격하게 사용하고 선언되지 않은 모듈 및 모호한 매개 변수에 대한 오류 발생을 건너 뛸 수 있다면 항상 일반 JavaScript 파일에서 사용합니다. 쉬운 선택.

유형 주석 만 구성이없는 규칙에 따라 별도의 파일 (확실히 유형이 지정된 'd.ts'파일과 같은)에 항상 존재하면 더 많은 주석을 사용하고 TypeScript를 더 많이 사용하고 싶습니다. 문자 그대로 "단지 JavaScript"이므로 TypeScript를 모든 워크 플로와 더 쉽게 통합 할 수 있습니다. 표준 JavaScript를 지원하는 모든 컴파일러로 컴파일 할 수 있습니다.

실제로 TypeScript는 구성 오버 헤드 (모듈 가져 오기 오류를 방지하기 위해 모든 라이브러리 유형 추적), 구문 오버 헤드 (타이핑은 일반적으로 인라인으로 선언 됨), 많은 '모든'이스케이프 해치, 기타…

'모든'이스케이프 해치를 명확히하기 위해 TypeScript는 형식 생성자 스타일 구문을 사용하여 제네릭을 지원하지만 함수형 프로그래밍 스타일 구문, 관찰 가능 항목, 고차 함수 전환 등을 사용하여 작업을 수행하는 것이 항상 명확하거나 쉬운 것은 아닙니다.

입력하는 올바른 방법을 찾는 대신 개발자는 일반적으로`any`를 사용합니다. 본질적으로 유형 검사를 포기하고 "모든 유형이 여기에서 작동합니다"라고 말하는 것과 동일합니다.

모든 오버 헤드 및 이스케이프 해치는 버그를 숨길 수있는 노출 영역을 추가합니다. 팀에서 무시하는 TypeScript 오류가있는 TypeScript 프로젝트를 보는 것이 일반적입니다. 때때로 수백 또는 수천 개의 오류가 발생합니다.

HTML이 입증했듯이 오류가있을 때 작동하는 것을 만들면 오류가 확산됩니다.

무시되는 오류가있을 때마다 오류가 더 이상 유용하지 않고 노이즈로 바뀝니다. TypeScript 지지자들은 아마도 이러한 팀이 어떻게 잘못하고 있는지 알려주는 의견에 이미 모두 언급되어 있으며 실제로 오류를 해결해야하지만 옳습니다.

오류를 신속하게 해결하는 방법이 항상 명확한 것은 아니며, 그 동안 프로젝트 관리자는 개발자가 자신의 기능을 활용하도록 유도합니다. TypeScript는 오류가있는 경우에도 작업 빌드를 컴파일 할 수 있기 때문에 개발자가 좋아하든 그렇지 않든 큰 프로젝트가 그러한 상황에 처할 수 있습니다. 해당 프로젝트의 개별 기고자에게 프로젝트가 그 상태에 도달 한 경우 해당 상태에 도달하게했는지 물어 보면 100 %가 "아니요"라고 말할 수 있습니다.

그러나 큰 팀이있는 대규모 프로젝트는 그렇게 작동하지 않습니다.

"우리는 이것이 짜증나다는 것을 알고 있지만 나중에 고칠 것입니다."— 모든 실제 개발 팀.

TSLint 및 더 나은 문서로이 문제를 해결할 수 있습니다. 여전히 볼 수 있습니다.

다음 프로젝트에서 TypeScript를 사용 하시겠습니까? 개발자 도구가 마음에 들지만 오버 헤드가 가치보다 문제가 많다는 것을 알게되었습니다.

TypeScript를 많이 사용할수록 속도가 더 빠르다고 생각합니다. 속도가 빠르지 않고 버그 밀도를 크게 줄이지 않으면 왜 ___을 사용합니까?

그러나, 당신은 여전히 ​​TypeScript를 좋아할 것입니다.

그것은 당신을 느리게 할 수 있습니다. 때로는 감정과 좋아하는 것이 많이 중요합니다.

개발자의 행복이 중요합니다. TypeScript의 한계를 다루지 않을 때 다음을 발견 할 수 있습니다.

TypeScript를 사용하면 행복해집니다.

유형이 지정된 함수 인터페이스를 작성하고 다음에 오는 개발자가 문서를 읽거나 소스 코드를 보지 않고 함수를 호출하는 방법을 알고 있다는 것을 만족시키는 것이 있습니다.

프로젝트에 많은 오버 헤드가 발생하고 버그를 줄이는 데 도움이되지 않는다는 것을 알고 있으면됩니다.

그것은 무엇을 할 것인가? 개발 도구 마법.

방금 TypeScript 팬을 많이 열화 시켰습니다. “TypeScript가 짜증나고 사용하지 마십시오.”라고 말하지 않습니다.“TypeScript는 멋지고 개발 도구가 뛰어나지 만 개발자가 알아야 할 큰 절충점도 있습니다. 기대되는 모든 혜택을 제공하지는 않습니다.”

의존성 주입

첫째, 의존성 주입을 좋아합니다. 나는 항상 그것을 사용합니다. 그러나 Angular 2는 의존성 주입으로 당신을 이길 수 있습니다. 문서와 단위 테스트 레시피를 읽으면 제공자와 모의 의존성 및`beforeEachProviders ()`를 사용한 단위 테스트에 대한 모든 종류의 정보를 찾을 수 있으며 머리를 감쌀 때까지 시간이 걸릴 것입니다. ng2 주사제를 꺼내기 위해 많은 마술이 진행되고 있으며, 모든 것이 어떻게 작동하고 공급자를 어떻게 사용해야하는지에 대한 오해는 초보자에게 진정한 고집이 될 수 있습니다.

더 쉬운 방법이 있습니다. 의존성을 가져오고 프레임 워크를 사용하여 클래스 생성자 서명에 자동으로 넣는 대신 의존성을 취하는 함수를 작성하십시오. 정말 쉽고 & 다음과 같이 작동합니다 :

의존성 주입 (DI) 지지자들은 내가 지나치게 단순화하고 있고 (동의 함) 인스턴스화를 다루지 않고 있다고 말합니다 (동의 함). 상관 없어요

실제로 Angular 2에서 실제로 끝내야 할 것은 실제로 모의 (네트워크 액세스, 디스크 액세스, 타이머)를 필요로하는 몇 가지 항목을 조롱하는 대신 블랙 박스로 묶어야 할 많은 것들을 조롱한다는 것입니다. 구현 세부 사항.

나는 이것을 여러 번 말했지만 일반적인 지식이 될 때까지 계속 말할 것입니다.

조롱은 코드 냄새입니다.

물론 조롱이 필요한 경우도 있지만 앱에`* .mock.ts` 파일이 포함되어 있으면 문제가있는 것입니다. 앱이 너무 밀접하게 연결되어 있거나 (아이 론적으로 DI의 아이디어는 앱을 덜 연결하는 것입니다), 조롱 할 필요가없는 많은 것들을 조롱하려고합니다.

전 세계를 주입하고 조롱 할 필요가 없습니다.

재스민 속

“모카 대신 테이프를 사용하는 이유는 무엇입니까?”를 읽으십시오. 대부분 재스민에 적용됩니다.

Jasmine은 영어 문장처럼 읽기를 제대로 시도하지 않는 API를 제공하며 여러 가지 주장 벨과 휘파람을 제공합니다. 결과적으로 테스트 및 어설 션을 작성하는 수백만 가지 방법이 있으므로 결과를 이해하기 위해 각 항목을주의 깊게 읽어야 할 수도 있습니다.

소수의 핵심 어설 션으로 제한하는 것이 좋습니다. 대부분 평등 검사. 큰 팀에 있습니까? 좋은 성과 있길 바래요.

Jasmine은 우연히 공유 상태를 장려 할 수있는`beforeEach ()`및`afterEach ()`에 많은 의존성을 장려합니다. 무작위 테스트 실패를 일으킬 수있는 단위 테스트에서 매우 일반적인 문제 (Jasmine 테스트는 무작위 순서로 올바르게 실행됩니다) 테스트 상태에 대한 공유 상태 및 종속성 사용을 권장하지 않습니다).

이러한 비평 외에도 Jasmine에는 3 @ + $ # | +를 미치게 만드는 결함이 하나 더 있습니다. 두 객체가 동일한 지 비교하면 두 객체를 직렬화하여 하나의 큰 선으로 인쇄합니다. 즉, 기본 리포터 출력은 기본적으로 # $ %! @ # $ 쓸모가 없습니다.

[편집자 주 : 기사의이 부분에서 @ 소리가 나는 약 8 개의 문단을 잘라야했습니다. 우리는 완전한 대화 내용을 공유하지만, 아이들이 울고 강아지가 소파 밑에 숨어있을 수 있습니다.]

차이는 멋진 차이를 인쇄합니다. 테이프는 이것을 인쇄합니다 :

확인 1이 동일해야 함
---
연산자 : 같음
예상 : |-
{x : 1, y : {z : 3}}
실제 : |-
{x : 1, y : {z : 2}}
...

작은 물체의 경우 차이점을 쉽게 볼 수 있습니다. 더 나은 플러그인 리포터가 있습니다 :

개발자는 테스트가 실패 할 때 차이점에 대해 명확하고 분명한보고가 필요하며 Jasmine은 해당 부서에서 실패했습니다. 이 문제를 해결하기 위해 브라우저 내 좋은 기자를 연결하는 방법을 알고 있다면 의견을 말하십시오.

코어에 고정되기를 기다리는 경우 숨을 멈추지 마십시오. 이 문제에 대한 공개 된 문제는 2014 년부터 계속되었습니다.

다른 것들

Angular에도 많은 것들이 있습니다. 양식 및 유효성 검사기 등… 물론 사용자가 원하는 경우 React 사용자가 사용할 수 있습니다. 가장 큰 차이점은 React 사용자가 React 문서와 같은 명백한 장소에서 항상 최상의 솔루션을 찾지는 않는다는 것입니다. 대신 React 사용자는 커뮤니티 우수 사례, 블로그 기사 및 기타 학습 리소스에 더 의존하여 최선의 선택을 식별합니다.

모든 추가“기타 것들”이 Angular 2 번들을 부풀 렸습니다. Angular 2 + RxJS는 꽤 큽니다. 거의 800k가 축소되었습니다. 이는 React + Redux보다 약 4 배 더 크며 앱을 빠르게로드하고 렌더링하려는 경우 앱 코드를위한 호흡 공간을 많이 남기지 않습니다.

이것이 실제로 중요하다고 생각하는 유일한 크고 눈에 띄는 성능 차이이며 상당히 중요합니다. 로드 시간을 개선하면 전반적으로 앱의 KPI가 크게 향상됩니다. 로드 시간을 밀리 초 단위로 줄이면 중요한 비즈니스 메트릭스에서 벗어날 수 있습니다.

4 배 더 큰 (거의 메가 바이트!) 정말 큰 문제입니다. 필요하지 않은 경우로드하지 마십시오.

편집 : 여러 의견자가 지적했듯이 ng2에는 AOT (Ahead Of Time) 컴파일 및 트리 쉐이킹 기능이 있습니다. 올바르게 구성된 프로덕션 빌드를 사용하면 앱에서 실제로 사용되는 기능 만 사용하여 번들 크기를 크게 줄일 수 있으므로 최종 번들 크기가 훨씬 작아집니다. 프로덕션 번들을 올바르게 구성하는 것이 좋습니다. 이탈률, 전환율, 고객 만족도 및 이탈에 잠재적으로 큰 영향을 미칩니다.

Angular 2에서는 찾을 수없는 반응

Angular 1과 마찬가지로 Angular 2는 HTML 템플릿을 사용합니다.

ng2 템플릿의 장점은 기본적으로 표준 HTML의 향상된 형식이라는 것입니다.

ng2 템플릿의 나쁜 점은 약간의 Angular DSL을 배워야한다는 것입니다. `* ngIf`와`* ngFor`와 같은 것들.

ng2 템플릿의 추악한 점은 실수를 할 때 런타임에 실패한다는 것입니다. 때로는 조용히. Angular 2 템플릿 디버깅은 어려울 수 있습니다.

편집 : AOT를 사용할 때 최신 버전의 Angular 2에서 수정되었다고 들었습니다. 컴파일시 템플릿 오류가보고됩니다. 아직 수정 사항을 테스트 할 기회가 없었습니다.

반응에는 템플릿이 없습니다. 대신 컴파일 타임에 JavaScript로 컴파일되는 JSX가 있습니다.

JSX의 가장 큰 장점은 실수를 할 때 런타임을 기다리지 않고 디자인 타임에 린터에 의해 잡히거나 컴파일 타임에 걸리기 쉽다는 것입니다. Babel, ESLint 및 수많은 편집기 도구는 JSX를 기본적으로 지원합니다.

JSX의 또 다른 장점은 단순한 HTML 이상의 대상을 지정할 수 있다는 것입니다. 맞춤 마크 업을 타겟팅하고, 캔버스를 타겟팅하고, 기본 모바일 UI를 타겟팅 할 수도 있습니다.

JSX의 나쁜 점은 HTML 태그와 정확히 1 : 1을 일치시키지 않는다는 것입니다. JavaScript API와 마크 업의 Frankenstein 하이브리드입니다. 즉, 클래스 대신`className`을 사용하는 것과 같은 단점을 배워야한다는 것을 의미합니다. 그러나 루프, 조건부 등을 위해 일반 오래된 JavaScript를 JSX와 자유롭게 자유롭게 혼합 할 수 있기 때문에 학습 가능성이 ng2보다 뛰어납니다.

상태는 어떻습니까?

Angular 2와 React는 모두 원하는 데이터 관리 계층을 사용할 수 있습니다. 양방향 데이터 바인딩을 선택하지 않으려면 (어쨌든 IMO가 나쁜 것입니다) 자신의 상태 관리를 ng2로 가져올 수 있습니다. 기본적으로 Redux + Observables 인 ngrx / store를 권장합니다.

React의 경우 Redux (대부분의 큰 앱) 또는 MobX (트랜잭션 상태가 필요하지 않은 덜 복잡한 앱)를 사용해보십시오.

JavaScript 앱의 최신 상태 관리에 대한 자세한 내용은“더 나은 Redux 아키텍처를위한 10 가지 팁”을 참조하십시오.

무엇을 선택해야합니까?

둘 다 한동안 많이 사용한 후에 (물론 훨씬 더 길게 반응) Angular 2는 더 많은 기술 구매가 필요하고 앱에서 더 많은 상용구가 필요하다는 것이 분명합니다.

기술 선택을 좋아하고 추가 상용구 오버 헤드로 살 수 있다면 Angular 2를 선택하십시오.

Angular 2 기술 선택에 만족하지 않고 더 얇고 덜 규범적인 것을 원한다면 React를 선택하십시오.

물론 다른 옵션 (일부는 매우 우수함)이 있지만 대규모 생태계와 개발자 커뮤니티에는 가치가 있으며 React & Angular가 사용량을 지배합니다. 가까운 세 번째도 없습니다. 이 둘보다 인기있는 유일한 라이브러리는 jQuery입니다 (그렇습니다).

계속 춤추세요.

EricElliottJS.com에서 무료 레슨을 시작하십시오

Eric Elliott는 "Composing Software"및 "JavaScript Applications 프로그래밍"책의 저자입니다. EricElliottJS.com과 DevAnywhere.io의 공동 창립자로서 개발자에게 필수 소프트웨어 개발 기술을 가르칩니다. 그는 암호화 프로젝트를위한 개발 팀을 구성하고 조언하며 Adobe Systems, Zumba Fitness, The Wall StreetJournal, ESPN, BBC 및 Usher, Frank Ocean, Metallica 등을 포함한 최고의 레코딩 아티스트를위한 소프트웨어 경험에 기여했습니다.

그는 세상에서 가장 아름다운 여성과 함께 외진 생활을 즐깁니다.