ES2015는 다른 많은 주요 기능 중에서 클래스 구문을 도입했습니다.일부 사람들에게 그것은 대상 프로그래밍에서 부족한 부분이다.다른 사람들에게 우리는 본래 어떤 것들을 첨가해서는 안 된다.그러나 클래스는 이미 라이브러리 작성자와 사용자의 사랑을 받았기 때문에 오늘날 거의 모든 자바스크립트 라이브러리나 프레임워크에서 찾을 수 있다.
수업은 약속을 실천했습니까?3년 후, 나는 더 간단한 문법 (함수 구조 함수와 원형을 사용하는 것이 아니라) 을 제외하고는 각 분야에서 모두 실패했다고 말할 수 있다.우리 함께 가장 중요한 함정을 탐색합시다.

class MyComponent extends CoolComponent {
  constructor(one, two) {
    // Use super() always before calling `this`
    // and don't forget to pass arguments 🤭
    super(one, two);
    this.foo = 'bar';
  }

  update(...args) {
    this.value = '...';
    // Does CoolComponent include update method or not? 🧐
    super.update(...args);
  }
}

유형문법은 사람을 곤혹스럽게 할 수 있다.라이브러리는 일반적으로 사용자가 API를 사용하기 위해 extends 키워드를 사용하도록 강요합니다.간단해 보이지만 확장은 필요한 곳에 super()개의 호출을 사용해야 한다.부모 정의의 내부 방법을 덮어쓰지 않도록 하기 위해서, 우리는 그것을 어떻게 명명하는지 조심해야 한다. (곧 화려한 # 키워드를 사용하여 private fields을 만들 수 있다.)
슈퍼 호출도 까다로울 수 있다. 예를 들어 this을 호출하기 전에 구조 함수에서 super()을 사용할 수 없다.오, 구조 함수 매개 변수를 전달하는 것을 잊지 마세요.constructor 메서드를 정의하려면 수동으로 수행해야 합니다.
물론 우리는 익숙해질 것이다.해냈습니다.그러나 이것이 옳다는 것은 아니다.

class MyComponent extends CoolComponent {
  constructor() {
    ...
    // Change onClick method name and forget update it here 😆
    this.onClick = this.onClick.bind(this); 
  }

  onClick() {
    this.foo = 'bar';
  }

  render() {
    return <button onClick={this.onClick}>...</button>;
  }
}

클래스는 이 문법에 밀접하게 연결되어 있다.클래스 내 방법 this은 이 클래스의 실례를 나타낸다.그것은 방법 정의를 다른 실례에 전달해서 위아래 문장을 잃어버릴 생각은 없었다.나는 라이브러리 작성자가 단지 유형문법에서 가능한 내용을 짜내고 창조성을 발휘하고 싶어 한다는 것을 안다.불행하게도, 귀속 함수 상하문에 대한 가장 좋은 해결 방안은 하나도 없다.구원을 위해서, 우리는 또 다른 새로운 문법인 class fields을 사용할 수 있으며, 이것은 미리 귀속된 실례를 만드는 방법을 간소화할 수 있다.

class MyComponent extends CoolComponent {
  // this method uses current state 🤨
  foo() {
    this.currentValue += 1;
    return this.currentValue;
  }

  // this method depends on other instance method 👆
  bar(nextValue) {
    const value = this.foo();
    return value + nextValue;
  }
}

class OtherComponent extends MyComponent {
  // Ups, this.bar() is broken now 😡
  foo() {
    return this.otherValue; 
  }
}

수업 시간에 글을 쓰기가 매우 어렵다.이곳의 첫 번째 문제는 상태 방법이 있다는 것이다.같은 입력 (전달된 매개 변수) 에도 현재 상태를 사용하고 다른 결과를 되돌릴 수 있습니다.두 번째 요인은 모두가 알고 있는 고릴라 바나나 문제다.클래스 정의를 반복적으로 사용하려면 모든 것을 받아들이거나 아무것도 받아들이지 않아야 한다.parent가 어떤 방법을 포함하고 있는지 알면서도, 그것들은 장래에 바뀔 수 있기 때문에, 어떤 것들을 파괴하기 쉽다.
그 밖에 클래스 정의에서 방법을 꺼내서 다른 방법에서 반복해서 사용할 수는 거의 없다.방법은 일반적으로 서로 의존하거나, 이런 문법을 사용하여 클래스 실례 속성에서 값을 얻는다.네, 믹스 모드가 있지만, 클래스를 조합하는 간단명료한 방식을 제공하지 않습니다.알고 싶다면, mixwith 프로젝트, 심지어 같은 작가의 ES proposal이 있다.
이런 장애에서 벗어날 방법이 있습니까?비록 과정의 부담이 많지만, 그것들은 웹 개발에서 전진하는 가장 좋은 방법일 것이다.클래스에 비해 우리는 이전에 일반 대상을 사용하는 방식이 현저한 우위를 제공하지 못했다.그래서 도서관의 저자와 이용자들은 생각 없이 그들로 방향을 바꿨다.그렇다면 모든 클래스 문제를 피하고 UI 라이브러리를 만들 수 있습니까?
지난 2년 동안 저는 웹 구성 요소를 만드는 데 사용되는 라이브러리를 개발해 왔습니다. 이를 hybrids이라고 합니다.말 그대로 두 개념의 혼합체인 클래스와 일반 대상이다.그러나 최종 해결 방안은 그렇게 내 머릿속에 나타나지 않았다.
처음에 나는 다른 라이브러리처럼 흔한 패턴을 따랐다.나는 이런 종류의 기초 위에서 나의 API를 세웠다.그럼에도 불구하고 이 라이브러리의 주요 목표는 업무 논리와 사용자 정의 요소의 정의를 분리하고 사용자가 몇 가지 문제(예를 들어 extends과 super())를 피하도록 하는 것이다.1년 후, 나는 거의 나의 일을 완성했고, 나는 주요 판본을 발표하려고 한다.나를 괴롭히는 유일한 마지막 일은 구도 메커니즘이 부족하다는 것이다.이와 동시에, 나는 함수식 프로그래밍에 관한 지식을 더 많이 배우기 시작했고, 나는 그것을 매우 좋아한다.당시에 나는 유형 문법이 차단기라고 확신했다.나는 어떻게 조합하는지에 관한 지식을 많이 배웠지만, 내가 보기에 모든 해결 방안은 부족하다.
기존의 해결 방안을 포기하고 새로운 해결 방안을 만들어야만 돌파할 수 있다.나에게 있어서 이것은 우리가 어떻게 구성 요소를 정의하는 사상의 전환이다.이 모든 문제들이 우리로 하여금 이 과정을 다시 시작하게 했지만, 이번 방식은 완전히 다르다.기존 아이디어를 사용하지 않고 빈 파일부터 시작해서 공공 API 예시를 만들어 보았습니다.마지막으로 나는 비슷한 방식으로 끝냈다.

import { html, define } from 'hybrids';

function increaseCount(host) {
  host.count += 1;
}

const SimpleCounter = {
  count: 0,
  render: ({ count }) => html`
    <button onclick="${increaseCount}">
      Count: ${count}
    </button>
  `,
};

define('simple-counter', SimpleCounter);

일반 대상 내부의 정의에서 클래스도 이런 문법도 없고 간단한 값과 순수 함수만 있다.또한 개체 정의는 독립된 속성의 매핑이기 때문에 쉽게 조합할 수 있습니다.사용자 정의 define() 함수는 원형에 속성 정의를 적용하고 최종적으로 사용자 정의 요소 API를 사용하여 사용자 정의 요소를 정의하는 클래스를 동적으로 만듭니다.
처음에 나는 이렇게 API를 실현하는 것은 불가능하다고 생각했다. 왜냐하면 간단한 계수 단추보다 더 많은 논리를 가진 복잡한 구성 요소를 확장하고 구축할 수 있기 때문이다.그럼에도 불구하고 나는 더 좋은 생각과 해결 방안을 만들어 가능하게 하기 위해 나날이 노력하고 있다.
열심히 일한 보람이 있다.2018년 5월에 나는 도서관의 주요 판본을 발표했다.위에서 보실 수 있는 코드는 문서의 fully working example입니다!이 모든 것이 가능한 이유는 속성 설명자, 공장, 속성 전환, 변경 검사를 가진 캐시 메커니즘 등 여러 가지 아이디어를 동시에 사용했기 때문이다.
그런데 제목의 오프닝 문제는?제 생각이 답인가요?시간은 모든 것을 증명한다.지금, 나는 기꺼이 너희들과 이 화제를 토론할 것이다💡.

교잡하다 / 혼혈아

일반 대상과 순수 함수에서 웹 구성 요소를 만드는 가장 간단한 방법!💯

🏅One of the four nominated projects to the "Breakthrough of the year" category of Open Source Award in 2019

Hybrids는 web components을 만드는 데 사용되는 UI 라이브러리로, 일반 객체 및 순수 함수에 기반한 강력한 선언성과 기능성을 제공합니다.

가장 간단한 정의는 일반 대상과 순수 함수만 있는 class과 this 문법

글로벌 라이프 사이클 없음 - 자체적으로 라이프 사이클을 단순화하는 방법이 있는 독립형 속성

상속보다 우수한 조합 - 재사용, 병합 또는 분할 속성 정의

초고속 재계산 - 내장형 스마트 캐시 및 변경 감지 메커니즘

외부 도구가 없는 템플릿 - 태그 템플릿 텍스트 기반 템플릿 엔진

개발자 도구 포함 - 핫 모듈 교체 지원 빠르고 즐거운 개발

개시하다

npm package을 응용 프로그램에 추가하거나 브라우저에서 unpkg.com/hybrids CDN을 직접 사용합니다.
그런 다음 필요한 기능을 가져오고 사용자 정의 요소를 정의합니다.
{html 가져오기...
View on GitHub
더 알고 싶으세요?내가 곧 발표할 게시물에서, 나는 혼합 라이브러리의 모든 핵심 개념을 상세하게 설명할 것이다.지금 project homepage과 official documentation을 보도록 격려합니다.
너도 내가 2018년 10월의 Taste the Future with Functional Web Components 회의에서 발표한 ConFrontJS 강연을 볼 수 있다. 나는 회의에서 내가 어떻게 이런 생각을 얻었는지 설명했다.
🙏 당신은 어떻게 이 프로젝트를 지지합니까?GitHub 저장소에⭐️, 평론은 다음과 같다.⬇️ 전 세계에 하이브리드카 뉴스를 전파하다📢!
👋 dev. 커뮤니티에 가입하신 것을 환영합니다!저는 도미닉이라고 하는데, 이것은 제가 쓴 첫 번째 블로그입니다. 어떠한 피드백도 환영합니다❤️.
표지 사진 Zach Lucero - Unsplash