Ant Design – Điều gì khiến thư viện này vượt "mặt" Material-UI của Google?

Nếu bạn là một Front-End developer và thường xuyên sử dụng những thư viện UI cho các dự án của mình thì chắc chắn các bạn đều sẽ biết đến những cái tên rất quen thuộc như Material-UI (MU) do Google phát triển hay Bootstrap do hai kỹ sư tại Twitter làm ra, tất cả đều là các thư viện hỗ trợ thật sự tuyệt vời về tính Responsive cho các màn hình thiết bị khác nhau, các components Javascript có sẵn.

Tuy nhiên, bạn biết đó, thời nào cũng sẽ có những anh hùng hào kiệt, một cái tên khác đang phất lên rất nhanh và cũng nhanh chóng được yêu thích của cộng đồng developers React Front-End đó là ANT DESIGN (ANTD) đạt 73,1k sao trên github và đang vượt lên so với Material-UI (70k sao). Có lẽ điều đầu tiên bạn sẽ biết về ANTD đó là thế lực tạo ra nó – Alibaba.

Vậy ANTD có gì mà có thể vượt lên so với MU – một thư viện UI/UX do Google phát triển rất lâu trước đó?

Tổng quan bài viết

• ANT DESIGN – ANT DESIGN PRO

• WEB COMPONENT vs MOBILE COMPONENT

• Tips và ví dụ customize sử dụng PROPS của ANTD

ANT DESIGN và ANT DESIGN PRO

Bạn có phải lần đầu biết đến ANTD? Có khoảnh khắc nào trong những giây phút "chilling" bạn search google với keyword "ant design là gì?" nhưng chắc có lẽ bạn vẫn chưa biết tới cái tên ANT DESIGN PRO nếu chưa bao giờ sử dụng ANTD.

ANT DESIGN và ANT DESIGN PRO là hai phần khác nhau của ANTD.

ANT DESIGN: Dành cho những components đã được viết sẵn, bạn chỉ cần import và tái sử dụng lại những components đó, ví dụ như Carousels, Form, Upload, Modal, Badge,…etc.

• Điều khiến ANTD trở nên đặc biệt là Document cực kì rõ ràng, các api của components đều có demo và ví dụ đi kèm, bạn có thể xem code trong codeSandbox/codepen/stackblitz. Một số components được ANTD viết với TypeScript, cùng nghía qua một "tí tẹo" document của ANTD nha:

Nếu những điều này chưa khiến bạn phải "quaoooo" thì hãy xem tới các props của ANTD và khả năng hỗ trợ Customize Base component của nó.

Bạn biết đấy, đôi khi làm việc với các thư viện, bạn sẽ muốn thay đổi các base components để đáp ứng như cầu của khách hàng/dự án và props của ANTD sẽ là công cụ đắc lực giúp bạn dễ customize hơn và viết code tối giản hơn nhiều.

Vậy còn ANTD PRO thì sao?

ANT DESIGN PRO thì khác, nó là một theme gần như hoàn chỉnh dành cho các trang Admin, CMS ( Control Management System). Bạn có thể thấy được những gì mà ANTD PRO có thể hỗ trợ bạn qua <a href="https://preview.pro.ant.design/" target="_blank">website preview</a>.

• Cài đặt ANTD PRO với npm hoặc yarn:

Sau khi cài đặt, bạn sẽ thấy rằng điều bạn cần làm là chọn những phần components bạn muốn và bắt đầu gọi API từ phía Back-end hoặc gỉa lập API với file _mock.js có sẵn của ANTD PRO luôn mà không cần phải đau đầu suy nghĩ về UI hay viết code làm sao. Rất tiện lợi đúng không?

Chưa hết, ANTD PRO còn mang đậm tính "all-in-one", chỉ 1 lần cài đặt mà bạn có thể sử dụng luôn:

1. Webpack (Webpack giúp tăng tốc độ cho dự án, đóng gói thành một file duy nhất,…)

2. Less ( một CSS preprocessor giống với SCSS )

   và

3. Sự tuyệt vời đến từ UmiJS – cái tên bạn … chưa nghe qua bao giờ đúng không?

UmiJS: chính là một thư viện Plugin enterprise-level cho React. Nghe thì xa tầm với nhưng ý lại nằm trong lời, UmiJS bao hàm bên trong là redux-saga, gọi api thay vì với Axios thì sẽ là Request.

Ai cũng biết Axios hỗ trợ việc gọi api request tốt và "uy tín" như thế nào nhưng UMI-Request lại hơn thế đấy, cùng xem bảng so sánh của umi-request với Axios và Fetch sau:

Bạn đã bị thuyết phục chưa? Nếu chưa thì hãy tới mục số II nha.

WEB COMPONENT vs MOBILE COMPONENT

Giống như sự hỗ trợ của ANTD dành cho web version thì ANTD cũng đã dành điều đó cho cả <a href="https://mobile.ant.design/docs/react/introduce" target="_blank">mobile version</a>.

Version dành cho Mobile là cái mà Material UI chưa làm nhưng ANTD đã làm và còn đầu tư chất lượng cho document của mobile không kém cạnh gì cho web version.

=> Có thể thấy ANTD là một thư viện UI được đầu tư, phát triển mạnh mẽ và đến đây chúng ta cũng có thể hiểu tại sao số sao trên github dành cho ANTD lại vượt nhanh hơn cả MU.

Tips và ví dụ customize sử dụng PROPS của ANTD

Từ mục I và II chúng ta đều được biết tới sự hỗ trợ "xịn xò" cho các developers React Front-End nhưng lại không biết nhược điểm của nó là gì và tips để sử dụng ANTD hiệu quả đúng không?

Nhược điểm của ANTD:

1. Document của ANTD vẫn còn một vài chỗ viết bằng tiếng Trung, đặc biệt là Document của ANTD PRO/UMIJS

=> Việc tiếng Trung còn nhiều khiến cho các developers gặp khó khăn khi muốn customize components hoặc đọc về API/Props hỗ trợ.

2. Trên các trang như Stackoverflow, dev.to,… có ít các bài được giải thích hoặc hỗ trợ cho ANTD.

=> Vậy nên khi gặp bug, các bạn cũng có thể mất kha khá thời gian để sửa và kiểm tra lại.

3. Tuỳ chỉnh Theme

=> Khả năng tuỳ chỉnh theme của ANTD không mạnh bằng MU khi chỉ có thể thay đổi các mặc định về màu sắc, kích thước,…

Tips khi sử dụng ANTD:

1. Hãy đọc kĩ các phần API, props của ANTD hỗ trợ.

=> Có thể khi đứng trước một vấn đề mà vấn đề đó cần customize một base component của ANTD mà bạn chưa có ý tưởng bắt đầu làm như thế nào, hãy đọc kì api/props mà component đó có, có thể bạn sẽ nhận ra mình đỡ bỏ lỡ một sự kết hợp hay ho đó.

2. Hãy viết style bằng less

=> ANTD cũng không quá khắt khe cho việc viết style như khi dùng bootstrap nhưng để tối ưu việc style, responsive và sự tương thích với các trình duyệt khác nhau thì hãy viết với less nhé.

• Ví dụ về customize sử dụng PROPS của ANTD

Customize dropdown của <Select> với infinity scroll

Có 5 bước chúng ta cần làm (nguồn: <a href="https://codesandbox.io/s/antd-select-infinite-scroll-90shp?file=/index.js:1649-2578)" target="_blank">click here to open codeSandbox</a>)

Bước 1: Import các phần cần thiết và viết một component:

import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import Select from "antd/lib/select";
const { Option } = Select;

class LazySelect2Input extends React.PureComponent {
  render() {
    return <div className="App"></div>;
  }
}

Bước 2: Viết hàm để render mock data:

// Fetch at most 200
// On scroll uses a queue
// Pop

const children = [...Array(20).keys()];
const range = (start, stop, step) =>
  Array.from({ length: (stop - start) / step + 1 }, (_, i) => start + i * step);
const handleChange = (value) => console.log(`selected ${value}`);

Bước 3: Khai báo constructor với props, state:

 constructor(props) {
    super(props);
    this.state = {
      lastScrollPos: 0,
      loadingMore: false,
      options: children,
      min: 0,
      search: undefined
    };
  }

Bước 4: Viết function để thực hiện infinity scroll:

handleScroll = (event) => {
  event.stopPropagation();
  let delta;
  const { options, min, loadingMore } = this.state;
  let newMin = min;
  if (event.wheelDelta) {
    delta = event.wheelDelta;
  } else {
    delta = -1 * event.deltaY;
  }

  if (!loadingMore) {
    if (delta < 0) {
      newMin = min + 1;
      if (newMin + 10 >= Math.max(...options)) {
        // Fetch more items when the list is exhausted.
        this.handleFetchMore(Math.max(...options) + 1, 10, newMin);
      }
    } else if (delta > 0 && min >= 1) {
      newMin = min - 1;
    }

    return this.setState({ min: newMin });
  }
};

handleFetchMore = (offset, limit, min) => {
  this.setState(
    {
      loadingMore: true,
      options: [...this.state.options, ...range(offset, offset + limit, 1)],
    },
    () =>
      this.setState({
        loadingMore: false,
        min,
      })
  );
};

Bước 5: Render và Return:

render() {
    const { loadingMore, min, options, search } = this.state;
    let currentOptions = options;
    const extraProps = {};

    if (search) {
      currentOptions = options.filter(v => v.toString().indexOf(search) >= 0);
      extraProps.open = true;
      extraProps.key = "searching";
    }
    return (
      <div className="App">
        <Select
          mode="multiple"
          style={{ width: "100%" }}
          onChange={handleChange}
          // dropdownRender, filterOption, defaultActiveFirstOption
          // are props for customize of ANTD
          dropdownRender={menu => <div onWheel={this.handleScroll}>{menu}</div>}
          loading={loadingMore}
          onSearch={search => this.setState({ search })}
          filterOption={false}
          defaultActiveFirstOption={false}
          {...extraProps}
        >
          {currentOptions.slice(min, min + 10).map(i => (
            <Option key={i} value={i}>
              {i}
            </Option>
          ))}
        </Select>
      </div>
    );
  }

=> Có thể thấy các props dropdownRender, filterOption, defaultActiveFirstOption đã hỗ trợ cho chúng ta bắt sự kiện scroll khi tag Select xổ xuống các option để việc thực hiện tải thêm data khi người dùng cuộn xuống phần đáy của tag select (popup container).`

Tổng kết

Chúng ta đã có một bài đọc khá dài về ANT DESIGN. Hi vọng những gì mình chia sẻ có thể giúp bạn hiểu thêm về nó và có thể dễ dàng bắt đầu sử dụng hơn nha. Cảm ơn các bạn đã đọc.