Tìm hiểu lý do dự án Excalidraw quyết định ngừng sử dụng trình bao bọc electron và thay vào đó là phiên bản web.
Trong 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.
Cách Excalidraw Desktop ra đời
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ề nó, anh ấy đã đề xuất những nội dung sau trong Vấn đề #561:
Tôi rất mong bạn gói Excalidraw trong electron (hoặc tương đương) và phát hành dưới dạng một ứng dụng [dành riêng cho nền tảng] lên nhiều cửa hàng ứng dụng.
Phản ứng ngay lập tức của @voluntadpear là đề xuất:
Còn việc chuyển sang sử dụng PWA thì sao? 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àn hình xuống PWA.
Cuối cùng, @vjeux đưa ra quyết định rất đơn giản:
Chúng ta nên làm cả hai việc :)
Trong quá trình chuyển đổi phiên bản của Excalidraw thành PWA đã được bắt đầu bởi @voluntadpear và sau đó là những người khác, @lipis đã tiếp tục một cách độc lập và tạo một kho lưu trữ riêng cho Excalidraw Desktop.
Cho đến nay, vẫn chưa đạt được mục tiêu ban đầu mà @vjeux đặt ra, tức là gửi Excalidraw đến nhiều cửa hàng ứng dụng. Nói thật là chưa có ai bắt đầu quy trình gửi báo cáo đến bất kỳ cửa hàng nào. Nhưng tại sao lại như vậy? Trước khi tôi trả lời, hãy tìm hiểu về electron.
electron là gì?
Điểm bán hàng độc nhất của Electron là ứng dụng này cho phép bạn "tạo các ứng dụng dành cho máy tính trên nhiều nền tảng bằng JavaScript, HTML và CSS". Ứng dụng tạo bằng electron "tương thích với Mac, Windows và Linux", tức là "Các ứng dụng Electrictron xây dựng và chạy trên ba nền tảng". Theo trang chủ, những phần khó khăn mà electron giúp tạo ra 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ơ, trình cài đặt Windows. Hoá ra, một số tính năng đã hứa hẹn cần xem xét chi tiết bản in nhỏ.
Ví dụ: tính năng tự động cập nhật "chỉ [hiện] chỉ [được hỗ trợ] trên macOS và Windows. Trình cập nhật tự động trên Linux không hỗ trợ tích hợp sẵn. 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 từng cửa sổ, còn 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ụ). Để chuyển các trình đơn thành trình đơn chuẩn, nhà phát triển nên đặtrolecủa trình đơn tương ứng. Khi đó, electron sẽ nhận ra và chuyển các trình đơn này thành trình đơn chuẩn. Tức 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ể cài đặt trình cài đặt Windows bằng windows-installer. Phần README của dự án sẽ nêu bật rằng "đối với một ứng dụng chính thức, bạn cần phải ký ứng dụng của mình. Bộ lọc SmartScreen của Internet Explorer sẽ chặn ứng dụng của bạn tải xuống và nhiều nhà cung cấp dịch vụ chống vi-rút sẽ coi ứng dụng của bạn là phần mềm độc hại trừ khi bạn có được chứng chỉ hợp lệ" [sic].
Chỉ cần xem xét 3 ví dụ này là rõ ràng rằng electron không phải là "viết một lần, chạy ở mọi nơi". Để phân phối ứng dụng trên các cửa hàng ứng dụng, bạn phải có ký mã, một công nghệ bảo mật để chứng nhận quyền sở hữu ứng dụng. Việc đóng gói ứng dụng đòi hỏi phải sử dụng các công cụ như electron-forge và suy nghĩ về nơi lưu trữ gói để cập nhật ứng dụng. Giải pháp này trở nên phức tạp tương đối nhanh chóng, đặc biệt là khi mục tiêu thực sự là hỗ trợ nhiều 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 không cần tốn nhiều công sức và tâm huyết. Đối với Excalidraw Desktop, chúng tôi không có mặt ở đó.
Nơi Excalidraw Desktop đã dừng lại
Cho đến nay, Excalidraw Desktop về cơ bản là ứng dụng web Excalidraw đóng gói dưới dạng tệp .asar có thêm cửa sổ Giới thiệu về 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 trên trình đơn – ngoài Đóng cửa sổ và Giới thiệu về Excalidraw, nên trình đơn ở trạng thái hiện tại khá vô dụng. Trong khi đó, bạn có thể thực hiện tất cả các thao tác thông qua thanh công cụ Excalidraw thông thường và trình đơn theo bối cảnh.
Chúng tôi dùng trình tạo điện tử để hỗ trợ mối liên kết loại tệp.
Bằng cách nhấp đúp vào một tệp .excalidraw, tốt nhất là ứ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"
}
]
}
Thật không may là trên 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 (đối với người dùng hiện tại, đối với 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 với chính loại tệp đó.
Những thiếu sót này và nhiệm vụ đang chờ xử lý để tạo ra trải nghiệm thực sự giống ứng dụng trên mọi nền tảng (xin nhắc lại, nếu có thể nỗ lực hết mình), chúng là một lập luận thuyết phục để chúng tôi xem xét lại việc đầu tư vào Excalidraw Desktop. Tuy nhiên, cách lập luận lớn hơn cho chúng tôi là chúng tôi thấy trước rằng trong trường hợp sử dụng của mình, chúng tôi không cần tất cả các tính năng mà electron cung cấp. Tập hợp các chức năng đã phát triển và ngày càng phát triển của web phục vụ chúng tôi cũng tốt, nếu không muốn nói là tốt hơn.
Cách web phục vụ chúng ta hôm nay và trong tương lai
Ngay cả vào năm 2020, jQuery vẫn vô cùng 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 đến jQuery. Ngoài ra, cũng có một tài nguyên tương tự cho Electrictron, có tên là Bạn có thể không cần đến electron. Hãy để tôi giải thích lý do tại sao chúng tôi cho rằng chúng ta không cần tới 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 phân tích cú pháp lưu mọi tài nguyên trong 2 bộ nhớ đệm, một cho phông chữ và CSS liên quan đến phông chữ và một cho mọi nội dung khác.
Điều này có nghĩa là ứng dụng hoàn toàn hỗ trợ chế độ ngoại tuyến và có thể chạy mà không cần kết nối 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 đều 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 dưới đây.
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, bạn sẽ có một ứng dụng chạy trong cửa sổ riêng. API này được tích hợp hoàn toàn 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, thanh Dock hoặc thanh tác vụ; tuỳ thuộc vào nền tảng nơi bạn cài đặt.
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ợ, điều này cho phép thực sự mở→chỉnh sửa→lưu quy trình công việc và tiết kiệm quá mức thực tế và "lưu dưới dạng", với tính năng 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 cũng như 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 tệp bị thả ngay lập tức và lưu nội dung sửa đổi vào tệp gốc. Việc này quá 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 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ụ khác dành riêng cho nền tảng như Inkscape hoặc các công cụ dựa trên web như SVGOMG.
Xử lý tệp
Excalidraw đã hỗ trợ API Xử lý tệp thử nghiệm, nghĩa là bạn có thể nhấp đúp vào các 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 các tệp .excalidraw trong hệ điều hành.
Lấy đường liên kết khai báo
Bạn có thể chia sẻ bản vẽ exalidraw bằng liên kết. Sau đây là ví dụ. Trong tương lai, nếu mọi người đã cài đặt Excalidraw dưới dạng 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. Đang chờ triển khai, quá trình này sẽ hoạt động nhờ việc thu thập đường liên kết theo cách khai báo, một đề xuất tiên tiến cho một tính năng mới của nền tảng web tại thời điểm viết bài.
Kết luận
Web đã trải qua một chặng đường phát triển dài, ngày càng nhiều tính năng xuất hiện trên các trình duyệt mà chỉ cách đây vài năm hoặc thậm chí vài tháng trước đây là chưa thể hình dung được trên web và dành riêng cho các ứng dụng dành riêng cho nền tảng. Excalidraw đi đầu trong việc tạo ra những gì có thể thực hiện trong trình duyệt, đồng thời xin thừa nhận rằng không phải tất cả các trình duyệt trên mọi nền tảng đều hỗ trợ từng tính năng mà chúng tôi sử dụng. Bằng cách đặt cược vào chiến lược nâng cao tiến bộ, chúng tôi tận hưởng những gì mới nhất và tốt nhất bất cứ khi nào có thể mà không bỏ sót bất kỳ ai. Xem tốt nhất trong mọi trình duyệt.
electron đã phục vụ chúng tôi rất tốt, nhưng vào năm 2020 và xa hơn nữa, chúng ta có thể sống mà không có công nghệ này. Ồ và đối với mục tiêu đó của @vjeux: vì Cửa hàng Android Play hiện chấp nhận PWA ở định dạng vùng chứa có tên là Hoạt động đáng tin cậy trên web và vì Microsoft Store cũng hỗ trợ PWA, nên bạn có thể sẽ thấy Excalidraw trong các cửa hàng này trong tương lai không xa. Trong thời gian chờ đợi, bạn luôn có thể sử dụng và cài đặt Excalidraw trong và từ trình duyệt.
Xác nhận
Bài viết này đã được @lipis, @dwelle và Joe Medley đánh giá.