Dash UI 라이브러리 표준 향상 10가지 방법

Mdash(em dash 발음)는 우리가 지난 9년 동안 사용한 UI 라이브러리의 현대적인 대체품이다.
현재와 뚜렷한 대비를 이루는 것은 Mdash는 프레임워크와 상관없이 CDN을 통해 즉시 사용할 수 있다는 것이다.의존 관계도, 구축 절차도 없지만 완전히 현대적이다.그것의 규모와 단순성은 도서관이 막 일을 시작한 시대로 거슬러 올라갈 수 있다™.
너는 itsdoc site에서 Mdash에 관한 모든 것을 배우고 시도해 볼 수 있지만, 지금은 Mdash의 10가지 좋은 점을 중점적으로 소개하고 싶다.

실시간 코드 데모 1. 작은 크기

Dash는 지금까지 가장 작은 UI 라이브러리입니다 :
6.8kb
이렇게 작은 설치 면적으로 인해 응용 프로그램은 모든 장치와 네트워크에서 더욱 가볍고 성능이 높아진다.
Vue, Mdash, 40kb 사용자 정의 코드로 구축된 전체 응용 프로그램은 단독으로 Bootstrap을 사용하는 것보다 작습니다!

2. 실용적인 기능 집합

독특한 작은 사이즈에도 불구하고 Mdash는 다른 라이브러리와 상당한 구성 요소와 유틸리티 집합을 가지고 있다.
현재:

네이티브 HTML 최대화

19개의 사용자 정의 구성 요소(경고, 아이콘, 탭 등)

150개 이상의 공통 사업 카테고리

핵심 구성 요소를 확장하거나 확장하고 맞춤형 설계를 실현하는 데 도움이 됩니다.
utility classes
Mdash는 자신의 의견을 고집하는 많은 구성 요소로 자신을 팽창시키는 것이 아니라 HTML6 같다.유용과 전횡 사이의 균형.순풍과 재료 인터페이스 사이의 가장 좋은 점.

3, 최대 호환성

다른 UI 라이브러리는 제3자 프레임워크에 의존하기 때문에 이 프레임워크만 사용할 수 있지만 Mdash는 웹 표준의 강력한 기능을 이용했다.
다음은 14가지 서로 다른 기술에 사용된 동일한 Mdash 구성 요소입니다.

Vue
<m-alert v-if="alert" v-bind:type="alert.type">{{ alert.message }}</m-alert>

Angular
<m-alert *ngIf="alert" [type]="alert.type">{{ alert.message }}</m-alert>

Riot
<m-alert if="{alert}" type="{alert.type}">{alert.message}</m-alert>

Preact
{props.alert &&
  <m-alert type={props.alert.type}>{props.alert.message}</m-alert>
}

Svelte
{#if alert}
  <m-alert bind:type="{alert.type}">{alert.message}</m-alert>
{/if}

Handlebars
{{#if alert}}
  <m-alert type="{{alert.type}}">{{alert.message}}</m-alert>
{{/if}}

Lit, Hyper, template literals
html`<m-alert type="${alert.type}">${alert.message}</m-alert>`

EJS, ERB, lodash, Underscore
<m-alert type="<%= alert.type %>"><%= alert.message %></m-alert>

And static HTML of course :)
<m-alert type="success">My message</m-alert>

이런 호환성은 인터넷의 전부다!Mdash는 진정한 공유 가능한 디자인 시스템의 규모를 가지고 있습니다!
표준을 활용하고 의존성을 피함으로써 Mdash는 다른 라이브러리에서 실현할 수 없는 제품 범위의 UI 표준화를 실현했다.코드 라이브러리는 매우 간단하기 때문에 당신의 회사 와 맞춤형 제작은 매우 합리적입니다.

포크 Mdash 4. 가능한 한 빨리

Dash의 일부 디자인 이념은'없는 것보다 빠른 것은 없다'는 것이다.그 결과는 라이브러리로서 가능한 모든 면에서 더 빠르다.

빠른 시작 , 준비 완료

Dash는 "just"HTML

이기 때문에 학습 곡선이 평탄하고 짧습니다

구축 시간은 1초도 증가하지 않습니다. 설치하거나 구축할 내용이 없기 때문입니다(또는 일부 신비한 웹 설정 오류로 인해 실패함).

표준 HTML 및 link to Mdash 때문에 코드를 더 빨리 작성할 수 있습니다!

다운로드, 확인 및 실행 코드가 너무 적기 때문에 페이지 로드 속도가 더 빠릅니다(6KB 및 7080200KB)

첫 번째 그림은 더 빨리 시작됩니다. Mdash는 거의 지출이 없기 때문에 서버에서 렌더링할 수 있습니다

렌더링 업데이트는 즉각적입니다. Mdash는 진정한 DOM이기 때문에 추상적이고 가상 DOM

이 아니라 고도로 최적화된 브라우저 API와 직접 상호작용합니다.

그렇게 많지 않아요. 5. 익숙한 표시

가장 기본적인 차원으로 돌아왔다.Mdash 코드는 HTML처럼 보입니다. HTML이기 때문입니다.

Custom button type (renders an 'x')
<button type="remove"></button>

Custom list type (renders no bullets)
<ul type="none">
  <li>...</li>
  <li>...</li>
</ul>

Badge component
<m-badge count="10"></m-badge>

Dialog component
<m-dialog open>
  <h2>Title</h2>
  <p>Body</p>
</m-dialog>

Responsive grid layout
<m-row>
  <m-col span="3 sm-6">...</m-col>
  <m-col span="9 sm-6">...</m-col>
</m-row>

Utility classes
<h2 class="txt-center fnt-light">...</h2>

일부 좋은 점은 IDE는 특별한 플러그인을 필요로 하지 않고 브라우저 개발 도구는 플러그인을 필요로 하지 않으며, 사용자가 작성한 모든 Mdash 코드는 템플릿의 문법이 아니라 이식 가능한 HTML입니다.

6, 통합 성분 API

안녕히 계세요, 언어 환경 전환!세 가지 구성 요소 유형이 있는데 Mdash의 경우 모두 같은 표준<tag attribute="value">...</tag> API를 가지고 있습니다.

1. Native element
<a href="/example.pdf" download>Link</a>

2. Static "micro" component
<m-icon name="phone"></m-icon>

3. Stateful interactive component
<m-dialog open>
  <h2>Title</h2>
  <p>Body</p>
</m-dialog>

구성 요소가 아무리 달라도 표시와 당신의 지혜 모델은 똑같기 때문에 일치성은 신선합니다.React 부트를 사용할 때, 이것은 프레임워크 습관 사용법, JSX 디테일, 클래스와 사용자 정의 API 사이에서 상하문을 끊임없이 전환하는 것과 대비된다.

7, 다기능

모든 유형의 항목은 UI에서 Mdash를 사용할 수 있습니다.정적 사이트, 서버 렌더링, SPA, PWA - 어떤 것을 가지고 있든지 Mdash는 작동할 수 있습니다!일부 유행하는 전자 우편 클라이언트도 Mdash를 정확하게 나타낼 수 있지만, 전자 우편 클라이언트는 매우 나쁘다!
이러한 다기능성은 Mdash를 대형 조직의 디자인 시스템에 특히 적합하게 한다. 이런 조직들은 많은 서로 다른 웹 제품들이 UI의 일치성을 유지해야 한다.

8. 자유롭고 편리하다

대부분의 경우 Mdash는 기본적으로 액세스할 수 있습니다. 표준을 사용하지만 필요한 액세스 요구 사항도 포함됩니다.

aria- 가능한 한 자동으로 속성 설정

범위 내에서 색깔이 좋아 보이고 대비도 요구를 충족시킨다(듣기 쉽지 않다)

16px 글꼴 크기, 13px 절대 최소값

각 구성 요소에 대한 추가 액세스 요구 사항을 명확하게 기록합니다. 예를 들어 "레이블"perceptually uniform color space 을 참조하십시오.

a11y 단면 9. 수명 연장

도서관은 왕래하지만 인터넷 표준은 영원하다.
응, 약혼반지 광고 같아.💍❤️
어쨌든 다른 개원 프로젝트와 마찬가지로 Mdash는 비교적 긴 사용 수명을 희망하고 웹 표준을 바탕으로 그 관련성을 확보할 수 있다.다른 한편, 표준에서 벗어날 위험은 웹 플랫폼의 발전에 따라 개발자들이 곤경에 빠지는 것이다(예를 들어 jQuery는 유행이 지난 API를 사용하고 React는 WC를 사용하지 않는다).

10. 낮은 약속

한 개발자 친구가 나에게 다음과 같은 견해를 공유한 적이 있다.
프레임워크를 선택한 것은 환영을 받기 때문이 아니라 환영을 받지 못할 때 남겨진 혼란이 얼마나 심각한지 때문이다.
다른 디자인 시스템을 사용한다는 것은 그들이 의존하는 JavaScript 프레임워크를 사용하겠다는 약속을 의미한다.이 두 관심사(UI 요소와 응용 프로그램 구조)를 연결시키면 부정적인 결과를 초래할 수 있다.
프레임워크는 UI 요소가 아닌 응용 프로그램 구조와 상태에 사용됩니다.내 말은:

Dash의 깔끔한 인터페이스는 모듈식 구조를 지원하여 디자인 시스템과 프레임워크를 더욱 쉽게 교체할 수 있습니다.

결론

이게 바로 Mdash를 좋게 만드는 10가지!만약 당신이 Mdash를 시험해 보고 싶다면 매우 쉽다 .
트위터에
get started GitHub에서
읽어주셔서 감사합니다!