thi.ng/umbrella là một kho mã nguồn tập trung (monorepo) được viết hoàn toàn bằng TypeScript, bao gồm hơn 180 thư viện độc lập và gần 150 ví dụ minh họa thực tế. Hệ sinh thái này hướng đến các bài toán phát triển phần mềm mang tính khái quát cao — đặc biệt phù hợp với phong cách lập trình hàm, xử lý luồng dữ liệu, và xây dựng hệ thống trực quan hóa hiệu suất cao.

Tại sao nên cân nhắc umbrella trong dự án TypeScript?

Thay vì phụ thuộc vào nhiều gói rời rạc với giao diện không đồng nhất, umbrella cung cấp một bộ công cụ được thiết kế đồng bộ: mọi thành phần chia sẻ cùng cơ chế kiểu dữ liệu, quy ước đặt tên, và mô hình quản lý trạng thái. Các module được thiết kế theo nguyên tắc "zero-runtime overhead", nghĩa là chỉ import những gì bạn dùng — không có tải thừa khi build.

Một số đặc điểm nổi bật

• Phân mảnh tinh tế: Mỗi thư viện (ví dụ: @thi.ng/arrays, @thi.ng/vectors) có thể được sử dụng độc lập, không bắt buộc phải tích hợp toàn bộ hệ sinh thái.
• Hỗ trợ lập trình hàm nghiêm ngặt: Các hàm đều thuần khiết (pure), không gây side-effect, hỗ trợ composition qua pipe/chaining, và tích hợp sẵn với các khái niệm như transducers, iterators lazily-evaluated.
• Xử lý dữ liệu theo luồng: Thư viện @thi.ng/transducers và @thi.ng/streams cho phép xây dựng pipeline xử lý dữ liệu hiệu quả, từ đầu vào bất kỳ (event, WebSocket, file) tới đầu ra (DOM, canvas, WebGL).
• Đồ họa & hình học có độ chính xác cao: Các gói như @thi.ng/geom, @thi.ng/webgl, và @thi.ng/color được tối ưu cho ứng dụng tương tác thời gian thực, không yêu cầu framework UI trung gian.

Bắt đầu nhanh với vài dòng lệnh

Sau khi sao chép kho lưu trữ:

git clone https://github.com/thi-ng/umbrella.git
cd umbrella
pnpm install  // hoặc yarn install nếu ưa thích yarn

Để chạy tất cả ví dụ đã được cấu hình sẵn:

pnpm run examples

Máy chủ phát triển sẽ khởi động tại http://localhost:8080, nơi bạn có thể duyệt từng demo — từ mô phỏng vật lý đơn giản đến trình render 3D dựa trên WebGL.

Các nhóm module trọng yếu

Xử lý cấu trúc dữ liệu

• @thi.ng/arrays: Hàm nâng cao như partitionBy, groupWhile, distinctUntilChanged — mở rộng khả năng thao tác mảng ngoài tiêu chuẩn ES.
• @thi.ng/matrices: Ma trận 2D/3D/4D với phép nhân, nghịch đảo, phân tích SVD — tích hợp liền mạch với hệ tọa độ đồ họa.
• @thi.ng/heap: Cấu trúc heap nhị phân và d-ary, hỗ trợ tùy chỉnh comparator để sắp xếp theo tiêu chí tùy ý.

Đồ họa & tính toán hình học

• @thi.ng/geom: Đối tượng hình học bất biến (Point, Line, Polygon), thuật toán giao cắt, bao lồi (convex hull), và phân vùng không gian (quadtree).
• @thi.ng/webgl: Lớp trừu tượng hóa WebGL2, tự động quản lý shader program, VAO, buffer binding — giảm 70% boilerplate so với API gốc.
• @thi.ng/pixel: Xử lý ảnh pixel-level: chuyển đổi không gian màu, lọc convolution, dithering, và đọc/ghi định dạng PNG/BMP không cần DOM.

Ví dụ thực tế: Mô phỏng tự động tế bào (Cellular Automata)

Một trong những ví dụ nổi bật nằm trong thư mục examples/cellular-automata. Đoạn mã sau minh họa cách khởi tạo và cập nhật một lưới 2D theo quy tắc Wolfram 30:

import { defGrid2d } from "@thi.ng/arrays";
import { iterate } from "@thi.ng/transducers";
import { rule30 } from "@thi.ng/automata";

const width = 128;
const height = 64;
const grid = defGrid2d(width, height, 0);

// Khởi tạo hàng đầu tiên với ô giữa = 1
grid[0][Math.floor(width / 2)] = 1;

// Tạo chuỗi thế hệ tiếp theo
const generations = iterate(
  (state) => rule30(state, width),
  grid,
  50
);

Kết quả có thể được hiển thị trực tiếp lên <canvas> hoặc xuất ra chuỗi ký tự ASCII — minh họa rõ ràng khả năng kết hợp linh hoạt giữa xử lý logic và đầu ra đa nền tảng.