2021년에 사용하고 싶은 Anglar 타사 라이브러리 10 선택

7371 단어 Angulartech
안녕히 주무세요.구글 Developers Expert for Anglar의 lacolaco.이 기사는 Anglar 추가 캘린더 2020 25일째 보도입니다.
매년 마지막 날을 쓰지만 늘 그랬던 것처럼'1년과 내년의 예상을 돌아본다'는 게 아니라 올해는 도서관을 간단히 소개해 드리려고 한다.
마음에 드는 것이 있으면 내년의 취미와 업무 항목에 꼭 사용하세요.

Anglar 전용 라이브러리


ngneat/reactive-forms


ngneat/reactive-forms: (Angular Reactive) Forms with Benefits 😉
Anglar의 Reactive Forms와 거의 호환성을 유지하며 부족한 유형 검사를 지원하는 라이브러리입니다.
공식 로드맵에 Anglar Forms의 엄격한 모델이 계획돼 있지만 당장 Production ready의 징후가 나타나지 않아 적어도 2021년 전반기에는 제3자에 의존하는 것은 문제가 없다.
개발자가 @angular/forms를 사용하여 엄격한 타자-Anglar 개발 노선도를 실현
이외에도 모델이 지원하는 Anglar용 폼 라이브러리가 몇 개 있지만, ngneat/reactive forms는 공식 Reactive Forms와의 API 호환성을 중시하기 때문에 쉽게 벗겨지는 곳에 넣기 쉽다고 평가했다.
공식적인 형식이 오면 환승도 어렵지 않겠죠.

ngx-formly


ngx-formly/ngx-formly: JSON powered / Dynamic forms for Angular
다음은 폼 시스템입니다. 이것은 JSON 대상에서 폼을 동적으로 구축하기 위한 프로그램 라이브러리입니다.
여기도 비슷한 게 몇 개 있어요. Anglar GDE도 개발팀에 있어요. 제일 잘하고 유지보수도 활발해요. 마치 ngx-formly인 것 같아요.
생성된 양식의 객체가 공식적인 Reactive Forms이기 때문에 기존 코드와도 잘 활용할 수 있습니다.

rx-angular


rx-angular/rx-angular: Reactive Extensions for Angular
이분은 신예 최근 화제가 된 nx-angular입니다.
'Reactive Extensions for Anglar'는'NgRx'가 아니냐며 NgRx보다 더 날카롭게 Anglar의 능동 프로그래밍을 추진하는 프로젝트라고 토로하고 싶다.
rx-angular 프로젝트에서 실험으로 검증된 것도 NgRx로 환원하겠죠.
현재 rx-angular의 메인 눈은 존이다.Anglar가 js 없이 더욱 활발하게 활동할 수 있도록 하기 위한 실행 기반입니다.
공식 로드맵에도 존리스의 지원이 있어 먼저 사용을 고려할 수 있다.

swimlane/ngx-charts


swimlane/ngx-charts: Declarative Charting Framework for Angular
D3.js의 SVG 기반 차트 라이브러리를 사용했습니다.타사의 다이어그램 라이브러리는 랩으로 싸여 있는 것이 아니라 SVG의 Anglar 구성 요소 그룹을 직접 조작한다.
추상화층이 없기 때문에 다른 제3자 어댑터계의 도표 라이브러리보다 성능이 좋다.
gneat팀과 마찬가지로 요즘 스웨일랜드 도서관에 괜찮은 물건이 많아요.역시 우리 제품이 사용하는 OSS화는 어느 정도 품질을 보증한다.

ngneat/hotkeys


ngneat/hotkeys: 🤖 A declarative library for handling hotkeys in Angular applications
두 번째.이것은 자신이 설치한 매우 번거로운 핫키를 쉽게 실현할 수 있는 프로그램 라이브러리다.
정말gneat팀에서 간지러운 데까지 갈 수 있는 프로그램 라이브러리를 만들었어요.

angular-split


angular-split/angular-split: 🍌 Angular UI library to split views and allow dragging to resize areas using CSS flexbox layout.
이것은 끌어서 너비의 분할 뷰를 조정할 수 있는 UI 구성 요소 라이브러리입니다.
이것도 직접 실시하면 번거롭지만 통용성이 높아 채택되기 쉽다.

ng-mocks


ike18t/ng-mocks: Angular 5+ component, directive, and pipe mocking library
이것은 Anglar 테스트에서 모듈 객체를 만드는 데 도움을 주는 프로그램 라이브러리입니다.
어셈블리, 카탈로그, 파이핑 등의 API와 함께 사용하면 모델을 만드는 시간을 크게 줄일 수 있습니다.
기존 TestBed를 사용하는 테스트 코드는 변경이 거의 필요 없고 beforeEach 등 설치 부분에만 적용될 수 있습니다.
ngneat도 편리한 테스트용 라이브러리spectator를 내놓았지만 일반 Anglar의 테스트 코드와는 거리가 멀어 가져오기 쉽다는 점에서 ng-mocks에 군수가 있겠지.

ngneat/inspector


ngneat/inspector: 🕵️ An angular library that lets you inspect and change Angular component properties
신간선에서 시작된 세 번째.이것은 프로그램 라이브러리입니다. Anglar의 디버그 도구입니다.
읽은 후 애플리케이션을 시작하면 디버깅용 UI가 화면에 표시되어 화면 내 구성 요소의 상태를 확인하고 업데이트할 수 있습니다.
브라우저의 확장 기능이 필요하지 않기 때문에 누구나 바로 사용할 수 있고 어느 브라우저든지 사용할 수 있다.
본격적인 DevTools도 개발 중인데 특히 크롬 이외에 디버깅을 하고 싶을 때 유용하잖아요.

범용 라이브러리


ts-snippet


cartant/ts-snippet: A TypeScript snippet compiler for any test framework
TypeScript 유형에 대한 테스트를 쉽게 작성할 수 있는 라이브러리
기본적으로 테스트 코드도 유형을 검사하기 때문에'컴파일 오류'를 테스트하는 것은 매우 번거롭다.
혹은 테스트형 추론의 결과를 원할 때ts-snippet도 편리하다.예를 들면 다음과 같은 시험을 쓸 수 있다.
    expectSnippet(`
      import * as Rx from "rxjs";
      const source = Rx.Observable.of(1);
    `).toInfer("source", "Observable<number>");
응용 프로그램이라기보다는 라이브러리 작성자를 대상으로 한다.Anglar의 라이브러리는 모두 Type Script의 라이브러리로 유형에 대한 테스트를 쓰고 싶을 때 추천합니다.

msw


mswjs/msw: Seamless REST/GraphQL API mocking library for browser and Node.
최근 화제가 된 Mock Service Worker입니다.
모크 HTTP 요청에 대한 응답 방법으로 일반적인 Anglar 응용 프로그램은 처음에 Http Client처럼 서비스를 실시하지 않았고 Http Interceptor를 사용하거나 InMemory Web Api를 사용했다.
msw는 Service Worker에서 HTTP 요청을 수락하여 응답에 응답하는 방법입니다.
이 장점은 응용 프로그램과 브라우저 사이에서 정식으로 사용하는 것과 같이 HTTP 요청을 보내면 HTTP 응답도 브라우저를 통해 잘 되돌아온다는 것이다.mock을 꺼낼 때 응용 프로그램은 거의 변경되지 않았다.
테스트할 때 msw로 대체HttpClientTestingModule해도 효과가 있다.
Using MSW (Mock Service Worker) in an Angular project - Tim Deschryver

Redux Toolkit


reduxjs/redux-toolkit: The official, opinionated, batteries-included toolset for efficient Redux development
마지막으로 레드ux의 공식 등판, 레드ux 툴킷.
React 생태계에서 레드ux가 사용하는 인상이 강하고, 실제로는 NgRx와 레드ux Toolkit을 동시에 사용할 수 있다고 생각한다.
특히 상시 사용forFeature() 항목 중 레드ux 툴키트와 조합해 여분의 보일러 보드 코드를 대폭 줄일 수 있다.
자세한 내용은 며칠 전에 쓴 이 글을 보십시오.

끝맺다


개인적인 느낌이지만 최근 앙글라 커뮤니티 전체의 분위기로서 너무 공식에 의존하는 것 같아요.
물론 공식 지원이 늘면서 안심하고 쉽게 개발할 수 있었지만, 구글의 품질을 제공하기 위해 Anglar팀은 사전 조사, 검증, 디자인 등에 비용을 들였다.
한꺼번에 만들어도 반대로 안젤라의 가치를 훼손할 수도 있다.
상대적으로 새로운 구상과 혁신을 일으키는 능력은 사회단체의 지지를 받아야 한다고 생각한다.
지역사회에서 태어나 성장하는 실천이 1급 지원으로 정식으로 업그레이드됐다.이런 생태계의 순환을 촉진하기 위해 선진적인 제3자 프로그램 라이브러리가 지원해야 하지 않겠는가.
응원이란 쓸 수 있으면 홍보하는 것이다.사용하기 어려우면 피드백을 하세요.간호를 할 수 있다면 좋겠어요.
나는 Ivy가 방출하는 각종 가능성이 제3자의 발전을 가속화시킬 것이라고 생각한다.
인기 있는 제3자 프로그램 라이브러리를 찾으셨다면 SNS, 블로그, 커뮤니티 채팅 등에서 꼭 소개해 주세요.
2021년도 커뮤니티 앙글라 분위기 띄워주세요!

좋은 웹페이지 즐겨찾기