JavaScript로 모델 설계

나의 할머니는 자수공, 프랑스어에서 자수공의 이름이다.그녀는 우리 가족을 위해 예쁜 traditional clothes을 만들었고, 우리는 그녀를 소중히 여긴다.최근에 그녀의 집을 청소할 때, 우리는 그녀가 옷을 만드는 데 쓰는 도안을 발견했다.그녀는 과거에 종종 큰 종이 위에 도안을 그렸다.도안을 보면 우리는 그녀가 만들고 싶은 옷을 똑똑히 알 수 있다.
나는 더 이상 우리의 일을 유추할 수 없다.개발할 때, 우리는 이 설계의 기본 절차를 너무 많이 피했다.우리는 응용 프로그램 모델을 설계하기 전에 인코딩을 시작했다. 왜냐하면 우리는 코드가 모델이라고 생각하기 때문이다.사실은 그렇지 않다.코드는 응용 프로그램의 구성 부분일 뿐이다.코드를 읽으면 프로그램을 만드는 데 어떤 모델, 패턴을 사용했는지 추측할 수 있을 뿐이다.그 밖에 우리는 사람이기 때문에 우리의 사고방식은 개발자에 따라 다르기 때문에 개발자가 인코딩할 때의 심리 공간 조직을 이해해야 한다.이것은 결코 그렇게 쉽지 않다.

관심사 분리

이것이 바로 당신이 어떤 프레임워크를 사용하든 어떤 코드를 작성하든 가장 중요한 것은 응용 프로그램을 만들기 위해 정의한 모델입니다.이 모형은 반드시 코드에 있어야 하는 것은 아니다.그것은 반드시 다른 곳에서 인류가 읽을 수 있는 격식으로 규범화되어야 한다.그런데 무슨 격식이에요?우리는 사용할 수 있다UML. 그것은 현재 매우 흔하고 많은 설계 도구가 그것을 사용한다.문제는 형식이 아니라 언어라는 것이다.도표를 이해해야 할 때, 그것은 상당히 복잡하고, 그렇게 인성화되지 않는다.나는 UML 그림이 XMI 형식으로 저장될 수 있다는 것을 알고 있지만, 그것은 인위적인 것이 아니라 기계를 위한 것이다.

모델 생성 모드

우리는 하나의 예를 통해 우리가 필요로 하는 형식을 찾을 수 있다.가령 우리가 절지 모형을 만들고 싶다고 가정하자.절지의 정의는 이름과 성씨이다. 그녀는 어머니와 아버지가 있어 아이를 낳을 수 있다.만약 우리가 이 모델과 관련된 모든 정보를 하나의 JSON 파일에 넣는다면 우리는 다음과 같은 내용을 얻을 수 있다.

{
  "_name": "Jedi",
  "firstName": "property",
  "lastName": "property",
  "mother": "link",
  "father": "link",
  "children": "collection"
}

이 JSON을 읽을 때 우리는 쉽게 이해할 수 있습니다.

절지에는 두 가지 속성이 있는데 이름과 성

절지는 어머니와 아버지와 관계가 있다

절지에 한 무리의 아이들이 있다.

이 JSON은 사실 우리 모델의 모델이다.

모델 생성 및 확장

이런 모델을 정의할 수 있다면 좋겠죠?이제 우리는 이 모델이 생겼으니, 우리를 더욱 진일보하게 하자.만약 우리가 모델에서 UML 클래스를 생성할 수 있다면 이런 결과를 얻을 수 있을 것이다.

이 점을 하기 위해서 우리는 속성의 유형과 같은 기본적인 정보가 부족하다.어떻게 우리의 서류를 처리합니까?모드에서 기본값이 있는 전체 모델을 생성한 다음 편집하기만 하면 됩니다.

{
  "_name": "Jedi",
  "firstName": {
    "type": "any",
    "readOnly": false,
    "mandatory": false,
    "default": ""
  },
  "lastName": {
    "type": "any",
    "readOnly": false,
    "mandatory": false,
    "default": ""
  },
  "mother": {
    "type": "Component",
    "readOnly": false,
    "mandatory": false,
    "default": ""
  },
  "father": {
    "type": "Component",
    "readOnly": false,
    "mandatory": false,
    "default": ""
  },
  "children": {
    "type": ["Component"],
    "readOnly": false,
    "mandatory": false,
    "default": []
  }
}

여기에 패턴에 정의된 모든 정보가 있습니다. 우리는 인류가 읽을 수 있는 형식으로 편집할 수 있습니다.예를 들어firstName에 대해 우리는 그 종류 (기본값은any이고, 이것은 모든 종류를 가질 수 있음을 의미함) 를string으로 설정할 수 있습니다.
이 JSON에서는 UML 클래스를 쉽게 생성할 수 있습니다.우리는 응용 프로그램을 구축하기 위해 완전한 모델을 가지고 있다.

런타임 시 모델 사용

그럼 코드는요?Model Driven Architecture approach에서 우리는 모델에서 코드를 생성하고 보통 UML 그림에서 코드를 생성한다.이것은 매우 좋지만 완벽하지는 않다. 왜냐하면 우리가 정의한 모델과 코드가 동기화되지 않을 위험이 더 높기 때문이다.그렇다면 어떻게 이런 상황을 피할 수 있을까?실행할 때만 응용 프로그램의 모델 정의를 사용합니다.응용 프로그램은 모델의 클래스, 방법, 구성 요소를 만들기 위해 우리가 정의한 모델과 모델을 읽어야 합니다.
네, 멋있어 보여요. 그런데 만약에 이런 방법이 운행할 때 만들어진다면 저는 어떻게 실현해야 하나요?이 점을 하려면 네가 필요하다.방법은 시스템이 이벤트에 반응할 때 실행하는 조작일 뿐이다. 
우리의 예에서, 만약 우리가 절지에서 그녀/그의 전체 이름을 얻을 방법을 찾아야 한다고 가정하자.따라서 다음과 같이 모드를 편집합니다.

{
  "_name": "Jedi",
  "firstName": "property",
  "lastName": "property",
  "mother": "link",
  "father": "link",
  "children": "collection",
  "fullName": "method"
}

우리는 모델에 전명 방법을 추가했다.따라서 우리는 생성된 모델에서

{
  "_name": "Jedi",
  "firstName": {
    "type": "any",
    "readOnly": false,
    "mandatory": false,
    "default": ""
  },
  "lastName": {
    "type": "any",
    "readOnly": false,
    "mandatory": false,
    "default": ""
  },
  "mother": {
    "type": "Component",
    "readOnly": false,
    "mandatory": false,
    "default": ""
  },
  "father": {
    "type": "Component",
    "readOnly": false,
    "mandatory": false,
    "default": ""
  },
  "children": {
    "type": ["Component"],
    "readOnly": false,
    "mandatory": false,
    "default": []
  },
  "fullName": {
    "params": [
      {
        "name": "param",
        "type": "any",
        "mandatory": false,
        "default": null
      }
    ],
    "result": "any"
  }
}

기본적으로, fullName은 선택할 수 있는 인자를 받아들여서 모든 종류의 값을 되돌려줍니다.이제 우리가 이 방법을 실현하고 싶다고 가정합시다.어떻게 해요?전체 이름 이벤트를 보낼 때만 비헤이비어를 추가합니다.

// require the Jedi class
const Jedi = runtime.require('Jedi');
// add a behavior
Jedi.on('fullName', () => this.firstName() + ' ' + this.lastName());

이 사건은 언제 발송합니까?코드에서 전체 이름을 호출할 때.사실상, 이 방법은 모델에서 생성된 것이다. 우리가 그것을 호출할 때, 동기화 이름 이벤트만 보낸다.그런 다음 이벤트와 관련된 기존 비헤이비어가 실행됩니다.
지금, 만약 우리가 방법의 모델을 바꾸면, 그것은 영원히 그 행위를 덮어쓰지 않을 것이다.

결론

다음은 모델을 설계할 때 따라야 할 여러 단계입니다.

읽을 수 있는 형식으로 고위층에서 모델을 정의합니다.

모델에서 모델을 생성합니다.

생성된 모델을 편집하여 모델의 유형, 기본값 등을 지정합니다.

이 모델을 사용하면 실행할 때 모델의 클래스, 방법 및 구성 요소를 생성할 수 있습니다.

이벤트 구동 방법을 사용하여 응용 프로그램을 구축하고 동작을 방법에 추가합니다.

모델을 사용하여 UML 클래스를 생성합니다.

이 방법의 구체적인 사용을 보시려면 제 두 가지 항목을 보십시오.

System Runtime, 시스템 실행 및 관리를 위한 JavaScript 라이브러리 및

System Designer, 디자인 시스템의 웹 IDE

이런 방법을 깊이 사용하다.이를 위해 나는 MSON format (메타모델 자바스크립트 대상 표현에 사용) 을 만들어서 인간이 읽을 수 있는 형식으로 모델을 정의했다.그러나 이것은 결코 이런 방법의 유일한 실현 가능성이 아니며, 당신의 요구에 부합되는 방법을 찾을 수 있습니다.
자막: 표지 사진 작성자Christian Kaindl.