웹 컴포넌트 라이브러리 조사

[DaleSeo]

Why web components?

웹 컴포넌트로 디자인 시스템을 만들면 프레임워크에 구애받지 않고 쓸 수 있음.

Libraries

Lit과 Stencil이 가장 유명함. Lit이 전신인 Ploymer까지 합치면 가장 큰 생태계와 커뮤니티를 이루고 있음.

• Lit
  • 18.4K ⭐
  • a successor to Ploymer with 22K ⭐
  • Based on template literals, classes, decorators
  • Suitable for creating web components quickly and easily, especially for smaller projects
  • Used by Shoelace and Google Docs
• Stencil
  • 12.5K ⭐
  • Based on decorators
  • Compiler
  • Suitable for building a scalable design system
  • Used by Shopify
  • 별도의 CSS 파일 사용
• Other alternatives
• Highbrids: 3K ⭐
• Slim.js: 1K ⭐

State of JS 2023 설문 결과에서도 Lit이 Stencil을 앞서고 있음

LIt vs. Stencil

• Lit은 런타임에 웹 컴포넌트를 만들고, Stencil은 컴파일을 통해 미리 웹 컴포넌트를 만듬
• Lit는 스타일을 클래스 안에서 하는데, Stencil은 별도의 CSS 파일에서 함
• Lit은 String tempalte literal을 쓰는데, Stencil은 JSX를 사용함
• Stencil은 추가 코드 없이 프레임워크 용 빌드가 가능함
• Vite는 Lit만 공식 지원

웹컴포넌트 라이브러리 비교 자료

https://medium.com/@yanguly/breaking-down-barriers-easy-web-components-with-lit-524fe70206b3

[nhistory]

동일한 Todo list로 개발자 경험 비교
Lit vs Stencil build 용량 차이: 37kb vs 586kb