많은 응용 프로그램과 달리, '확장 가능' 응용 프로그램은 '플러그인' 이라고 불리는 독립된 코드 패키지를 통해 확장할 수 있다.
이런 응용 프로그램들은 디자인에 있어서 왕왕 모듈화되어 관리하기 쉽고 느슨하게 결합된 코드를 만들어 낸다.
오늘 우리는 확장 가능한 응용 프로그램을 구축하는 방법을 배울 것이다.

소개하다.

매일 확장 가능한 애플리케이션을 사용할 수 있습니다.

가장 좋아하는 개발 도구는 확장 가능할 수도 있습니다.

문제는 문제가 너무 많다는 것이다.

With Plugins, you don’t need to solve every problem. Users solve their own problems.

플러그인이 있으면 기능 논리가 전체 코드 라이브러리에 분산되지 않고 집중될 수 있다.이것은 모듈화, 느슨한 결합의 특성을 초래했다.
응용 프로그램 전체를 플러그인 트리로 구축할 때, 이 장점들은 코드 라이브러리 전체로 확장됩니다.결국, 이것은 당신, 당신의 팀과 당신의 고객에게 이익을 가져다 줄 것이다.

확장 불가능한 시스템 구축

네가 라이니라는 오리라고 상상해 봐(🦆), 너는 삐걱거리는 것을 좋아한다.랑니를 제외하고 너의 대다수 친구들도 삐걱삐걱 소리를 좋아한다.🍗).
어쨌든...너는 공원에 살고 있는데, 사람들은 너에게 음식을 던지는 것을 좋아한다.
어느 날, 당신은 자신이 매우 뚱뚱해졌다는 것을 발견했습니다.따라서 사용자는 웹 서비스를 구축하여 사용자의 소비를 추적할 수 있습니다.

//  food-service.ts

//  Log of Foods Eaten
//  Example:  [{ name: "lenny", food: "waffle", calories: 5 }]
const foods = [];

//  Function to Log a Food (by Duck Name)
const logFood = (name: string, food: string, calories: number, ...props: any) => {
  foods.push({ name, food, calories, ...props });
}

//  Function to Get Log (by Duck Name)
const getLog = (name: string) => {
  return foods.filter(food => food.name === name);
} 

//  JS Module Exports
export logFood, getLog;

축하합니다. 추적 기능이 3온스를 줄일 수 있습니다!
다행이다. 그런데 너의 친구 마이크(🐦) 그는 자제력이 없다.그래서 그는 인간에게 하루 300칼로리의 제한을 초과할 때 호각으로 위협하라고 한다.
그리고 너의 친구 잭(🐤) 단백질도 추적할 수 있는지 물어봐.그는 이미 매우 건강해졌기 때문에, 그가 더 관심을 가지는 것은 다이어트가 아니라 건강을 유지하는 것이다.
네가 깨닫기 전에, 에비(🦀), 타비(🐢) 더그네(🐠) 그들은 기능을 제공할 것을 요구한다.심지어 래리(🐊) 뭘 드시겠어요? 랑니를 드신 게 확실해요(🍗)!
연못 전체가 당신에게 떨어졌고, 밀린 일들이 꽉 찼습니다. 지금 이 프로그램은 너무 복잡해서, '과거의 아름다운 시간' 을 이야기하는 고객을 잃었습니다. 그 당시에는 모든 것이 간단했습니다.

그리고 깨어나면..."괜찮아, 자기야?"당신 아내 클라라가(🦆) 그녀는 비틀거리며 빵 부스러기 한 바구니를 들고 들어왔다.
"나 또 악몽 꿨어..."너는 초조한 말투로 대답해라.
"바보 거위."라고 클라라가 웃으며 말했다.

The pain of feature creep, non-modular code, and tightly coupled functionality can be largely avoided with plugin-oriented design (POD).

고개를 들어 그녀의 눈빛을 보며 말했다. "자기야, 네 말이 맞아. 플러그인 디자인에 대한 기본 지식을 되돌아보자. 그러면 우리는 영원히 잊지 않을 거야."
클라라는 열정적으로 포옹을 하고 대답했다. "나는 우리의 일요일을 보낼 더 좋은 방법이 생각나지 않는다."

확장 가능한 시스템 구축

A fundamental characteristic of plugin-oriented design is the ability to alter functionality without altering the existing system definition.

따라서 당신의 식당 서비스를'확장할 수 있도록'두 가지를 하기로 했습니다.

등록: 사용자가 사용자 정의 함수를 등록할 수 있습니다.

호출: 조건이 충족되었을 때 등록된 함수를 실행합니다.

그것만 있으면 다른 개발자들은 기능을 응용 프로그램에 주입할 수 있다.
이 등록점들은 Hooks이라고 불린다.
우리는 어디서나 이런 패턴을 볼 수 있다.

Wordpress: "Filters" 및 "Actions (gasp it's just another Filter)"

바벨: Visitor Plugin Function

웹 패키지: Tapable

I recommend taking a look at tapable. This is the small module underlying every Webpack Plugin.

다음은 업데이트된 사용 연결된 음식 서비스 코드입니다.

//  extensible-food-service.ts

//
//  Define the Hook
//

type LogFoodFunction = (name: string, food: string, calories: string, ...props: any) => void;

//  List of Functions Registered to this "Hook"
const functions: LogFoodFunction[] = [];

//  Add a Function to the Hook
const addFunction = (func: LogFoodFunction) => {
  functions.push(func);
}

//
//  Build the Food Service
//

//  List of Foods Eaten
//  Example:  [{ name: "lenny", food: "bread", calories: 5 }]
const foods = [];

//  Add the Core Function
addFunction((name, food, calories) => {
  foods.push({ name, food, calories });
});

//  Function to Log a Food (by Duck Name)
const logFood = (name: string, food: string, calories: number, ...props: any) => {
  //  Trigger Functions in the Register
  functions.forEach(func => func(name, food, calories, ...props));
}

//  Function to Get Log (by Duck Name)
const getLog = (name: string) => {
  return foods.filter(food => food.name === name);
} 

//  JS Module Exports
export logFood, getLog, addFunction;

현재 누구나 호출addFunction을 통해 이 JS 모듈을 확장할 수 있다.
이거 마이크 거(🐦) 스피커로 사람을 위협하는 플러그인:

//  macks-plugin.ts
import * as FoodService from "extensible-food-service";
import * as Horn from 'horn-service';

//  Set Calorie Limit
const calorieLimit = 300;

FoodService.addFunction(() => {

  //  Get Total Calories
  const eatenCalories = FoodService.getLog("mack").reduce((prev, entry) => prev + entry.calories);

  //  Check Condition
  if (eatenCalories > calorieLimit) { Horn.blow() }
})

현재, 당신이 해야 할 일은 맥크의 플러그인을 가져오는 것입니다. 이 기능은 통합될 것입니다.
그러나'연결'을 가진 시스템을 구축하는 것은'POD'원칙을 실현하는 방법일 뿐이다.

갈고리 대체품

갈고리(그리고 그 변체)는 상당히 흔하다.간단하기 때문일 수도 있다.
코드를 등록하는 방법을 구축하고 조건이 충족될 때 코드를 호출합니다.
그러나 확장 가능한 시스템을 구축하는 유일한 방법은 아니다.

본원역

위의 코드에서 우리는 갈고리로'primitive'코드를 등록했다.기본적으로 원시 코드는 의도적인 인코딩일 뿐이다.이 예에서는 JS가 실행될 때 디코딩됩니다.

응용 분야

그러나 의도는 다른 방식으로 인코딩할 수도 있다.예를 들어, 너는 자신의 언어를 세울 수 있다.이것은 복잡하게 들리지만, 이것이 바로 클래스를 정의하거나 API를 구축할 때 해야 할 일이다.그리고 응용 프로그램 논리는 이 영역의 실체를 관리하고 디코딩하는 것을 책임진다.

외지

어떤 경우, 전체 과정을 외부화하기를 원할 수도 있습니다.예를 들어 Webhooks, WebSocket, IFTTT, Zapier, 단축키 등 도구를 사용하여 외부 코드를 터치할 수 있다.
이 골드 원칙을 실천하는 것이 도움이 된다는 것을 명심하라.

Keep it simple.

a.k.a. 합리적인 수요를 초과하는 일을 하지 마라
이것은 당신, 당신의 팀, 당신의 기능, 모듈, 응용 프로그램이 당신과 접촉하는 모든 것에 적용됩니다.만약 일이 너무 복잡하다면 그것을 분해해 보아라.필요에 따라 재구성, 재작업과 기본화를 진행한다.
플러그인을 위한 디자인 (POD) 은 특히 논리가 복잡해지는 상황에서 이 목표를 실현하는 데 도움을 줄 수 있다.모든 특성을 하나의 플러그인으로 모델링함으로써 복잡성은 필요할 때만 나타나고 예측 가능한 모듈화 용기에서 나온다.

갈고리 문제

우리가 위에서 구축한 갈고리 실현에는 몇 가지 문제가 있다.

중심성: 플러그인을 불러오는 것을 책임집니다.

신뢰: 당신은 코드를 심사하는 것을 책임집니다.

충돌: 사용자가 기능 집합에 대해 다른 의견을 가지고 있을 수 있습니다.

의존 관계: 복잡한 의존 관계에 대한 관리 시스템이 없다.

더 많이

다양한 정책을 사용하여 이러한 문제를 해결할 수 있습니다.

외부 플러그인: URL과 같은 외부 리소스에서 코드를 동적으로 주입합니다.

상하문 활성화: 현재 상하문(로그인 사용자, 응용 프로그램 상태 등)에 따라 동적 활성화 기능

플러그인 관리자: 복잡한 의존 관계 네트워크에서도 조정 기능이 확장됩니다.

더 많이: 더 많이.

나는 이후의 글에서 '외부 플러그인', '상하문 활성화' 와 관련 주제를 소개하고 싶다.
"플러그인 관리자"및 새로운 도구인 "Halia"가 확장 가능한 JS/TS 시스템을 구축하는 데 어떻게 도움을 주는지 알아보려면 블로그를 참조하십시오.

결론

여기서 토론하는 개념은 단지 시작일 뿐이다.우리는 벌레 한 통을 열었지만, 지금은 벌레를 다시 항아리에 넣으라고 한다.우리는 이미 공원 안의 동물을 배불리 먹였다.
여기까지 말하고 우리는 랑니를 찾았다.🦆)! 사실은 그녀가 단지 플러그인을 위한 구조를 배우고 있을 뿐이라는 것을 증명한다.
마지막으로 거위를 삶을 수 있는 방법은 많기 때문에 오리도 만들 수 있다(🦆).
건배,
크롬
더 많은 유사한 글, 저를 주목해 주십시오. Github,,,Reddit