Giới thiệu về React Spectrum

Các tính năng

• ♿️ Accessible – Khả năng tiếp cận và hành vi được thực hiện theo WAI-ARIA Authoring Practices, bao gồm trình đọc toàn màn hình và hỗ trợ điều hướng bằng bàn phím. Tất cả các thành phần đã được kiểm tra trên nhiều loại thiết bị và trình đọc màn hình để đảm bảo trải nghiệm tốt nhất có thể cho tất cả người dùng.
• 📱 Adaptive – Tất cả các thành phần được thiết kế để hoạt động với các tương tác chuột, cảm ứng và bàn phím. Chúng được xây dựng với các nguyên tắc thiết kế đáp ứng để mang lại trải nghiệm tuyệt vời, bất kể thiết bị nào.
• 🌍 International – Hỗ trợ hơn 30 ngôn ngữ, cùng hỗ trợ cho các ngôn ngữ từ phải sang trái, định dạng ngày tháng và số, v.v.
• 🎨 Customizable – Các thành phần của React Spectrum hỗ trợ các chủ đề tùy chỉnh và tự động điều chỉnh cho chế độ tối. Để có nhiều khả năng tùy chỉnh hơn nữa, bạn có thể xây dựng các thành phần của riêng mình với cấu trúc DOM của riêng bạn và sử dụng React Aria và React Stately hooks để cung cấp hành vi, khả năng truy cập và tương tác.

Motivation

Các hệ thống thiết kế hiện đang trở nên phổ biến hơn bao giờ hết và nhiều công ty cả lớn và nhỏ đang triển khai các thư viện thành phần của riêng họ từ đầu. Các thư viện chế độ xem hiện đại như React cho phép các nhóm xây dựng và duy trì các thành phần này dễ dàng hơn bao giờ hết, nhưng vẫn cực kỳ khó làm như vậy theo cách có thể truy cập đầy đủ với các tương tác hoạt động trên nhiều loại thiết bị. Điều này tiêu tốn hàng triệu đô la đầu tư cho mỗi công ty khi họ sao chép công việc mà lẽ ra có thể được chia sẻ.

Trong khi mỗi hệ thống thiết kế là duy nhất, thường có nhiều điểm chung giữa các thành phần hơn là khác nhau. Hầu hết các thành phần thường được tìm thấy trong một hệ thống thiết kế, như các button, checkbox, select, và thậm chí là table, thường có hành vi và logic rất giống nhau. WAI-ARIA Authoring Practices mô tả số lượng các thành phần phổ biến nhất sẽ hoạt động theo ngữ nghĩa trợ năng và các tương tác bàn phím. Sự khác biệt chính giữa các hệ thống thiết kế là kiểu dáng (styling).

Thật không may, nhiều công ty và nhóm không có đủ tài nguyên hoặc thời gian để ưu tiên các tính năng như accessibility, quốc tế hóa, điều hướng bàn phím đầy đủ và tương tác chạm. Điều này dẫn đến nhiều ứng dụng web có khả năng truy cập và tương tác phụ, góp phần vào nhận thức của web là một nền tảng ứng dụng kém hơn so với các ứng dụng gốc.

Chúng tôi tin rằng có một cơ hội để chia sẻ nhiều hành vi và logic thành phần giữa các hệ thống thiết kế và trên các nền tảng. Ví dụ: các tương tác của người dùng, khả năng truy cập, quốc tế hóa và hành vi có thể được sử dụng lại, đồng thời cho phép kết xuất và tạo kiểu tùy chỉnh sống trong các hệ thống thiết kế riêng lẻ. Điều này có khả năng cải thiện chất lượng tổng thể của các ứng dụng, đồng thời tiết kiệm tiền bạc và thời gian cho các công ty, đồng thời giảm thiểu nỗ lực trùng lặp trong toàn ngành.

Kiến trúc

To enable reusing component behavior between design systems, React Spectrum splits each component into three parts: state, behavior, and the rendered component. This architecture is made possible by React Hooks, which enable the ability to reuse behavior between multiple components.

React Stately

React Stately là một tập hợp các hook cung cấp quản lý trạng thái và logic cốt lõi cho mỗi thành phần. Nó không đưa ra giả định nào về nền tảng mà nó đang chạy và không có chủ đề hoặc logic thiết kế dành riêng cho hệ thống.

React Stately hooks chấp nhận props chung từ thành phần và cung cấp quản lý trạng thái. Chúng thực hiện logic cốt lõi cho thành phần và trả về một giao diện để đọc và cập nhật trạng thái thành phần.

React Stately có thể được sử dụng độc lập trong các thành phần của riêng bạn hoặc được ghép nối với các React Aria hook để có được nhiều hành vi và tương tác của người dùng hơn đối với các ứng dụng web. Đọc tài liệu để tìm hiểu thêm về React Stately và cách bắt đầu sử dụng nó.

React Aria

React Aria thực hiện hành vi và khả năng truy cập cho web theo WAI-ARIA Authoring Practices. Nó bao gồm trình đọc toàn màn hình và hỗ trợ điều hướng bàn phím, cùng với các tương tác chuột và cảm ứng đã được thử nghiệm trên nhiều loại thiết bị và trình duyệt. Nó cũng thực hiện quốc tế hóa cho hơn 30 ngôn ngữ, với hành vi cụ thể từ phải sang trái, định dạng ngày và số được bản địa hóa, v.v.

React Aria không chứa bất kỳ kiểu dáng hoặc logic cụ thể của hệ thống thiết kế. Nó thực hiện xử lý sự kiện, khả năng truy cập, quốc tế hóa, v.v. - tất cả các phần của một thành phần có thể được chia sẻ trên nhiều hệ thống thiết kế. Nó trả về các props DOM có thể được rải lên các phần tử được kết xuất bởi thành phần. Chúng bao gồm các thuộc tính ngữ nghĩa như ARIA và trình xử lý sự kiện. Các trình xử lý sự kiện lần lượt gọi các phương thức trên giao diện trạng thái để thực hiện hành vi cho thành phần.

React Aria cung cấp cho bạn quyền kiểm soát hoàn toàn việc hiển thị và tạo kiểu của các thành phần của bạn, nhưng thay vì xây dựng mọi thứ từ đầu, bạn bắt đầu với các nguyên thủy cấp cao hơn đó là những cái có ngữ nghĩa, hành vi và tương tác được tích hợp sẵn. Điều này cho phép bạn tạo các thành phần nhanh hơn và đảm rằng chúng hoạt động tốt trên các thiết bị và công nghệ hỗ trợ.

Việc xây dựng một thành phần với React Aria và React Stately trông giống như sau: gọi các hook và rải các props kết quả lên các phần tử DOM thích hợp.

function Switch(props) {
  let state = useToggleState(props);
  let { inputProps } = useSwitch(props, state);
  let { isFocusVisible, focusProps } = useFocusRing();

  return (
    <label style={{ display: 'flex', alignItems: 'center' }}>
      <VisuallyHidden>
        <input {...inputProps} {...focusProps} />
      </VisuallyHidden>
      <svg width={40} height={24} aria-hidden="true" style={{ marginRight: 4 }}>
        <rect
          x={4}
          y={4}
          width={32}
          height={16}
          rx={8}
          fill={state.isSelected ? 'orange' : 'gray'}
        />
        <circle cx={state.isSelected ? 28 : 12} cy={12} r={5} fill="white" />
        {isFocusVisible && (
          <rect
            x={1}
            y={1}
            width={38}
            height={22}
            rx={11}
            fill="none"
            stroke="orange"
            strokeWidth={2}
          />
        )}
      </svg>
      {props.children}
    </label>
  );
}

<Switch>Test</Switch>;

React Spectrum

React Spectrum đặt tất cả các phần này lại với nhau và triển khai kiểu dành riêng cho Adobe. Nó được thiết kế để thích ứng và hoạt động trên các tương tác chuột, chạm và bàn phím, trên các thiết bị có kích thước màn hình bất kỳ. Nó hỗ trợ

Nếu bạn đang tích hợp với phần mềm Adobe hoặc muốn có một thư viện thành phần end-to-end để sử dụng trong dự án của mình, thì React Spectrum là một nơi tuyệt vời để bắt đầu. Tiết kiệm thời gian bằng cách sử dụng Project Firefly, framework hoàn chỉnh của chúng tôi để xây dựng các ứng dụng Adobe cloud-native tùy chỉnh. Khách hàng doanh nghiệp và đối tác có thể mở rộng chức năng của các giải pháp Adobe Experience Platform và Adobe Experience Cloud trong một ứng dụng tùy chỉnh để giải quyết các nhu cầu kinh doanh và quy trình làm việc cụ thể.

Chúng tôi đã thiết kế các API trong React Spectrum để dễ sử dụng. Ví dụ sau đây cho thấy việc tạo một phần tử chọn có hỗ trợ các phần và các tùy chọn phức tạp đơn giản như thế nào.

<Picker label="Options">
  <Section title="Permission">
    <Item textValue="Read">
      <Book size="S" />
      <Text>Read</Text>
      <Text slot="description">Read Only</Text>
    </Item>
    <Item textValue="Write">
      <Draw size="S" />
      <Text>Write</Text>
      <Text slot="description">Read and Write Only</Text>
    </Item>
    <Item textValue="Admin">
      <BulkEditUsers size="S" />
      <Text>Admin</Text>
      <Text slot="description">Full access</Text>
    </Item>
  </Section>
</Picker>

Try it out!

• React Spectrum Libraries

  A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.

  Adobe
• GitHub - adobereact-spectrum: A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences.

  A collection of libraries and tools that help you build adaptive, accessible, and robust user experiences. - GitHub - adobereact-spectrum: A collection of libraries and tools that help you build a...

  GitHub