소개
개발자가 모든 프레임워크에서 신속하게 작동하는 경량 구성요소를 빌드하도록 돕는 Google의 오픈소스 라이브러리 세트라고 한다.
Lit를 사용하면 공유 가능한 구성 요소, 애플리케이션, 설계 시스템 등을 빌드할 수 있다.
Lit와 React
Lit-Element는 컴포넌트화를 통한 재활용 및 관리를 편하게 해준다.
React처럼 Custom Element를 쉽게 만들 수 있고 또한 LifeCycle을 제공해서 특정 컴포넌트만 Rerendering 하는 기능을 쉽게 구현할 수 있도록 해줌과 동시에 금방 배울 수 있다는 장점이 있다.
Lit의 핵심 개념과 기능은 여러 면에서 React와 비슷하지만, Lit에는 몇 가지 주요 차이점과 차별화 요소가 있다.
작은 크기
Lit는 작다. 축소되고 gzip으로 압축되어 크기가 약 5KB다.
이에 비해 React + ReactDOM은 40KB 이상이다.
빠른 속도
공개 벤치마크에서 Lit의 템플릿 작성 시스템인 lit-html과 React의 VDOM을 비교한 결과를 보면 lit-html의 속도는 최악의 경우에도 React보다 8~10% 더 높고 일반적인 사용 사례에서는 50% 더 높다.
LitElement(Lit의 구성요소 기본 클래스)는 lit-html에 최소한의 오버헤드를 추가하지만 메모리 사용량, 상호작용, 시작 시간과 같은 구성 요소 기능을 비교할 때 React의 성능보다 16~30% 더 높다.
빌드가 필요하지 않음
Lit에서는 ES Module 등 새로운 브라우저 기능과 태그된 템플릿 리터럴을 사용하여 컴파일을 실행할 필요가 없다.
스크립트 태그 + 브라우저 + 서버를 사용하여 개발 환경을 설정하면 바로 사용 가능하다.
그러나 원한다면 Lit 코드를 빌드하고 최적화할 수도 있다.
Lit는 일반적인 자바스크립트일 뿐이므로 프레임워크별 CLI나 빌드 처리가 필요하지 않다.
프레임워크 제약 없음
Lit 구성 요소는 Web Components라는 일련의 웹 표준을 기반으로 빌드된다.
즉, 구성 요소를 Lit에서 빌드하면 현재 및 향후 프레임워크에서 작동한다.
HTML 요소를 지원한다면 Web Components를 지원한다.
프레임워크 상호 운용성과 관련한 유일한 문제는 프레임워크에서 DOM을 제한적으로 지원하는 경우다.
React는 이러한 프레임워크 중 하나이지만 Refs를 통해 문제를 해결할 수 있다. 다만 Refs는 개발자 경험이 좋지는 않다.
Lit팀은 Refs를 사용할 필요가 없도록 Lit 구성요소를 자동으로 파싱하고 React 래퍼를 생성하는 @lit-labs/react라는 실험용 프로젝트를 진행했다.
Typescript 지원
모든 Lit 코드를 JS로 작성할 수도 있지만 Lit는 TS로 작성되며 Lit팀에서도 개발자에게 TS를 사용하도록 권장한다.
lit-analyzer와 lit-plugin을 사용하여
TS 유형 확인 및 intellisense를 Lit 템플릿에 도입하는 프로젝트를 유지관리하기 위해 Lit 커뮤니티와 협력하고 있다.
브라우저에 내장된 개발자 도구
Lit 구성 요소는 DOM의 HTML 요소다.
구성 요소를 검사하기 위해 브라우저에 맞는 도구나 확장 프로그램을 설치할 필요가 없다.
SSR
Lit2는 SSR 지원을 염두에 두고 빌드되었다.
안정적인 형태의 SSR 도구를 출시하지는 않았지만 Lit팀은 이미 Google 제품에서 서버측 랜더링 구성요소를 배포해왔다.
Lit팀은 곧 Github에서 이러한 도구를 외부에 공개할 것을 예상한다고 한다.
여기에서 진행 상황을 확인할 수 있다.
