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:
Vậy còn việc đặt ứng dụng này làm PWA thì sao? Android hiện hỗ trợ việc thêm chúng 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 cũng sẽ sớm làm được điều tương tự. 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 PWA đã được @voluntadpear và những người khác bắt đầu, nhưng @lipis đã độc lập đi trướ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í 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 đặtrolecủ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. Phần README của dự án làm nổi bật mục "bạn cần ký ứng dụng của mình đối với một ứng dụng chính thức. Bộ lọc SmartScreen của Internet Explorer sẽ chặn quá trình tải ứng dụng của bạn xuống. 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ó 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". Việc phân phối một ứng dụng trên cửa hàng ứng dụng yêu cầu 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 nếu nỗ lực và cống hiến đủ. Đối với Excalidraw Desktop, chúng tôi không có mặt.
Tiếp nối Excalidraw Desktop
Cho đến nay, về cơ bản, Excalidraw Desktop là ứng dụng web Excalidraw được đóng gói dưới dạng tệp .asar có thêm cửa sổ About Excalidraw. Giao diện của ứng dụng gần giống với phiên bản web.
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.
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 thiếu sót này và những công việc đang chờ xử lý nhằm tạo ra trải nghiệm thực sự giống như ứng dụng trên tất cả các nền tảng (tuy nhiên, có thể nỗ lực đủ) là một lập luận thuyết phục để chúng tôi xem xét lại khoản đầu tư của mình 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 này đã trở thành thói quen sử dụng, mặc dù thực tế hiện 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. Bộ nhớ đệm này lưu tất cả tài nguyên trong 2 bộ nhớ đệm, một bộ nhớ đệm cho phông chữ và CSS liên quan đến phông chữ, một cho mọi nội dung khác.
Đ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 đượ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.
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ợ 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.
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/png và image/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.
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.
Ghi lại đường liên kết khai báo
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, @dwelle và Joe Medley xem xét.