Thành phần Material cho Web so với Angular Material 2 [đã đóng]

Gần đây, dự án kế nhiệm MDL (Material Design Lite) đã được khởi chạy dưới dạng Thành phần Vật liệu cho Web . Một trong những mục tiêu của nó là "Tích hợp liền mạch với các thư viện và khuôn khổ JS khác".

Có một dự án khác là Angular Material2 cung cấp các thành phần thiết kế material design dành riêng cho Angular (v2 +).

Cả hai dự án đều đang tạo các thành phần UI dựa trên material design . Ngoài ra, chúng có bộ thành phần tương tự sẵn sàng / đang hoạt động-phát triển và cùng một bộ thành phần sắp ra mắt (được liệt kê ở đây và ở đây ).

Ai đó có thể vui lòng giúp tôi hiểu sự trùng lặp giữa 2 dự án và tôi nên chọn cái nào cho các dự án mới?

Ở cấp độ cơ bản, tôi hiểu Angular Material2 sẽ tích hợp liền mạch và chặt chẽ hơn với các dự án Angular, trong khi Material Components cho Web sẽ cung cấp các hook cho nhiều khung JS sử dụng. Nhưng tôi không thấy lý do cho sự chồng chéo và cái nào sẽ có nhiều động lực hơn (đọc thêm thành phần).

Tiết lộ đầy đủ: Tôi làm về Material Components cho web , vì vậy ý ​​kiến ​​của tôi có thể hơi thiên lệch :)

TL; DR sử dụng bất kỳ thư viện nào giúp bạn xây dựng giao diện người dùng của mình theo cách hiệu quả nhất có thể hoặc sử dụng chúng song song với nhau. Thủ tục thanh toánví dụ tích hợp angle2 của chúng tôi angle-mdc-web để xem cách quấn một thành phần MDC-Web bằng ng2.

Mục tiêu của Thành phần Vật liệu cho web (viết tắt. MDC-Web ), như đã được ám chỉ, là tạo ra một triển khai chính tắc của các thành phần Thiết kế Vật liệu cho toàn bộ nền tảng web. Angular / material2 là một thư viện tuyệt vời - nhiều người trong chúng tôi trong nhóm Material Design, bao gồm cả tôi, đã đóng góp vào nó - nhưng nó bị loại trừ đối với các ứng dụng không phải là angle2. Ngoài ra, các thư viện và khuôn khổ không phải của google như React, Aurelia, Vue và những người khác không có giải pháp chính thức phù hợp với nhu cầu của họ.

Điều đó đang được nói, Angular2 thuộc phạm vi của chúng tôi về "toàn bộ nền tảng web" và chúng tôi chắc chắn muốn hỗ trợ nó vì điều đó. Ở giai đoạn này trong cả hai dự án, chúng tôi có thể có một số thành phần bạn cần mà angle / material2 không có, hoặc ngược lại. Tôi khuyến khích bạn sử dụng bất kỳ thư viện nào giúp bạn hoàn thành mục tiêu của mình theo cách tốt nhất có thể. Đó có thể là angle / material2, có thể là MDC-Web, hoặc thành thật mà nói, nó có thể là cả hai. Ví dụ: bạn có thể sử dụng thành phần đã chọn của chúng tôi cùng với các thành phần của side material2 và mọi thứ sẽ hoạt động tốt. Như đã đề cập trong TL; DR, angle-mdc-web là một thư viện có đầy đủ tính năng bao bọc MDC-Web trong một API angle2 + thành ngữ.

Lưu ý cuối cùng, MDC-Web là thư viện duy nhất được phát triển bởi chính nhóm Material Design. Bởi vì điều này, chúng tôi có thể cộng tác và lặp lại với những người cùng tác giả thông số Material Design.

Cập nhật (ngày 16 tháng 3 năm 2018):

Từ các nhận xét được cung cấp bởi @elDuderino Material2 dường như có một cách để tùy chỉnh. Câu trả lời được cung cấp là trước khi Material có cdk ..

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

Cả hai khuôn khổ hiện đang rất trưởng thành. Tôi sử dụng cả hai trong số chúng trong các dự án khác nhau. Tôi chỉ mất một tuần để di chuyển một dự án từ khuôn khổ này sang khuôn khổ khác. Vì vậy, tôi khuyên bạn nên thử cả hai và xem cái nào bạn thấy thoải mái.

Tôi sẽ chia sẻ kinh nghiệm của tôi. Cố chấp và thiên vị của nó. Thích được sửa chữa.

Chúng tôi đang bắt đầu từ đầu và sử dụng Angular. Chúng tôi quyết định đi với Material. Tôi bắt đầu tìm kiếm một khung công tác tốt hơn và thử tất cả chúng: Materialize, MDL, Angular Material 2 và cuối cùng là MDC cho web.

Đây là những quan sát của tôi, đặc biệt là đối với Material2 so với MDC cho Web.

Material2

• Ưu điểm
  • Readymade. Mọi thứ đều có sẵn và sẵn sàng để bắt đầu làm việc
  • Kiến trúc gần với Angular

• Nhược điểm

  • Danh sách thành phần vẫn chưa hoàn thành (chúng sẽ tăng dần theo thời gian, vì vậy vẫn ổn)
  • Tùy chỉnh là không thể

  Tôi biết chúng ta có thể thêm các chủ đề, vậy thôi. Tất cả HTML và CSS cho các thành phần được thêm vào Angular Components. Vì vậy, nó được biên dịch dưới dạng JavaScript và áp dụng trong thời gian chạy. Vì vậy, không có cách nào để ghi đè hành vi. Tôi đã cố gắng trong một tuần và không thể làm được.

  Đây là những câu hỏi tôi đã hỏi (một trong số chúng được đánh dấu là đóng lại vì có vẻ như nó đang hỏi ý kiến ​​-.-)

  Cách tùy chỉnh Angular Material 2

  Cách mở rộng kiểu thành phần góc

  Tất nhiên họ không nhận được bất kỳ câu trả lời nào và tôi không thể tùy chỉnh chúng. Nếu tôi sai, xin vui lòng chỉ dẫn cho tôi.

Kiểm tra cập nhật được cung cấp ở trên

• Tài liệu tồi

  Hãy xem một ví dụ. Xem số lượng các ví dụ được cung cấp.

  MDC cho ví dụ về thẻ web

  Material2 ví dụ cho thẻ

MDC cho Web

• Nhược điểm

  • Không có sẵn cho Angular

  Chúng tôi không thể bắt đầu sử dụng nó ngay lập tức nếu bạn muốn làm theo cách Angular. Cần viết một trình bao bọc cho Angular cho mỗi thành phần. Có thể mất một số nỗ lực. Nhưng mọi nhóm đều có thể dành thời gian để tùy chỉnh và có những nỗ lực của bên thứ ba để làm cho nó dễ dàng hơn. Nếu không nên làm điều đó theo cách góc cạnh, tôi tin rằng chúng ta có thể bắt đầu mà không cần bao bọc.

  • Danh sách thành phần vẫn chưa hoàn thành (chúng sẽ tăng dần theo thời gian, vì vậy không sao)

• Ưu điểm

  • Chung chung, không ràng buộc vào khuôn khổ. Luôn luôn an toàn để đầu tư vào.
  • Đóng góp nhiều hơn, vì các nhà phát triển khung công tác khác cũng sử dụng nó. Theo thời gian, nó nhận được nhiều đóng góp hơn và bằng chứng trong tương lai (gần như)
  • Hoàn toàn có thể tùy chỉnh.
  • Có vẻ như chỉ có khuôn khổ Nhóm thiết kế material design liên quan trực tiếp với
  • Có thể sử dụng kiến ​​thức / phong cách cho thiết bị di động.
  • Tài liệu là tuyệt vời. Có vẻ như rất nhiều công sức và thời gian được bỏ vào.

Đối với những người xem xét Angular Material 2, Trình chỉnh sửa chủ đề / Plugin Sketch Material và công cụ Thư viện chỉ khả dụng cho MDC. Tôi đang đi trên con đường tương tự và tôi đã bắt đầu với Angular Material 2 và với phần giới thiệu gần đây về Angular Ivy, tôi không chắc nhóm sẽ nỗ lực như thế nào trong Angular Material 2. Tôi đang chuyển sang MDC, là một đặt cược an toàn.

Từ Readme gần đây:

Nội dung cấp cao được lên kế hoạch cho Q1 → Q2 2019 (tháng 1 - tháng 6):

• Phần lớn nhóm Angular Material đang cho nhóm framework hỗ trợ Ivy mượn. Chúng tôi đã và đang sử dụng các bài kiểm tra Angular CDK và Angular Material để xác thực các đường dẫn mã cũng như giúp gỡ lỗi các sự cố khi chuyển các ứng dụng của Google sang quy trình kết xuất mới.
• Chúng tôi cũng đang làm việc với nhóm Material Design về chiến lược cộng tác sâu hơn. Chúng tôi sẽ có nhiều điều hơn để chia sẻ về điều này khi các kế hoạch của chúng tôi được hoàn thiện hơn.
• Các loại sửa lỗi và cải tiến tính năng nhỏ.
• Thiết kế các cải tiến API cho thành phần cây để cải thiện công thái học.

Có vẻ như nhóm Angular Material có kế hoạch cộng tác với nhóm MDC:

Nội dung cấp cao được lên kế hoạch cho Quý 4 năm 2018 (Tháng 10 - Tháng 12):

• Cải thiện công cụ xây dựng và tự động hóa của riêng chúng tôi
• Sửa lỗi và giảm một số nợ kỹ thuật bên trong Google
• Lập kế hoạch dài hạn về cách cộng tác với nhóm MDC Web
• Thiết kế để cải tiến bảng nâng cao (thay đổi kích thước cột, chỉ thị lựa chọn, chỉnh sửa nội tuyến)

( ĐỌC SÁCH )

Điều này đã được thêm vào readme khoảng 20 ngày trước (10 tháng 10 năm 2018).
Vì vậy, rất có thể, trong tương lai Angular Material chỉ là một loại trình bao bọc Angular hoặc triển khai Angular của MDC cho Web.

Angular Material 2 vẫn còn lỗi thời và không triển khai đúng thông số kỹ thuật của material. Đừng sử dụng nó.