2019년 당신이 알아야 할 필수 9가지 웹 컴포넌트 UI 라이브러리 (9 Web Components UI Libraries You Should Know in 2019)

이 글은 Jonathan Saring9Web Components UI Libraries You Should Know in 2019글을 번역했습니다. 저의 모든 글은 허가를 받고 진행 하였습니다.

프레임워크(framework-agnostic)에 구애받지 않는 웹 구성요소를 찾고 계십니까? 한번 보세요.
presentation
Image from codeburst by @webrealizer
이 게시물을 구성할 웹 구성 요소 라이브러리를 검색하기 시작했을 때 처음에는 "멋진 lit-html lib를 어디에서 찾을 수 있을까?"라고 생각했습니다. 아직 웹 구성요소의 모든 잠재력을 파악하지 못했기 때문입니다. 이것은 프레임워크/라이브러리적인 사고방식입니다. "멋진 html 라이브러리를 원합니다."라고 묻는 것과 같습니다. 모든 웹 구성 요소는 다른 구성 요소와 잘 어울리기 위해 정의상 상호 운용 가능합니다.
웹 구성 요소 표준을 기반으로 구축되고 최신 브라우저에서 작동하며 HTML에서 작동하는 모든 JavaScript 라이브러리 또는 프레임워크에서 사용할 수 있는 사용자 정의 구성 요소 및 위젯입니다.
이러한 이유로 팀이 프로젝트 및 애플리케이션에서 공유, 개발 및 사용할 수 있는 재사용 가능한 구성 요소 모음을 쉽게 구성할 수 있으므로 Bit (GitHub)와 같은 도구가 웹 구성 요소와 강력한 조합입니다.

presentation
Example UI animation-components collection with Bit
Stencil, Svelte, Lit HTML 등과 같은 웹 구성요소에 관한 모든 잡담과 함께, 저는 미래에 대한 주도적인 시작을 위해 오늘 웹에서 어떤 웹 구성요소 라이브러리를 사용할 수 있는지 살펴보기로 결정했습니다. 얼마든지 더 제안하세요!

1. Material components web

presentation
일반적으로 제목 "Material"은 UI 구성 요소 라이브러리를 star-count와 다운로드 수 바로 위에 배치합니다. Google의 Material-components-web 라이브러리는 Material-UI 라이브러리의 웹 구성요소 버전입니다. 이러한 웹 구성요소는 여전히 작업이 진행 중인 동안 다양한 컨텍스트와 프레임워크에 통합될 수 있습니다. 이건 확실히 추적해 보세요.

2. Polymer elements

presentation
Google의 Polymer library를 사용하면 다른 HTML 요소를 가져오고 사용하는 것만큼 간단한 경험을 가진 표준 HTML 요소처럼 작동하는 캡슐화된 재사용 가능한 웹 구성요소를 만들 수 있습니다. Polymer elements는 100개 이상의 재사용 가능한 Polymer components를 독립 실행형 리포지토리로 포함하는 GitHub 조직으로, 기성품을 찾아 사용할 수 있습니다. 예제:
<!-- Import a component --> <script src="https://unpkg.com/@polymer/paper-checkbox@next/paper-checkbox.js?module" type="module" ></script>

<!-- Use it like any other HTML element --> <paper-checkbox>Web Components!</paper-checkbox>


  • 생각: 모든 구성 요소를 하나의 리포(repo)로 유지하고 모든 구성 요소를 개별적으로 하나의 Bit 컬렉션에서 찾고 사용할 수 있도록 해야 합니까?

3. Vaadin web components

presentation
저는 이것이 유망하다고 생각합니다. 이 라이브러리는 최신 브라우저에서 모바일 및 데스크톱 웹 애플리케이션의 UI를 구축하기 위해 진화하는 약 30개의 오픈 소스 웹 구성 요소를 포함하는 새로운 라이브러리입니다. 저는 개발이 활발한 이 라이브러리을 꼭 추적하겠습니다. 이것을 확인해 보세요

4. Wired elements

presentation
Wired components in a Bit collection
Wired elements는 손으로 그린 것처럼 보이는 7K stars 모음입니다. 와이어프레임용으로 설계된 요소는 두 개의 렌더링이 정확하게 동일하지 않도록 그려집니다(두 개의 별도 손으로 그린 모양). 유용해요? 그럴 수도 있죠. 대단해요? 확실히 :) 여기서(here) 온라인으로 재생합니다. 심지어는 React나 Vue로도요.

5. Elix

presentation
Elix는 일반 사용자 인터페이스 패턴을 위한 사용자 정의 가능한 웹 구성요소의 커뮤니티 기반 재사용 가능한 집합입니다. 고품질 표준을 보장하기 위해 구성요소는 웹 구성요소에 대한 Gold Standard 체크리스트와 비교하여 측정됩니다. 웹 구성요소는 내장된 HTML 요소를 품질 표시줄로 사용합니다. 이번 건 정말 신나는데, 기여자를 찾고 있어요... :)

6. Time elements

<local-time datetime="2014-04-01T16:30:00-08:00"> April 1, 2014 4:30pm </local-time>

--

<local-time datetime="2014-04-01T16:30:00-08:00"> 1 Apr 2014 21:30 </local-time>
이 다소 오래된 1.5K 스타 라이브러리는 기본적으로 표준 HTML <time>의 사용자 정의 하위 유형을 제공하는 구성 요소입니다. 요소. 시간 스탬프를 로컬 문자열 또는 사용자의 브라우저에서 자동 업데이트되는 상대 텍스트로 포맷하면 어디에서나 사용할 수 있는 사용자 지정 확장을 만들 수 있습니다. 좋아요.

7. UI5-webcomponents

presentation

presentation
SAP의 UI5를 기반으로 구축된 이 라이브러리는 경량, 재사용 가능 및 독립적 UI 요소 집합입니다. 그러나 구성 요소는 UI5 위에 구축되지 않고 독립 실행형 요소입니다. 여러 프레임워크와 애플리케이션에서 사용할 수 있습니다. 구성 요소의 설계는 SAP Fiori Design Guidelines과 일치하며 Fiori 3 디자인을 통합합니다. live playground and APIs를 확인해보세요.

8. Patternfly

Run demo:
git clone git@github.com:patternfly/patternfly-elements.git cd patternfly-elements npm install # this will take a while due to lerna bootstrap npm run storybook
PatternFly Elements는 약 20개의 유연하고 가벼운 웹 구성 요소와 이러한 구성 요소를 구축하는 툴로 구성되어 있습니다. PatternFly 요소는 크기 및 boilerplating(웹 구성요소 표준과 거의 유사)으로, React, Vue, Angular, Billa JS 등 HTML 요소가 사용되는 모든 곳에서 사용됩니다.

9. Web components org

이것은 라이브러리가 아니라 구글의 웹 구성요소 검색 포털이 Polymer elements와 친구를 중심으로 구축되었습니다. Polymer 팀의 새로운 웹 구성요소를 업데이트하는 유용한 방법이며 웹 구성요소로 시작할 때 읽을 수 있는 유용한 리소스를 제공하기 때문에 여기에 나열합니다.

Honorable mentions










Learn more





이 글은 번역 글입니다. 원본 링크입니다.


https://www.facebook.com/groups/224179755005643/

안녕하세요! Early adopter입니다.
페이스북 [DTF] 디자인 번역 공장 - Design Translation Factory 그룹도 많이 가입해주시길 바랍니다.
"보버"에서 "디자인 번역 공장" 연재를 저와 함께 해주실 분을 찾습니다. 하단 "리뷰" 또는 "페이스북"으로 편하게 메시지 주세요!
PS. 제가 사용하는 블로그 "보버"에 "함께 쓰는 블로그"라는 기능이 요번에 추가됐네요 ㅋ (미디엄에 퍼블리케이션 같은 기능..)
하단 링크 글을 보시면 "디자인 번역 공장"에 어떻게 함께 연재할 수 있는지 자세히 설명되어있습니다. 또는 쉽게 FB 메시지 주세요!
https://bit.ly/2L6WsZp