이 모든 게 어디서 시작됐는지

대부분의 웹 응용 프로그램은 HTTP API와 상호작용을 통해 그 가치를 실현한다.
이것은 보통 HTTP 클라이언트를 사용하여 완성한 것이다. 예를 들어 본기fetch 함수Axios나 Angular's HttpClient 이다.
웹 응용 프로그램에서 HTTP 클라이언트를 설정하면 사용자 체험 (예를 들어 미결 요청 지시기), 성능 (캐시), 탄력성 (자동 재시도), 안전성 (예를 들어 신분 검증) 등 다양한 테마를 처리할 수 있는 기능을 조만간 확장해야 합니다.다행히도 대부분의 HTTP 클라이언트는 차단기를 사용하여 쉽게 확장할 수 있기 때문에 포장하거나 자신의 클라이언트를 실현할 필요가 없습니다.
비록 차단기를 실현하는 것은 매우 빠르고 쉽게 들리지만, 가장자리 사례, 테스트, 유지 보수를 처리하는 것은 매우 비싸게 들릴 수 있다.만약 누군가가 우리를 도와 이 문제들을 처리할 수 있다면 더욱 좋지 않겠습니까?
그때 나와 나의 친구는 다음과 같은 사실을 알아차렸다.

대부분의 응용 프로그램, 저희 응용 프로그램, 저희 고객의 응용 프로그램(즉 HTTP 회사가 아닌 응용 프로그램)과 귀하의 응용 프로그램은 같은 차단기가 필요합니다

만약에 다른 개념에 익숙하지 않다면 일부 HTTP 클라이언트에서 차단기를 실현하는 것은 매우 까다로울 수 있다

강좌나 우리 고객의 코드 라이브러리에서 관찰한 실현은 오류나 누락되기 쉬운 몇 가지 중요한 변두리 상황

일생 동안 여러 차례 같은 차단기를 실현하는 것은 지루한 시간 낭비이다.

내가 기억하는 다음 일은 우리가 Convoyr라는 개원고를 발기하기로 결정한 것이다.

💡 코바르의 배후 생각

Convalyr는 현재 AngularHttpClient의 플러그인을 확장하는 데 전념하고 있지만, 프레임워크와 무관한 모듈화된 플러그인 집합으로 설계되었다.
우리는 Convalyr를 인프라와 무관한 웹 응용 프로그램과 자바스크립트 서비스 격자로 보는 것을 좋아한다.우리가 아직 그곳에 도착하지 않았어도.

🐢 네트워크 지연 성능 문제

오늘 이 블로그에서는 성능 주제와 Convalyr를 사용하여 네트워크 지연 문제를 해결하는 방법에 대해 중점적으로 다루겠습니다.
대부분의 경우 사용자가 같은 웹 응용 프로그램에서 한 노선에서 다른 노선으로 내비게이션을 할 때, 우리가 결과를 즉시 표시하지 못하게 하는 주요 원인은 특정한 원격 서비스에서 데이터를 얻는 것과 관련된 네트워크 지연 때문이다.
특히 우리가 몇 분 전에 얻은 데이터를 다시 가져올 때, 이 데이터는 그 이후로 변하지 않을 수도 있다.우리는 최종적으로 사용자로 하여금 이전에 받은 결과와 같은 결과가 최종적으로 나타날 때까지 기다리게 했다.
하나의 제품 목록에서 사용자가 '목록으로 돌아가기' 단추를 누르기 전에 특정 제품을 눌러서 상세한 정보를 볼 수 있다고 상상해 보세요.제품 재추출로 인한 지연으로 마찰이 발생할 수 있습니다.

🚒 구원하다

우리가 생각할 수 있는 첫 번째 해결 방안은 캐시다.우리는 자신의 캐시 시스템을 실현하거나, 브라우저가 RFC7234 설명한 대로 HTTP 캐시를 처리할 수 있도록 정확한 응답 헤더만 설정할 수 있다.
그 다음 방법은 일반적으로 가장 적합하다. 왜냐하면 그것은 표준적이고 통용적이며 효율적이고 확장 가능하며 공유 가능하며 설정하기 쉽고 유지 보수 원가가 저렴하기 때문이다.

🍺 신선도 문제

HTTP 캐시는 상대적으로 설정하기 쉽지만, 새로운 대가가 있다.
사실상 캐시 응답을 위해 서버는 클라이언트에게 캐시 시간이 얼마나 되는지 알려주거나, 다시 말하면, 캐시 응답이 새로운 시간으로 여겨져야 한다.
신선기를 선택하는 것은 도전적인 결정일 수도 있다.
너무 낮으면 캐시가 잘못될 수 있습니다.너무 높으면 웹 응용 프로그램은 캐시에서 되돌아오는 '만료' 데이터를 사용합니다.

🤔 왜 선택을 해야 하는지

소프트웨어 개발은 모두 균형에 관한 것이지만, 만약 우리가 이것을 뛰어넘을 수 있다면?
만약 우리가 네트워크에서 최신 데이터를 얻는 동시에 캐시에 있는 최신 데이터를 사용할 수 있다면 좋지 않겠습니까?
우리는 이러한 행위를 실현하는 많은 방법을 상상할 수 있지만, 개발자의 체험에 주목하고, 응용 프로그램의 모든 HTTP 호출을 변경할 필요가 없는 상황에서 전 세계에서 일하는 방법을 찾을 수 있다.

관찰과 약속

Angular'sHTTPClient는 본 컴퓨터fetch 함수와 Axios와 상반된 약속이 아니라 관측 가능한 값을 되돌려주는 특수성을 가지고 있다.
HTTP 호출을 게으르고 취소하기 쉽다는 등 다른 장점에서 observables는 여러 개의 값을 낼 수 있다는 추가 장점도 제공했다.

✌️ 캐시 및 네트워크 해제

우리는 여러 개의 관측 가능한 값을 발사할 수 있기 때문에 먼저 캐시(사용 가능한)에서 데이터를 발사한 다음에 네트워크에서 데이터를 발사할까요?

이것은 우리의 각도 구성 요소에서 다음 코드를 지정하면 어떤 내용도 변경할 필요가 없다는 것을 의미한다. 캐시 결과를 먼저 표시하고 네트워크에서 온 최신 결과를 사용하여 새로 고칠 것이다.

@Component({
  template: `{{ weather | json }}`
})
export class WeatherComponent {
  weather: Weather;

  ...() {
    this.http.get<Weather>('/weather/lyon')
      .subscribe(weather => this.weather = weather);
  }

}

또는 보다 수동적인 방법:

@Component({
  template: `{{ weather$ | async | json }}`
})
export class WeatherComponent {
  weather$ = this.http.get<Weather>('/weather/lyon');
}

Coverayr 캐시 플러그인

Convalyr는 캐시 플러그인@convoyr/plugin-cache을 제공합니다. 이 플러그인은 먼저 캐시(사용 가능한 경우)에서 데이터를 보내고 네트워크(위에서 설명한 바와 같이)에서 데이터를 보내서 HTTP 클라이언트의 행동을 확장합니다.

설치 프로그램

Coverayr의 캐시 플러그 인을 설정하려면 2단계가 필요합니다.

Convalyr 및 플러그인을 설치합니다.

npm install @convoyr/core @convoyr/angular @convoyr/plugin-cache

AppModule에서 캐시 플러그 인을 설정합니다.

import { ConvoyrModule } from '@convoyr/angular';
import { createCachePlugin } from '@convoyr/plugin-cache';

@NgModule({
  imports: [
    ...
    HttpClientModule,
    ConvoyrModule.forRoot({
      plugins: [createCachePlugin()],
    }),
  ],
  ...
})
export class AppModule {}

데이터가 캐시에서 왔는지 어떻게 알 수 있습니까

데이터가 캐시에서 왔거나 네트워크에서 왔을 때, 다른 방식으로 데이터를 표시하기를 원할 수도 있습니다.addCacheMetadata를 true로 설정하면 Convalyr의 캐시 플러그인은 응답에 대한 메타데이터를 제공할 수 있습니다.

createCachePlugin({
  addCacheMetadata: true
})

그러나 응답 유형이 바뀌기 때문에 조심해야 한다.
코드는 다음과 같습니다.

http.get('/weather/lyon')
  .subscribe(data => console.log(data));

... 다음 데이터가 기록됩니다.

{
  data: {
    temperature: ...,
    ...
  },
  cacheMetadata: {
    createdAt: '2020-01-01T00:00:00.000Z',
    isFromCache: true
  }
}

Coverayr 캐시 플러그 인은 점진적

addCacheMetadata 재미있을 수도 있지만 응답 유형이 바뀌었기 때문에 침입성이 있다.
일부 응용 프로그램에서 전역적으로 사용하면 좋은 재구성이 필요할 수도 있습니다.
번거로움을 피하고 이 옵션을 점차적으로 사용하기 위해서 캐시 플러그인은 shouldHandleRequest 옵션을 사용하여 서로 다른 요청 그룹에서 다른 설정을 활성화할 수 있습니다.

import { and, matchOrigin, matchPath } from '@convoyr/core';

createCachePlugin({
  shouldHandleRequest: and(
    matchOrigin('marmicode.io'),
    matchPath('/weather')
  )
})

보관부

기본적으로 캐시 플러그인은 최근에 사용한 100개의 요청을 메모리에 저장합니다.
사용자 고유의 스토리지를 제공하거나 MemoryStorage 옵션을 사용하여 사용자가 선택한 크기 인스턴스maxSize로 비헤이비어를 덮어쓸 수 있습니다.

createCachePlugin({
  storage: new MemoryStorage({ maxSize: 2000 }), // 2000 requests
})

또는

createCachePlugin({
  storage: new MemoryStorage({ maxSize: '2 mb' }), // 2MB
})

🚀 출시 예정 기능

이것은 단지 시작일 뿐이고 더 많은 일을 해야 하니 계속 주목해 주십시오.
다음은 곧 출시될 기능 목록입니다.

ReSTful API(예를 들어 /items를 처리하려면 /items/:itemId를 채워야 한다. 그러면 우리는 상세한 보기에 목록 보기의 일부 데이터를 즉시 표시할 수 있다)

IndexedDB를 스토리지로 사용합니다.

🔌 기타 플러그인

@convoyr/plugin-auth 인증을 쉽고 안전하게 처리합니다.
@convoyr/plugin-retry 예비(fallback) 처리(오류 발생 시 재시도).

📝 코발에 관한 다른 글

Introducing Convoyr

Plugin Testing in Convoyr