Cùng Một Bản Đồ, Ba Cách: SVG, Rust và Flutter

EVnSteven đã đạt đến một trạng thái ổn định. Nền tảng này ổn định và không cần nhiều bảo trì, điều mà chúng tôi mong muốn khi bắt đầu: một hệ thống nhỏ hoạt động lặng lẽ. Điều đó để lại một chút không gian để thử nghiệm, và cũng đã cho các nhà sáng lập của chúng tôi thời gian để bắt đầu một vài dự án khác, mà bạn sẽ tìm thấy ở cuối bài.

Vì vậy, chúng tôi đã tiến hành một thí nghiệm. Chúng tôi lấy bản đồ trên trang chủ và xây dựng lại nó hai lần: một lần bằng Rust biên dịch sang WebAssembly, và một lần bằng Flutter. Bài viết này đặt cả ba phiên bản trên một trang và so sánh chúng.

1. Phiên bản gốc: SVG, CSS và một chút JavaScript

Nói một cách đơn giản: đây là bản đồ trên trang chủ của chúng tôi. Nó được xây dựng theo cách mà phần còn lại của một trang web được xây dựng: một hình vẽ được tạo thành từ các hình dạng mà trình duyệt của bạn đã biết cách hiển thị và tạo hoạt ảnh. Đây là phiên bản đơn giản nhất trong ba phiên bản, và cũng là phiên bản mà hầu hết khách truy cập nhìn thấy.

Đây là một hình vẽ SVG duy nhất. Trình duyệt chạy hầu hết các hoạt ảnh từ CSS, và một đoạn script nhỏ xử lý phần còn lại.

Ưu điểm: không cần bước xây dựng, vì vậy một mẫu Hugo là đủ. Nó là vector, nên giữ được độ sắc nét ở mọi kích thước. Tất cả 44 điểm có thể được truy cập bằng bàn phím, mỗi điểm có nhãn cho trình đọc màn hình. Và vài từ của nó đã được dịch sang tất cả các ngôn ngữ của chúng tôi.

Chi phí là trọng lượng trên trang. Mã đánh dấu của bản đồ khoảng 107 KB (khoảng 30 KB khi nén), và khi chạy có khoảng 670 phần tử và khoảng 200 hoạt ảnh CSS. Logic cũng khó kiểm tra: thời gian được đặt trong các khung hình chính CSS và một đoạn script trong trang, vì vậy cách kiểm tra duy nhất là nhìn vào nó.

2. Rust và WebAssembly

Nói một cách đơn giản: Rust là một ngôn ngữ lập trình nổi tiếng với tốc độ nhanh và khả năng phát hiện nhiều lỗi trước khi chương trình chạy. Ở đây, chúng tôi đã viết “bộ não” của bản đồ bằng Rust, đóng gói nó thành một dạng nhỏ gọn mà trình duyệt có thể chạy được (gọi là WebAssembly), và để nó tự vẽ toàn bộ bản đồ, giống như một họa sĩ vẽ lại một bức tranh nhiều lần mỗi giây. Với bạn, nó trông vẫn như cũ.

Toàn bộ bản đồ được vẽ trên một canvas duy nhất bởi Rust đã được biên dịch sang WebAssembly. Mã Rust kiểm soát toàn bộ hành vi của bản đồ và vẽ lại mọi thứ mỗi khung hình.

Phần chúng tôi thích là logic hoàn toàn là Rust thuần túy, không có gì liên quan đến trình duyệt: các phép toán cho vị trí các đối tượng và thời điểm chúng thay đổi, cùng với bộ phân tích cú pháp đọc đường viền đất đai. Nó có 13 bài kiểm tra chạy trong tích tắc, và nếu thời gian vòng lặp sai, một bài kiểm tra sẽ thất bại thay vì ai đó nhận thấy nó trông kỳ lạ. Khoảng một phần ba trong số khoảng 1.070 dòng Rust là phần lõi được kiểm tra đó (với các bài kiểm tra của nó); phần còn lại vẽ lên canvas và xử lý các sự kiện chuột.

Trang cuối cùng rất nhẹ: chỉ một phần tử canvas. Nhưng việc tải xuống lại lớn hơn. Mô-đun đã biên dịch khoảng 254 KB (khoảng 92 KB khi nén) cộng thêm khoảng 28 KB mã JavaScript kết nối mà công cụ xây dựng tạo ra. Và có những chi phí mà chúng tôi cảm nhận khi làm việc với nó:

• Một chuỗi công cụ. Việc xây dựng cần Rust, mục tiêu WebAssembly và một công cụ dòng lệnh có phiên bản phải khớp chính xác với thư viện. Kịch bản xây dựng của chúng tôi chạy các bài kiểm tra trước và dừng lại nếu có bài nào thất bại.
• Không có truy cập bàn phím hoặc trình đọc màn hình đến từng thành phố riêng lẻ. Một canvas là một bức tranh. Phiên bản SVG với 44 điểm có thể lấy nét đã biến mất.
• Chỉ tiếng Anh. Các nhãn được viết trực tiếp vào chương trình.
• Làm mờ. Viền bóng mềm sử dụng bộ lọc làm mờ canvas, không phải trình duyệt nào cũng hỗ trợ. Chúng tôi chưa thử nghiệm Safari, nơi viền có thể hiển thị cứng hơn.

3. Flutter

Nói một cách đơn giản: Flutter là một bộ công cụ từ Google để xây dựng các ứng dụng chạy trên điện thoại, máy tính và web từ một bộ mã nguồn duy nhất. Nó không sử dụng các thành phần xây dựng riêng của trang web. Nó tự vẽ mọi thứ. Ở đây bản đồ là một ứng dụng nhỏ được hiển thị bên trong trang này, cùng bộ công cụ cung cấp sức mạnh cho máy tính sạc của chúng tôi.

Nó vẽ bản đồ bằng một họa sĩ tùy chỉnh, và được hiển thị ở đây trong một khung. Flutter cũng có thể xây dựng ứng dụng điện thoại và máy tính để bàn từ cùng một mã nguồn, đó là lập luận chính của nó: viết bản đồ một lần, chạy nó ở nhiều nơi.

Nó có cùng logic như bản đồ Rust, được chuyển sang Dart, với 11 bài kiểm tra. Khoảng 1.100 dòng bao gồm cả các bài kiểm tra. Flutter gửi từng thành phố đến trình đọc màn hình dưới dạng một nút được gán nhãn, điều mà phiên bản canvas không có (chúng tôi chưa kiểm tra nó hoạt động tốt như thế nào với trình đọc màn hình thực tế). Đây cũng là bản tải xuống lớn nhất: ứng dụng khoảng 1,8 MB (khoảng 535 KB khi nén). Bộ máy vẽ của Flutter là một bản tải xuống bổ sung, nhưng trang web đã chia sẻ một bản sao với máy tính, vì vậy khách truy cập đã mở máy tính thì không phải tải lại. Văn bản của nó được đặt trong phông chữ của trang web, Merriweather, mà trình duyệt tải về khi chạy.

Những gì chúng tôi tìm thấy

Một lưu ý nữa về tốc độ. Trong kiểm tra của chúng tôi, bản đồ SVG và bản đồ Rust đều chạy ở tần số làm mới màn hình (khoảng 120 khung hình mỗi giây trên màn hình thử nghiệm), vì vậy tốc độ khung hình không phân biệt được chúng. Chúng tôi không đo tốc độ khung hình của Flutter, và cũng không đo mức sử dụng pin hay CPU, nên không thể nói cái nào nhẹ hơn trên điện thoại.

Những điều làm chúng tôi ngạc nhiên

Một số chi tiết dễ bị sai. Các bản sao đầu tiên của chúng tôi vẽ chìa khóa và đồng hồ ở một tỷ lệ cố định trên bản đồ, vì vậy chúng co lại trên màn hình nhỏ và trông rất nhỏ so với bản gốc. Bản gốc định kích thước chúng theo đơn vị phông chữ riêng của trang (rem, thay đổi theo chiều rộng màn hình). Các bản sao bây giờ đọc kích thước đó từ trang. Đồng hồ cũng khác nhau: kim của bản gốc di chuyển theo bước 15 phút, trong khi ở các phiên bản Rust và Flutter chúng quay liên tục.

Múi giờ không được tích hợp sẵn. Cả Rust biên dịch sang WebAssembly và Dart đều không mang theo cơ sở dữ liệu múi giờ biết “Asia/Dubai”. Cả hai đều hỏi trình duyệt thay vào đó, thông qua dịch vụ Intl tích hợp sẵn, dịch vụ này cũng xử lý đúng giờ tiết kiệm ánh sáng ban ngày.

Cả ba cùng chia sẻ đầu vào. Bản đồ Rust và Flutter đọc danh sách thành phố và đường viền đất liền từ trang mà chúng đang ở, cùng dữ liệu mà bản đồ SVG sử dụng. Thay đổi một thành phố, cả ba đều thay đổi. Điều này cũng có nghĩa là các bản đồ chỉ có thể chạy trên một trang cung cấp dữ liệu cho chúng.

Flutter web nhớ lại. Flutter web cài đặt bộ nhớ đệm riêng, vì vậy sau khi xây dựng lại, chúng tôi vẫn thấy phiên bản cũ cho đến khi xóa bộ nhớ đệm đó.

Kết luận của chúng tôi

Bản đồ SVG vẫn ở trên trang chủ. Với một bản vẽ cỡ này, nó nhẹ nhất, dễ tiếp cận, đã được dịch, và không cần gì để xây dựng. Rust là lựa chọn thú vị hơn đứng thứ hai: nếu chúng ta cần logic của bản đồ được chứng minh là đúng, hoặc cần thực hiện tính toán nặng trong trình duyệt, một lõi Rust đã được kiểm thử là cách làm tốt. Flutter có ý nghĩa nếu bản đồ cần sống bên trong một ứng dụng Flutter.

Một thí nghiệm không cần thay đổi sản phẩm để đáng thực hiện. Chúng tôi đã có được một bức tranh rõ ràng hơn về chi phí của từng cách tiếp cận, một mô tả đã được kiểm thử về cách bản đồ hoạt động, và một trang nơi bạn có thể tự mình xem cả ba.

Những gì các nhà sáng lập của chúng tôi đang xây dựng tiếp theo

Một nền tảng ổn định để dành thời gian cho những ý tưởng khác. Bên cạnh EVnSteven, các nhà sáng lập của chúng tôi đang làm việc trên những dự án sau:

Dịch vụ gọi xe, sắp ra mắt Kimem ↗ (opens in a new tab) Một dịch vụ gọi xe cho Bahir Dar, Ethiopia, từ nhà sáng lập Mekonnen Alemu. Người đi xe sẽ thấy ước tính giá cước trước khi đặt, theo dõi tài xế gần nhất trên bản đồ, và thanh toán tiền cước theo đồng hồ bằng tiền mặt khi kết thúc chuyến đi.

Phi lợi nhuận, mã nguồn mở StrayCats ↗ (opens in a new tab) Một dự án từ David nhằm giúp những người quan tâm đến mèo đường phố, mèo hoang, hoặc bất kỳ con mèo nào, ngay cả khi con mèo đó lại là một con chó. Dự án vẫn đang ở giai đoạn ý tưởng, chưa có ứng dụng, và David rất mong nhận được ý tưởng và phản hồi của bạn. Dành riêng cho Saibo, 2010–2026.

Theo dõi tiền mặt, miễn phí, sắp ra mắt Effectivo ↗ (opens in a new tab) Kế toán không hoàn hảo với một điểm nhấn, dành cho những người sử dụng tiền mặt. Ghi lại một giao dịch mua chỉ với vài thao tác, đếm số tiền trong ví, và nhìn lại những gì đáng giá. Điểm nhấn là mọi người tiếp tục sử dụng tiền mặt sẽ giúp giữ nó tồn tại cho tất cả mọi người khác. Miễn phí và không quảng cáo, sắp có trên Android và iPhone, với bản beta và bản demo web đang chạy ngay bây giờ.