Adobe Design System "React Spectrum"때문에 소개합니다.
React Spectrum
🚀 Super excited to announce:♿️ React Aria — Accessible UI primitives for your design system.👑 React Stately — State and core logic for your design system.🌈 React Spectrum — Adobe’s design system.Learn more: https://t.co/ucVguh3rqp Github: https://t.co/e8aOfLgCVK — Devon Govett (@devongovett) July 15, 2020
7월 15일 Adobe의 디자인 시스템react-spectrum
이 발표되었습니다.
디자인도 훌륭하지만 다른 부분의 퀄리티는 개인적으로 충격적이어서 소개해 드리려고 합니다.p>
어디 대단해?
- 논리와 UI를 완전히 분해하여 논리적인 부분을 재활용할 수 있는 곳
- 자신·자사의 디자인 시스템을 제작하고자 하는 경우 논리만 빌려 설치할 수 있다
- 논리 부분의 질이 너무 높다(cross-platform,accessibility, 다중 언어는 1년 반 이상의 시간을 들여 개발·테스트를 한다)
- 보통 UI가 예뻐요.
제목은
react-spectrum
대단하지만 실제로는 이 논리적인 부분이다p>-
react-aria
맞춤형 Hooks를 이용하여 플랫폼과 장치에 따라 다양한 동작을 유니버설- 예를 들어,
onClick
비헤이비어는 마우스를 사용하지 않는 다른 장치에서는 들리지 않을 수 있지만onPress
이벤트를 통해 통합됩니다
- 예를 들어,
-
react-stately
사용자 인터페이스에 의존하지 않는 복잡한React
구성 요소의 논리 제공- DatePicker, Table, Search, Navigation, Toast, Virtualizer 등
- 조합 논리 부분을 통해 보조 기능이 높은 좋아하는 구성 요소를 쉽게 만들 수 있다
- 아직 개발 중인 구성 요소가 있는 것 같습니다.
TailwindCSS 사용 예
Started playing around with making some examples of using React Aria with @tailwindcss . So far, I've made completely custom styled buttons, checkboxes, textfields, and selects. And they're fully accessible. In 1 hour! 🤯
— Devon Govett (@devongovett) July 18, 2020
Try them out yourself: https://t.co/w4SgyIcPmK pic.twitter.com/2Ks2fttxMC
논리적 측면 의뢰react-aria
와react-stately
,tailwindCSS에만 조형을 설치한 예.1시간 동안 많은 구성 요소가 설치된 것 같아서 생산성이 매우 높은 것 같다p>
紹介動画
動画のリンク .
↑ 개발의 경과와 무엇을 할 수 있는지,
시간 있으신 분들은 꼭 보셔야 돼요.p>
ドキュメント
React Spectrum
https://react-spectrum.adobe.com/index.html
Repository
https://github.com/adobe/react-spectrum
最後に
어제 트위터에서 큰 힘이 돼서 공유했어요.p>
써봤는데 디자인 시스템을 만들고 싶은 사람, 구성 요소 라이브러리를 찾는 사람 외에는 수요가 없는 것 같아서... (울며)
현재 업무에서도 사용되는 디자인 시스템,
다양한 플랫폼에 대응하는 논리적인 부분을 만드는 등 힘들고 미묘합니다.
그곳의 개축에도 큰 도움이 되리라 기대된다p>
개인적으로도 제가 디자인한 구성 요소 라이브러리를 만들고 싶은 욕심이 있어서 여러 가지를 해보고 싶어요.p>
Reference
이 문제에 관하여(Adobe Design System "React Spectrum"때문에 소개합니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/so99ynoodles/items/bc924b7ee8c265b09723텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)