신호 주위의 과대 광고 – Smashing Magazine - 최신 기술 뉴스 정보 모두

오늘날 우리가“신호”라고 부르는 것에 대한 토대는 1970 년대 초반에 날짜입니다. 이 작품을 바탕으로, 그들은 다른 컴퓨터 과학 분야에서 인기를 얻었으며, 90 년대와 2000 년대 초반에 더 구체적으로 정의했습니다.

웹 개발에서 그들은 먼저 Knockoutjs와 함께 그것을 위해 달렸고 얼마 지나지 않아 신호는 우리의 뇌에서 뒷좌석을 가져갔습니다. 몇 년 전, 여러 개의 유사한 구현이 생겼습니다.

이름과 구현 세부 사항이 다르면, 이러한 접근 방식은 오늘날 우리가 알고있는 범주로 싸일 정도로 유사합니다. 세밀한 반응성“Fine”X “Coarse”업데이트 수준이 다른 경우에도 이것이 곧 의미하는 바에 더 많은 정보를 얻을 수 있습니다.

역사를 요약합니다: 오래된 기술이라도 신호는 당시 UI의 상호 작용과 데이터에 대해 어떻게 생각했는지에 대한 혁명을 시작했습니다. 그리고 그 이후로 모든 UI 라이브러리 (Solidjs, Marko, Vue.js, Qwik, Angular, Svelte, Wiz, Preact 등)는 이들의 구현을 채택했습니다 (React 제외).

일반적으로 a 신호 액세서 (Getter)와 세터로 구성됩니다. 세터는 신호가 보유한 값에 대한 업데이트를 설정하고 모든 종속 효과를 트리거합니다. 액세서가 소스에서 값을 끌어 내고 상류로 변경 될 때마다 효과에 의해 실행되는 동안.

const [signal, setSignal] = createSignal("initial value");

setSignal("new value");

console.log(signal()); // "new value"

그 이유를 이해하려면 API 아키텍처 그리고 세밀한 반응성 실제로 의미합니다.

API 아키텍처

데이터를 처리하는 방법에 따라 시스템을 정의하는 두 가지 기본 방법이 있습니다. 이러한 각 접근 방식에는 장단점이 있습니다.

당기다: 소비자는 업데이트 소스를 핑합니다.
푸시: 소스는 사용 가능한 즉시 업데이트를 보냅니다.

당기다 시스템은 폴링 또는 데이터를 최신 상태로 유지하는 다른 방법을 처리해야합니다. 또한 새로운 데이터가 도착하면 피하기 위해 데이터의 모든 소비자가 찢어지고 재현되도록 보장해야합니다. 상태 찢어짐.

상태 찢어짐 동일한 UI의 다른 부분이 상태의 다른 단계에있을 때 발생합니다. 예를 들어, 헤더에 8 개의 게시물이 사용 가능한 게시물이 표시되지만 목록에는 10이 있습니다.

푸시 시스템은 데이터를 최신 상태로 유지하는 것에 대해 걱정할 필요가 없습니다. 그럼에도 불구하고 소스는 소비자가 업데이트를받을 준비가되었는지 알지 못합니다. 이로 인해 발생할 수 있습니다 배압. 데이터 소스는 소비자가 처리 할 수있는 것보다 짧은 시간 내에 너무 많은 업데이트를 보낼 수 있습니다. 수신기에 대해 업데이트 플럭스가 너무 강한 경우 데이터 패키지 손실을 유발할 수 있습니다. 상태 찢어짐 다시 한 번) 그리고 더 심각한 경우에도 고객을 충돌시킵니다.

~ 안에 당기다 시스템, 허용되는 트레이드 오프는 데이터가 사용중인 위치를 알지 못한다는 것입니다. 이로 인해 수신 종료는 모든 구성 요소를 최신 상태로 유지하는 데 대한 예방 조치를 만듭니다. 이것이 바로 REACT와 같은 시스템이 업데이트 및 조정에 대한 분해/재 렌더 메커니즘으로 작동하는 방식입니다.

~ 안에 푸시 시스템에서 허용되는 트레이드 오프는 수신 종료가 동기화 된 상태에서 모든 소비 노드를 유지하면서 충돌하지 않는 방식으로 업데이트 스트림을 처리 할 수 있어야한다는 것입니다. 웹 개발에서 RXJ는 푸시 시스템의 가장 인기있는 예입니다.

세심한 독자는 각 시스템의 트레이드 오프가 스펙트럼의 반대쪽 끝에 있음을 알 수 있습니다. 풀 시스템은 업데이트를 효율적으로 예약하는 데 능숙하지만 푸시 아키텍처에서는 데이터가 사용되는 위치를 알고 있습니다.보다 세분화 된 제어가 가능합니다. 그것이 좋은 기회를 만드는 것입니다 잡종 모델.

푸시 풀 아키텍처

Push-Pull Systems에는 상태에 가입자 목록이있어 업데이트가 있으면 데이터를 다시 가져 오기 위해 트리거 할 수 있습니다. 기존의 푸시와 다른 방식은 업데이트 자체가 가입자에게 전송되지 않는다는 것입니다.

가입자가 현재 상태가 오래되었다는 사실을 알게되면 적절한 시간에 새 데이터를 가져와 모든 종류의 배압을 피하고 풀 메커니즘과 유사하게 행동합니다. 차이점은 이것이 가입자가 새로운 데이터를 가져올 것이라고 확신 할 때만 발생한다는 것입니다.

우리는이 데이터를 호출합니다 신호그리고 그 가입자가 업데이트하도록 트리거되는 방식은 호출됩니다. 효과. 혼동하지 마십시오 useEffect완전히 다른 이름에 대한 비슷한 이름입니다.

세밀한 반응성

데이터 소스와 데이터 소비자 사이의 양방향 상호 작용을 설정하면 반응 시스템이 있습니다.

에이 반응 시스템 데이터가 소비자에게 변경된 것을 알릴 수있는 경우에만 존재하며 소비자는 이러한 변경 사항을 적용 할 수 있습니다.

이제 만들기 위해 세분화 된 충족해야 할 두 가지 기본 요구 사항이 있습니다.

능률: 시스템은 필요한 최소 계산량 만 실행합니다.
결함이 없습니다: 주를 업데이트하는 과정에서는 중개 국가가 표시되지 않습니다.

UI의 효율성

신호가 높은 수준의 효율성을 달성 할 수있는 방법을 실제로 이해하려면 액세서. 넓은 스트로크에서는 getter 기능으로 행동합니다. 액세서가 있다는 것은 구성 요소의 경계 내에 값이 존재하지 않음을 의미합니다. 템플릿이받는 것은 해당 값에 대한 게터이며, 효과가 실행될 때마다 최신의 새로운 가치를 가져올 것입니다. 이것이 신호가 단순한 변수가 아닌 함수 인 이유입니다. 예를 들어, 견고하게 :

import { createSignal } from 'solid-js'

function ReactiveComponent() {
  const [signal, setSignal] = createSignal()
  
  return (
    
  )
}

위의 스 니펫의 성능 (및 효율성)과 관련된 부분은 고려하는 것입니다. signal() getter입니다. 전체를 다시 실행할 필요는 없습니다. ReactiveComponent() 렌더링 된 아티팩트를 업데이트하는 기능; 신호 만 다시 실행되므로 추가 계산이 실행되지 않도록 보장합니다.

결함이없는 UI

비 반응 시스템은 분해/재 렌더 메커니즘을 통해 중개 상태를 피합니다. 그들은 아마도 오래된 데이터로 유물을 버리고 처음부터 모든 것을 재현합니다. 그것은 잘 작동하고 일관되게 작동하지만 효율성을 희생합니다.

반응 시스템 이이 문제를 어떻게 처리하는지 이해하려면 다이아몬드 도전. 이것은 설명하기위한 빠른 문제이지만 해결하기 어려운 문제입니다. 아래 다이어그램을 살펴보십시오.

주의를 기울이십시오 E 마디. 그것은에 달려 있습니다 D 그리고 B그러나만 D 의존합니다 C.

반응 시스템이 업데이트하기가 너무 열심 인 경우 업데이트를받을 수 있습니다. B ~하는 동안 D 여전히 부실합니다. 그로 인해 발생할 것입니다 E 존재하지 않아야 할 중개 상태를 보여줍니다.

쉽고 직관적입니다 A 새로운 데이터가 도착하자마자 어린이가 업데이트를 시작하고 캐스케이드를 실망시킵니다. 그러나 이런 일이 발생하면 E 데이터를 수신합니다 B ~하는 동안 D 부실합니다. 만약에 B 업데이트를 트리거 할 수 있습니다 E,,, E 중간 상태가 표시됩니다.

각 구현은이 과제를 해결하기 위해 다른 업데이트 전략을 채택합니다. 두 가지 범주로 그룹화 할 수 있습니다.

게으른 신호
여기서 스케줄러가 업데이트가 발생하는 순서를 정의합니다. (A그 다음에 B 그리고 C그 다음에 D그리고 마지막으로 E).
열망하는 신호
신호가 부모가 있는지 알고있는 경우 탁한,,, 확인또는 깨끗한. 이 접근법에서 언제 E 업데이트를받습니다 B확인/업데이트가 트리거됩니다 D다시 돌아올 수있을 때까지 올라갑니다. 깨끗한 상태, 허용 E 마지막으로 업데이트하려면.

우리 UI로 돌아갑니다

이 후에 세밀한 반응성 이제 한 걸음 물러서서 웹 사이트와 앱을 볼 차례입니다. 그것이 우리의 일상의 일에 어떤 의미가 있는지 분석합시다.

DX 및 UX

우리가 쓴 코드가 추론하기 쉬운 경우, 우리는 실제로 중요한 것, 즉 사용자에게 제공하는 기능에 초점을 맞출 수 있습니다. 당연히, 작동에 적은 작업이 필요한 도구는 장인의 유지 보수와 오버 헤드가 적습니다.

기본적으로 결함이없고 효율적인 시스템은 개발자가 구축 할 때 개발자의 방식에서 벗어날 수 있습니다. 또한 더 얇은 추상화 층을 통해 플랫폼에 대한 더 높은 연결을 시행 할 것입니다.

개발자 경험과 관련하여 알려진 영토에 대해 말할 내용도 있습니다. 사람들은 익숙한 정신 모델과 패러다임 내에서 더 생산적입니다. 당연히, 더 오랫동안 주변에 있었고 많은 양의 도전 과제를 해결 한 솔루션은 작업하기가 더 쉽지만 혁신과 상충됩니다. JSX가 와서 명령형 DOM 업데이트를 jQuery로 대체했을 때인지 운동이었습니다. 마찬가지로, 렌더링을 처리하는 새로운 패러다임은 일반화 될 때까지 비슷한 불편 함을 유발할 것입니다.