웹의 재료 구성 요소와 각도 재료 2

웹의 재료 구성 요소와 각도 재료 2

---

최근 MDL (Material Design Lite) 프로젝트의 후속 프로젝트가 Material Components for the Web 으로 시작되었습니다 . 목표 중 하나는 "다른 JS 프레임 워크 및 라이브러리와의 원활한 통합"입니다.

Angular (v2 +)를위한 재료 디자인 구성 요소를 제공하는 또 다른 프로젝트 Angular Material2 가 있습니다.

두 프로젝트 모두 머티리얼 디자인 기반 UI 구성 요소를 만들고 있습니다. 또한 준비 / 비활성 개발 과 유사한 구성 요소 집합과 곧 출시 될 구성 요소 집합 ( 여기 및 여기에 나열 됨 )이 있습니다.

누군가가 두 프로젝트 간의 겹침을 이해하도록 도와 주시고 새로운 프로젝트를 선택해야합니까?

근본적인 수준에서 저는 Angular Material2가 Angular 프로젝트와 더 매끄럽고 긴밀하게 통합되는 반면, 웹용 Material Components는 여러 JS 프레임 워크에서 사용할 수있는 후크를 제공한다는 것을 이해합니다. 그러나 나는 겹치는 이유와 더 많은 추진력을 가질 것입니다 (더 많은 구성 요소를 읽으십시오).

---

전체 공개 : 저는 웹용 머티리얼 컴포넌트에 대해 작업 하므로 제 의견이 약간 편향 될 수 있습니다. :)

TL; DR은 가능한 가장 효율적인 방법으로 UI를 빌드하는 데 도움이되는 라이브러리를 사용하거나 나란히 사용합니다. 체크 아웃angular2 통합 예제 angular-mdc-web 을 사용하여 ng2를 사용하여 MDC-Web 구성 요소를 래핑하는 방법을 확인하십시오.

언급 된 바와 같이 웹용 머티리얼 컴포넌트 (약자 MDC-Web ) 의 목표 는 전체 웹 플랫폼에 대한 머티리얼 디자인 컴포넌트의 표준 구현을 만드는 것입니다. Angular / material2는 뛰어난 라이브러리입니다. 저를 포함한 Material Design 팀의 많은 사람들이이 라이브러리에 기여했습니다.하지만 Angular2가 아닌 응용 프로그램에는 예외입니다. 또한 React, Aurelia, Vue 등과 같은 Google 이외의 라이브러리 및 프레임 워크에는 필요에 맞는 공식 솔루션 이 없습니다 .

즉, Angular2는 "전체 웹 플랫폼"의 범위에 속하며 그 때문에 확실히 지원하고 싶습니다. 두 프로젝트의이 단계에서 angular / material2에는 필요하지 않은 일부 구성 요소가 있거나 그 반대의 경우도있을 수 있습니다. 가능한 최선의 방법으로 목표를 달성하는 데 도움이되는 라이브러리를 사용하는 것이 좋습니다. 그것은 angular / material2 일 수도 있고, MDC-Web 일 수도 있고, 솔직히 둘 다일 수도 있습니다. 예를 들어, material2 측면의 구성 요소 와 함께 선택 구성 요소 를 사용할 수 있으며 모든 것이 잘 작동합니다. TL; DR에서 언급했듯이 angular-mdc-web 은 관용적 angular2 + API로 MDC-Web을 래핑하는 모든 기능을 갖춘 라이브러리입니다.

마지막으로 MDC-Web은 머티리얼 디자인 팀 자체에서 개발 한 유일한 라이브러리입니다. 이로 인해 머티리얼 디자인 사양을 작성한 동일한 사람들과 공동 작업하고 반복 할 수 있습니다.

---

업데이트 (2018 년 3 월 16 일) :

@elDuderino Material2가 제공 한 의견에서. 제공된 대답은 Material이 cdk ..

https://material.angular.io/guide/customizing-component-styles

두 프레임 워크 모두 현재 매우 성숙되었습니다. 나는 두 가지를 다른 프로젝트에서 사용합니다. 한 프레임 워크에서 다른 프레임 워크로 프로젝트를 마이그레이션하는 데 1 주일 밖에 걸리지 않았습니다. 그래서 나는 둘 다 시도하고 당신이 편안하다고 생각하는 것을 볼 것을 제안합니다.

---

내 경험을 공유하겠습니다. 독단적이고 편견이 있습니다. 바로 잡기를 좋아합니다.

우리는 처음부터 Angular를 사용하고 있습니다. 우리는 Material을 사용하기로 결정했습니다. 더 나은 프레임 워크를 찾기 시작했고 모두 Materialise, MDL, Angular Material 2, 그리고 마지막으로 웹용 MDC를 시도했습니다.

다음은 특히 Material2 대 웹용 MDC에 대한 내 관찰입니다.

재료 2

• 장점
  • 기성품. 모든 것을 사용할 수 있으며 작업을 시작할 준비가되었습니다.
  • Angular에 가까운 아키텍처

• 단점

  • 구성 요소 목록이 아직 완료되지 않았습니다 (시간이 지남에 따라 얻을 수 있으므로 괜찮습니다).
  • 커스터마이징 불가능

  테마를 추가 할 수 있다는 것을 알고 있습니다. 구성 요소에 대한 모든 HTML 및 CSS가 Angular Components에 추가됩니다. 따라서 JavaScript로 컴파일되고 런타임에 적용됩니다. 따라서 동작을 재정의 할 수있는 방법이 없습니다. 나는 일주일 동안 노력했지만 할 수 없었다.

  내가 묻는 질문은 다음과 같습니다. (그 중 하나는 의견을 묻는 것처럼 보이기 때문에 종료 표시가되어 있습니다. -.-)

  Angular Material 2를 사용자 정의하는 방법

  각도 구성 요소 스타일을 확장하는 방법

  물론 그들은 어떤 대답도 얻지 못했고 나는 그들을 맞춤화 할 수 없었습니다. 내가 틀렸다면 지시 해주세요.

위에 제공된 업데이트 확인

• 문서가 나쁘다

  예를 보겠습니다. 제공된 예제 수를 참조하십시오.

  웹 카드 예제 용 MDC

  카드의 Material2 예

웹용 MDC

• 단점

  • Angular에서 쉽게 사용할 수 없음

  Angular 방식으로하고 싶다면 바로 사용할 수 없습니다. 각 구성 요소에 대해 Angular에 대한 래퍼를 작성해야합니다. 약간의 노력이 필요할 수 있습니다. 그러나 모든 팀은 사용자 지정에 시간을 할애 할 수 있으며 이를 쉽게 만들기위한 제 3 자 노력이 있습니다. 각진 방식으로하지 않아도 괜찮다면 래퍼없이 시작할 수 있다고 생각합니다.

  • 구성 요소 목록이 아직 완료되지 않았습니다 (시간이 지남에 따라 얻을 수 있으므로 괜찮습니다).

• 장점

  • 프레임 워크에 연결되지 않은 일반. 투자하기에 항상 안전합니다.
  • 다른 프레임 워크 개발자도 사용하므로 더 많은 기여를합니다. 시간이 지남에 따라 더 많은 기여와 미래 증명을 얻습니다 (거의)
  • 완전히 사용자 정의 할 수 있습니다.
  • 프레임 워크 머티리얼 디자인 팀이 직접 참여하는 것처럼 보입니다.
  • 모바일 장치에도 지식 / 스타일을 사용할 수 있습니다.
  • 문서는 훌륭합니다. 많은 노력과 시간이 투입된 것 같습니다.

---

Angular Material 2를 고려하는 사람들을 위해 Sketch Material Plugin / Theme Editor 및 Gallery 도구는 MDC에서만 사용할 수 있습니다. 나는 같은 길을 가고 있고 Angular Material 2로 시작했고 Angular Ivy에 대한 최근 소개로 팀이 Angular Material 2에 얼마나 많은 노력을 기울 일지 잘 모르겠습니다. 저는 MDC로 이동하고 있습니다. 안전한 내기입니다.

최근 읽어보기에서 :

2019 년 1 분기 → 2 분기 (1 월-6 월)에 계획된 고급 항목 :

• Most of the Angular Material team is on loan to the framework team helping with Ivy. We've been using the Angular CDK and Angular Material tests to validate code paths as well as helping debug issues in switching Google applications to the new rendering pipeline.
• We're also working with the Material Design team on a strategy to collaborate more deeply. We'll have more to share on this once our plans are further along.
• Assorted bugfixes and minor feature improvements.
• Design for API enhancements to the tree component to improve ergonomics.

---

It seems like the Angular Material team plans to collaborate with the MDC team:

High level stuff planned for Q4 2018 (October - Dec):

• Improve our own build and automation tooling
• Fix bugs and reduce some technical debt inside Google
• Working on long-term plans on how to collaborate with the MDC Web team
• Designs for advanced table improvements (column resize, selection directives, inline-edit)

(README)

This has been added to the readme about 20 days ago (Oct 10, 2018).
So chances are, that in future Angular Material is just some kind of Angular wrapper or Angular implementation of the MDC for Web.

---

Angular Material 2 is still out of date and does not implement the material spec correctly. Don't use it.

참고URL : https://stackoverflow.com/questions/41180498/material-components-for-the-web-vs-angular-material-2