Giải quyết thách thức chia sẻ dữ liệu: Sự kết hợp hoàn hảo giữa Immutable.js và Transit

Khi phát triển ứng dụng, bạn có thể đã gặp phải các vấn đề như: hiệu suất bị hạn chế bởi việc cập nhật trạng thái ở frontend, chi phí cao khi sao chép sâu cấu trúc dữ liệu phức tạp, hoặc mất mát kiểu dữ liệu trong quá trình truyền tải giữa client và server. Bài viết này sẽ giới thiệu cách sử dụng Immutable.js cùng với định dạng Transit để giải quyết những khó khăn trong chia sẻ dữ liệu.

Sau khi đọc bài viết, bạn sẽ học được:

• Hiểu về thách thức của việc tuần tự hóa (serialization) với Immutable.js.
• Sử dụng Transit để thực hiện giao tiếp dữ liệu hiệu quả hơn.
• Áp dụng các thực hành tốt nhất cho việc truyền tải dữ liệu giữa client và server.
• Giải quyết các vấn đề hiệu suất thường gặp liên quan đến chia sẻ dữ liệu.

Tại sao cần một phương án tuần tự hóa đặc biệt?

JSON gốc của JavaScript có nhiều hạn chế khi xử lý cấu trúc dữ liệu phức tạp. Khi làm việc với Immutable.js - thư viện cung cấp cấu trúc dữ liệu bất biến, JSON thông thường sẽ làm mất thông tin kiểu dữ liệu, chuyển đổi tất cả dữ liệu thành đối tượng hoặc mảng nguyên thủy, từ đó làm mất đi lợi thế về hiệu suất mà tính bất biến mang lại.

import { Map, List } from 'immutable';

const data = Map({
  name: 'Immutable',
  features: List(['Persistent', 'Efficient', 'Structural Sharing'])
});

// JSON tuần tự hóa thông thường sẽ làm mất thông tin kiểu dữ liệu
const json = JSON.stringify(data);
const parsed = JSON.parse(json);
console.log(parsed); // Đối tượng JavaScript thông thường, mất đi đặc điểm của Immutable

Immutable.js cung cấp phương pháp toJS() để chuyển đổi dữ liệu bất biến thành cấu trúc dữ liệu JavaScript gốc, ví dụ như minh họa trong tệp src/toJS.js:

import { Seq } from './Seq';
import { isCollection } from './predicates/isCollection';
import { isKeyed } from './predicates/isKeyed';
import isDataStructure from './utils/isDataStructure';

export function toJS(value) {
  if (!value || typeof value !== 'object') {
    return value;
  }
  if (!isCollection(value)) {
    if (!isDataStructure(value)) {
      return value;
    }
    value = Seq(value);
  }
  if (isKeyed(value)) {
    const result = {};
    value.__iterate((v, k) => {
      result[k] = toJS(v);
    });
    return result;
  }
  const result = [];
  value.__iterate(v => {
    result.push(toJS(v));
  });
  return result;
}

Tuy nhiên, toJS() chỉ đơn giản là chuyển đổi dữ liệu Immutable thành đối tượng JS gốc mà không giữ lại thông tin kiểu dữ liệu. Đây chính là lúc định dạng Transit phát huy tác dụng.

Giới thiệu về Transit

Transit là một định dạng được thiết kế đặc biệt cho việc trao đổi dữ liệu hiệu quả, phát triển bởi nhóm Clojure. So với JSON, Transit có các ưu điểm sau:

• Giữ lại thông tin kiểu dữ liệu phức tạp.
• Biểu diễn nhị phân gọn nhẹ hơn.
• Hỗ trợ phát hiện tham chiếu vòng.
• Hệ thống kiểu có thể mở rộng.

Transit sử dụng hệ thống nhãn kiểu để bảo toàn thông tin kiểu dữ liệu. Ví dụ, cấu trúc Map của Immutable.js có thể được thêm nhãn cụ thể để đảm bảo rằng khi khôi phục, kiểu dữ liệu ban đầu sẽ được giữ nguyên.

Tích hợp Immutable.js với Transit

Mặc dù thư viện lõi của Immutable.js không bao gồm chức năng tuần tự hóa Transit, chúng ta có thể tích hợp nó bằng cách sử dụng transit-js. Dưới đây là các bước thực hiện:

1. Cài đặt các phụ thuộc cần thiết

npm install immutable transit-js

2. Tạo bộ xử lý tuần tự hóa tùy chỉnh

import { Map, List, isMap, isList, isSet } from 'immutable';
import transit from 'transit-js';

// Tạo bộ xử lý đọc và ghi tùy chỉnh
const writer = transit.writer('json', {
  handlers: {
    // Xử lý Map của Immutable
    'custom/Map': (m) => {
      return transit.map(m.toObject());
    },
    // Xử lý List của Immutable
    'custom/List': (l) => {
      return transit.list(l.toArray());
    },
    // Xử lý Set của Immutable
    'custom/Set': (s) => {
      return transit.set(s.toArray());
    }
  }
});

const reader = transit.reader('json', {
  handlers: {
    // Đọc kiểu Map
    'map': (v) => Map(v),
    // Đọc kiểu List
    'list': (v) => List(v),
    // Đọc kiểu Set
    'set': (v) => Set(v)
  }
});

3. Thực hiện các hàm tuần tự hóa và khôi phục

// Hàm tuần tự hóa
export function serialize(data) {
  if (isMap(data)) {
    return writer.write({
      '@type': 'custom/Map',
      value: data
    });
  } else if (isList(data)) {
    return writer.write({
      '@type': 'custom/List',
      value: data
    });
  } else if (isSet(data)) {
    return writer.write({
      '@type': 'custom/Set',
      value: data
    });
  }
  // Xử lý các kiểu khác...
  return writer.write(data);
}

// Hàm khôi phục
export function deserialize(str) {
  const data = reader.read(str);
  if (data && data['@type']) {
    switch (data['@type']) {
      case 'custom/Map':
        return Map(data.value);
      case 'custom/List':
        return List(data.value);
      case 'custom/Set':
        return Set(data.value);
      default:
        return data;
    }
  }
  return data;
}

Quản lý chu kỳ sống dữ liệu Immutable với Transit

// Tạo dữ liệu Immutable
const data = Map({
  name: 'Immutable Demo',
  features: List(['Persistent', 'Efficient', 'Structural Sharing']),
  versions: Set(['v4.0', 'v4.1', 'v4.2'])
});

// Tuần tự hóa sang định dạng Transit
const serialized = serialize(data);
console.log('Serialized:', serialized);

// Khôi phục từ Transit về Immutable
const deserialized = deserialize(serialized);
console.log('Deserialized:', deserialized);
console.log('Is Map:', isMap(deserialized)); // Kết quả: true

So sánh hiệu suất

Để minh họa rõ ràng lợi thế của Transit, chúng ta đã tiến hành các bài kiểm tra hiệu suất sau:

Kết quả kiểm tra cho thấy Transit không chỉ bảo toàn kiểu dữ liệu của Immutable mà còn cung cấp hiệu suất tuần tự hóa tốt hơn, đặc biệt đối với cấu trúc dữ liệu phức tạp.