Ngừng sử dụng Exalidraw Electron và thay bằng phiên bản web

Tìm hiểu lý do dự án Excalidraw quyết định ngừng sử dụng trình bao bọc Electron để chuyển sang phiên bản web.

Đối với dự án Excalidraw, chúng tôi đã quyết định ngừng sử dụng Excalidraw Desktop, một trình bao bọc Electron cho Excalidraw, thay vào đó là phiên bản web mà bạn có thể và luôn có thể tìm thấy tại excalidraw.com. Sau khi phân tích kỹ lưỡng, chúng tôi đã quyết định rằng Ứng dụng web tiến bộ (PWA) là tương lai mà chúng tôi muốn xây dựng. Hãy đọc tiếp để tìm hiểu lý do.

Sự ra đời của Excalidraw Desktop

Ngay sau khi @vjeux tạo phiên bản đầu tiên của Excalidraw vào tháng 1 năm 2020 và đăng blog về phiên bản này, anh đã đề xuất những nội dung sau trong Vấn đề #561:

Sẽ rất tuyệt nếu bạn có thể gói Excalidraw trong Electron (hoặc tương đương) và phát hành dưới dạng ứng dụng [dành riêng cho nền tảng] cho nhiều cửa hàng ứng dụng.

Phản ứng tức thì của @voluntadpear là đề xuất:

Thay vào đó, bạn có thể tạo một PWA. Android hiện hỗ trợ việc thêm các hoạt động này vào Cửa hàng Play dưới dạng Hoạt động đáng tin cậy trên web và hy vọng iOS sẽ sớm làm như vậy. Trên máy tính, Chrome cho phép bạn tải lối tắt trên máy tính xuống một PWA.

Cuối cùng, @vjeux đã đưa ra quyết định đơn giản:

Chúng ta nên làm cả hai việc :)

Mặc dù công việc chuyển đổi phiên bản Excalidraw thành một PWA do @voluntadpear và sau đó là các phiên bản khác bắt đầu, nhưng @lipis đã độc lập tiếp tục và tạo một kho lưu trữ riêng cho Excalidraw Desktop.

Cho đến nay, mục tiêu ban đầu mà @vjeux đặt ra, tức là gửi Excaliburdraw đến nhiều cửa hàng ứng dụng, vẫn chưa đạt được. Thật lòng mà nói, chưa có ai bắt đầu quy trình gửi ứng dụng đến bất kỳ cửa hàng nào. Nhưng tại sao lại như vậy? Trước khi trả lời, hãy cùng xem xét Electron, nền tảng này.

Electron là gì?

Điểm bán hàng độc đáo của Electron là cho phép bạn "tạo ứng dụng máy tính đa nền tảng bằng JavaScript, HTML và CSS". Các ứng dụng được tạo bằng Electron "tương thích với Mac, Windows và Linux", tức là "các ứng dụng Electron tạo và chạy trên 3 nền tảng". Theo trang chủ, những phần khó mà Electron giúp dễ dàng là cập nhật tự động, trình đơn và thông báo cấp hệ thống, báo cáo sự cố, gỡ lỗi và lập hồ sơ, và trình cài đặt Windows. Hóa ra, một số tính năng được hứa hẹn cần được xem xét chi tiết về chữ in nhỏ.

  • Ví dụ: tính năng tự động cập nhật "[hiện] chỉ [được hỗ trợ] trên macOS và Windows. Không có tính năng hỗ trợ tích hợp cho trình cập nhật tự động trên Linux, vì vậy, bạn nên sử dụng trình quản lý gói của bản phân phối để cập nhật ứng dụng".

  • Nhà phát triển có thể tạo trình đơn cấp hệ thống bằng cách gọi Menu.setApplicationMenu(menu). Trên Windows và Linux, trình đơn sẽ được đặt làm trình đơn trên cùng của mỗi cửa sổ, trong khi trên macOS có nhiều trình đơn tiêu chuẩn do hệ thống xác định, chẳng hạn như trình đơn Services (Dịch vụ). Để đặt trình đơn thành trình đơn chuẩn, nhà phát triển nên đặt role của trình đơn cho phù hợp, Electronic sẽ nhận ra và biến các trình đơn đó thành trình đơn chuẩn. Điều này có nghĩa là nhiều mã liên quan đến trình đơn sẽ sử dụng quy trình kiểm tra nền tảng sau: const isMac = process.platform === 'darwin'.

  • Bạn có thể tạo trình cài đặt Windows bằng windows-installer. Tệp README của dự án nhấn mạnh rằng "đối với ứng dụng phát hành công khai, bạn cần ký ứng dụng của mình. Bộ lọc SmartScreen của Internet Explorer sẽ chặn việc tải ứng dụng của bạn xuống và nhiều nhà cung cấp phần mềm diệt vi-rút sẽ coi ứng dụng của bạn là phần mềm độc hại trừ phi bạn có được chứng chỉ hợp lệ" [sic].

Chỉ cần xem xét 3 ví dụ này, bạn có thể thấy rõ rằng Electron còn lâu mới có thể "viết một lần, chạy mọi nơi". Để phân phối ứng dụng trên cửa hàng ứng dụng, bạn cần ký mã, một công nghệ bảo mật để chứng nhận quyền sở hữu ứng dụng. Để đóng gói ứng dụng, bạn cần sử dụng các công cụ như electron-forge và suy nghĩ về nơi lưu trữ các gói cho bản cập nhật ứng dụng. Việc này sẽ trở nên phức tạp tương đối nhanh, đặc biệt là khi mục tiêu thực sự là hỗ trợ đa nền tảng. Tôi muốn lưu ý rằng bạn hoàn toàn có thể tạo ra các ứng dụng Electron tuyệt đẹp bằng đủ nỗ lực và sự tận tâm. Đối với Excalidraw Desktop, chúng tôi không có mặt.

Tiếp nối Excalidraw Desktop

Cho đến nay, Excalidraw Desktop về cơ bản là ứng dụng web Excalidraw được đóng gói dưới dạng tệp .asar với cửa sổ About Excalidraw (Giới thiệu về Excalidraw) được thêm vào. Giao diện của ứng dụng gần giống với phiên bản web.

Ứng dụng Excalidraw cho máy tính chạy trong trình bao bọc Electron.
Excalidraw Desktop gần như không khác gì phiên bản web
Cửa sổ "About" ("Giới thiệu") của Excalidraw Desktop hiển thị phiên bản của trình bao bọc Electron và ứng dụng web.
Trình đơn About Excalibur (Giới thiệu về Excalibur) cung cấp thông tin chi tiết về các phiên bản

Trên macOS, hiện có một trình đơn cấp hệ thống ở đầu ứng dụng, nhưng vì không có thao tác nào trong trình đơn (ngoài Close Window (Đóng cửa sổ) và About Excalidraw (Giới thiệu về Excalidraw)) được liên kết với bất kỳ thao tác nào, nên trình đơn ở trạng thái hiện tại khá vô dụng. Trong khi đó, tất cả thao tác đều có thể được thực hiện thông qua các thanh công cụ Excalidraw thông thường và trình đơn theo bối cảnh.

Thanh trình đơn Excalidraw Desktop trên macOS với mục trình đơn "File" (Tệp), "Close Window" (Đóng cửa sổ) được chọn.
Thanh trình đơn của Excalidraw Desktop trên macOS

Chúng tôi sử dụng electron-builder để hỗ trợ các liên kết loại tệp. Khi nhấp đúp vào tệp .excalidraw, ứng dụng Excalidraw Desktop sẽ mở ra. Phần trích dẫn liên quan của tệp electron-builder.json sẽ có dạng như sau:

{
 
"fileAssociations": [
   
{
     
"ext": "excalidraw",
     
"name": "Excalidraw",
     
"description": "Excalidraw file",
     
"role": "Editor",
     
"mimeType": "application/json"
   
}
 
]
}

Rất tiếc, trong thực tế, việc này không phải lúc nào cũng hoạt động như dự kiến, vì tuỳ thuộc vào loại cài đặt (cho người dùng hiện tại, cho tất cả người dùng), các ứng dụng trên Windows 10 không có quyền liên kết một loại tệp với chính ứng dụng đó.

Những điểm thiếu sót này và công việc đang chờ xử lý để mang lại trải nghiệm thực sự giống ứng dụng trên tất cả nền tảng (một lần nữa, nếu có đủ nỗ lực thì có thể) là lý do chính khiến chúng tôi cân nhắc lại việc đầu tư vào Excalidraw Desktop. Tuy nhiên, lý do lớn hơn là chúng tôi dự đoán rằng đối với trường hợp sử dụng của chúng tôi, chúng tôi không cần tất cả các tính năng mà Electron cung cấp. Bộ tính năng ngày càng phát triển của web phục vụ chúng ta không kém hiệu quả, nếu không muốn nói là hiệu quả hơn.

Cách web phục vụ chúng ta hiện nay và trong tương lai

Ngay cả trong năm 2020, jQuery vẫn rất phổ biến. Đối với nhiều nhà phát triển, việc sử dụng jQuery đã trở thành thói quen, mặc dù ngày nay họ có thể không cần jQuery. Có một tài nguyên tương tự cho Electron, được gọi là Bạn có thể không cần Electron. Hãy để tôi nêu ra lý do chúng tôi cho rằng chúng ta không cần Electron.

Ứng dụng web tiến bộ có thể cài đặt

Excalidraw hiện là một Ứng dụng web tiến bộ có thể cài đặt với một trình chạy dịch vụ và một tệp kê khai ứng dụng web. Trình duyệt này lưu tất cả tài nguyên vào bộ nhớ đệm trong hai bộ nhớ đệm, một bộ nhớ đệm cho phông chữ và CSS liên quan đến phông chữ, còn một bộ nhớ đệm cho mọi thứ khác.

Thẻ Ứng dụng của Công cụ của Chrome cho nhà phát triển hiển thị hai bộ nhớ đệm Excalidraw.
Nội dung bộ nhớ đệm của ứng dụng Excalidraw

Điều này có nghĩa là ứng dụng có thể hoạt động hoàn toàn khi không có mạng. Các trình duyệt dựa trên Chromium trên cả máy tính và thiết bị di động sẽ nhắc người dùng cài đặt ứng dụng. Bạn có thể thấy lời nhắc cài đặt trong ảnh chụp màn hình bên dưới.

Excalidraw nhắc người dùng cài đặt ứng dụng trong Chrome trên macOS.
Hộp thoại cài đặt Excalidraw trong Chrome

Excalidraw được định cấu hình để chạy dưới dạng một ứng dụng độc lập, vì vậy, khi cài đặt ứng dụng này, bạn sẽ có một ứng dụng chạy trong cửa sổ riêng. Ứng dụng này được tích hợp đầy đủ vào giao diện người dùng đa nhiệm của hệ điều hành và có biểu tượng ứng dụng riêng trên màn hình chính, Dock hoặc thanh tác vụ; tuỳ thuộc vào nền tảng mà bạn cài đặt ứng dụng.

Excalidraw chạy trong cửa sổ riêng.
Ứng dụng web tiến bộ Excalidraw trong một cửa sổ độc lập
Biểu tượng Excalidraw trên thanh Dock của macOS.
Biểu tượng Excalidraw trên thanh Dock của macOS

Quyền truy cập vào hệ thống tệp

Excalidraw sử dụng browser-fs-access để truy cập vào hệ thống tệp của hệ điều hành. Trên các trình duyệt hỗ trợ, tính năng này cho phép quy trình làm việc mở→chỉnh sửa→lưu thực sự và lưu nhiều lần thực tế cũng như "lưu dưới dạng", với phương án dự phòng minh bạch cho các trình duyệt khác. Bạn có thể tìm hiểu thêm về tính năng này trong bài đăng trên blog của tôi Đọc và ghi tệp và thư mục bằng thư viện browser-fs-access.

Hỗ trợ tính năng kéo và thả

Bạn có thể kéo và thả tệp vào cửa sổ Excalidraw giống như trong các ứng dụng dành riêng cho nền tảng. Trên trình duyệt hỗ trợ File System Access API (API truy cập hệ thống tệp), bạn có thể chỉnh sửa ngay tệp đã thả và lưu nội dung sửa đổi vào tệp gốc. Điều này rất trực quan đến mức đôi khi bạn quên rằng mình đang xử lý một ứng dụng web.

Quyền truy cập vào bảng nhớ tạm

Excalidraw hoạt động tốt với bảng nhớ tạm của hệ điều hành. Bạn có thể sao chép và dán toàn bộ bản vẽ Excalidraw hoặc chỉ các đối tượng riêng lẻ ở định dạng image/pngimage/svg+xml, cho phép tích hợp dễ dàng với các công cụ dành riêng cho nền tảng khác như Inkscape hoặc các công cụ dựa trên web như SVGOMG.

Trình đơn ngữ cảnh Excalidraw hiển thị các mục trình đơn "sao chép vào bảng nhớ tạm dưới dạng SVG" và "sao chép vào bảng nhớ tạm dưới dạng PNG".
Trình đơn theo bối cảnh của Excalidraw cung cấp các thao tác trên bảng nhớ tạm

Xử lý tệp

Excalidraw đã hỗ trợ File Handling API (API Xử lý tệp) thử nghiệm, nghĩa là bạn có thể nhấp đúp vào tệp .excalidraw trong trình quản lý tệp của hệ điều hành và mở trực tiếp trong ứng dụng Excalidraw, vì Excalidraw đăng ký làm trình xử lý tệp cho tệp .excalidraw trong hệ điều hành.

Bạn có thể chia sẻ bản vẽ Excalidraw bằng đường liên kết. Sau đây là một ví dụ. Trong tương lai, nếu người dùng cài đặt Excalidraw dưới dạng một PWA, thì các đường liên kết đó sẽ không mở trong thẻ trình duyệt mà sẽ khởi chạy một cửa sổ độc lập mới. Tính năng này sẽ hoạt động khi được triển khai nhờ tính năng ghi lại đường liên kết khai báo, một đề xuất mới nhất tại thời điểm viết bài cho một tính năng mới của nền tảng web.

Kết luận

Web đã đi một chặng đường dài, với ngày càng nhiều tính năng xuất hiện trong các trình duyệt mà chỉ vài năm hoặc thậm chí vài tháng trước đây, chúng ta không thể tưởng tượng được trên web và chỉ dành riêng cho các ứng dụng dành riêng cho nền tảng. Excalidraw là công cụ hàng đầu trong những gì có thể làm được trong trình duyệt, trong khi vẫn thừa nhận rằng không phải trình duyệt nào trên mọi nền tảng đều hỗ trợ từng tính năng mà chúng ta sử dụng. Bằng cách đặt cược vào một chiến lược cải tiến tiến bộ, chúng tôi có thể tận hưởng những tính năng mới nhất và tốt nhất bất cứ khi nào có thể, nhưng không bỏ lại bất kỳ ai. Tốt nhất nên xem trên mọi trình duyệt.

Electron đã phục vụ chúng tôi rất tốt, nhưng từ năm 2020 trở đi, chúng tôi có thể sống mà không cần Electron. Ngoài ra, đối với mục tiêu của @vjeux: vì Cửa hàng Play của Android hiện chấp nhận PWA ở định dạng vùng chứa có tên là Hoạt động web đáng tin cậy và vì Cửa hàng Microsoft hỗ trợ PWA, nên bạn có thể mong đợi Excalidraw sẽ có mặt trong các cửa hàng này trong tương lai không xa. Trong khi đó, bạn luôn có thể sử dụng và cài đặt Excalidraw trong và từ trình duyệt.

Lời cảm ơn

Bài viết này đã được @lipis, @dwelleJoe Medley xem xét.