매우 빠른 템플릿 및 웹 구성요소 - lit-html & LitElement

저스틴 파냐니

오늘 Google은 두 가지 차세대 웹 개발 라이브러리인 lit-htmlLitElement의 첫 번째 안정화 버전을 발표하게 되어 기쁩니다.

lit-html은 HTML 템플릿 작성을 위한 빠르고 표현력이 풍부한 라이브러리입니다. LitElement는 lit-html 템플릿으로 웹 구성요소를 만들기 위한 간단한 기본 클래스입니다.

프로젝트를 진행해 보셨다면 lit-html 및 LitElement의 의미를 알고 있을 것입니다. 원하는 경우 끝으로 건너뛰셔도 됩니다. lit-html과 LiitElement를 처음 사용하는 경우에는 개요를 읽어보세요.

lit-html: HTML 템플릿 작성을 위한 작고 빠른 라이브러리

lit-html은 HTML 템플릿 작성을 위한 매우 작은 (약 3k에 달하는 번들, 축소 및 gzip으로 압축됨) 빠른 자바스크립트 라이브러리입니다. lit-html은 기능적 프로그래밍 접근 방식과 잘 호환되므로 애플리케이션의 UI를 상태에 관한 함수로 선언적으로 표현할 수 있습니다.

const myTemplate = (name) => html`
    <div>
      Hi, my name is ${name}.
    </div>
`;

lit-html 템플릿을 렌더링하는 방법은 간단합니다.

render(myTemplate('Ada'), document.body);

템플릿을 다시 렌더링하면 변경된 데이터만 업데이트됩니다.

render(myTemplate('Grace'), document.body);

lit-html은 효율적이고 표현력이 뛰어나며 확장 가능합니다.

  • 효율성. lit-html은 매우 빠릅니다. 데이터가 변경될 때 lit-html은 디핑할 필요가 없습니다. 대신 템플릿에서 표현식을 삽입한 위치를 기억하고 이러한 동적 부분만 업데이트합니다.
  • 명시적. lit-html은 자바스크립트, 선언형 UI, 함수 프로그래밍 패턴을 최대한 활용할 수 있습니다. lit-html 템플릿의 표현식은 자바스크립트일 뿐이므로 맞춤 구문을 배울 필요가 없으며 원하는 대로 모든 언어의 표현력을 갖출 수 있습니다. lit-html은 기본적으로 문자열, DOM 노드, 배열 등 다양한 종류의 값을 지원합니다. 템플릿 자체는 계산되어 함수로/에서 전달되고 중첩될 수 있는 값입니다.
  • 확장성: lit-html은 자체 템플릿 구성 키트로 맞춤설정 및 확장도 가능합니다. 지시어는 값이 처리되는 방식을 맞춤설정하여 비동기 값, 효율적인 키 반복, 오류 경계 등을 지원합니다. lit-html에는 바로 사용할 수 있는 여러 지시어가 포함되어 있어 자체 지시어를 쉽게 정의할 수 있습니다.

이미 많은 라이브러리와 프로젝트에 lit-html이 통합되어 있습니다. 이러한 라이브러리의 목록은 GitHub의 awesome-lit-html 저장소에서 확인할 수 있습니다.

템플릿만으로도 필요한 경우 lit-html 문서를 지금 시작할 수 있습니다. 앱에서 사용하거나 팀과 공유할 구성요소를 빌드하려면 계속 자세히 알아보세요.

LitElement: 경량형 웹 구성요소 기본 클래스

LitElement는 그 어느 때보다 쉽게 웹 구성요소를 빌드하고 공유할 수 있는 가벼운 기본 클래스입니다.

LitElement는 lit-html을 사용하여 구성요소를 렌더링하고 API를 추가하여 반응형 속성 및 속성을 선언합니다. 요소는 속성이 변경될 때 자동으로 업데이트됩니다. 또한 디핑 없이 빠르게 업데이트됩니다.

다음은 TypeScript의 간단한 LitElement 구성요소입니다.

@customElement('name-tag')
class NameTag extends LitElement {
  @property()
  name = 'a secret';

  render() {
    return html`<p>Hi, my name is ${this.name}!</p>`;
  }
}

(훌륭한 JavaScript API도 있습니다.)

이렇게 하면 일반 HTML 요소를 사용할 수 있는 곳이면 어디서나 사용할 수 있는 요소가 만들어집니다.

<name-tag name="Ida"></name-tag>

이미 웹 구성요소를 사용 중이라면 이제 Chrome, Safari, Firefox에서 기본적으로 지원된다는 소식을 듣게 될 것입니다. Edge 지원이 곧 제공될 예정이며 폴리필은 기존 브라우저 버전에만 필요합니다.

웹 구성요소를 처음 사용하는 경우 한번 사용해 보세요! 웹 구성요소를 사용하면 다른 라이브러리, 도구, 프레임워크와 상호 운용되는 방식으로 HTML을 확장할 수 있습니다. 따라서 대규모 조직 내에서 UI 요소를 공유하거나, 웹 어디에서나 사용할 수 있는 구성요소를 게시하거나, Material Design과 같은 UI 디자인 시스템을 빌드하는 데 이상적입니다.

기본 문서, CMS, 마크다운, React 및 Vue와 같은 프레임워크로 빌드된 뷰 등 HTML을 사용하는 모든 곳에서 맞춤 요소를 사용할 수 있습니다. LitElement 구성요소를 다른 웹 구성요소와 조합할 수 있습니다. 즉, 항상 다른 웹 구성요소를 사용해 작성되었거나 Salesforce Lightning Web Components, Ionic의 Stencil, SkateJS 또는 Polymer 라이브러리와 같은 도구를 사용해 만들 수 있습니다.

시작하기

lit-html 및 LitElement를 사용해 보세요. LitElement 튜토리얼로 시작하면 좋습니다.

lit-html만 사용하거나 lit-html 템플릿을 다른 프로젝트에 통합하려면 lit-html 문서를 참고하세요.

항상 그렇듯이 의견을 알려 주세요. Slack 또는 트위터를 통해 문의하실 수 있습니다. Google Cloud 프로젝트는 오픈소스이므로 GitHub에서 버그를 신고하거나 기능 요청을 제출하거나 개선사항을 제안하실 수 있습니다.