Tìm hiểu lý do dự án Excalidraw quyết định ngừng sử dụng trình bao bọc Electron để thay thế cho web .
Trong dự án Excalidraw, chúng tôi đã quyết định không dùng Excalidraw Desktop, một Trình bao bọc Electron cho Excalidraw, hỗ trợ 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 dựa trên. Hãy đọc tiếp để tìm hiểu lý do.
Cách sự ra đời của Excalidraw Desktop
Ngay sau khi @vjeux tạo phiên bản ban đầu của Excalidraw Tháng 1 năm 2020 và đăng trên blog của mình, anh ấy đề xuất những nội dung sau đây trong Vấn đề #561:
Rất nên bao bọc Excalidraw trong Electron (hoặc tương đương) và xuất bản nó dưới dạng một [dành riêng cho nền tảng] vào 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 đặt ứng dụng này làm PWA thì sao? Android hiện hỗ trợ việc thêm các ứng dụ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 cũng sẽ sớm làm được như vậy. Trên máy tính, Chrome giúp bạn tải lối tắt trên màn hình xuống PWA.
Cuối cùng, quyết định mà @vjeux đưa ra 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 Excalidraw thành PWA đã bắt đầu bằng @voluntadpear và sau đó là những người khác, @lipis một cách độc lập đã tiến hành và tạo một kho lưu trữ riêng dành cho Excalidraw Desktop.
Cho đến nay, mục tiêu ban đầu do @vjeux đặt ra, tức là gửi Chưa tiếp cận được các cửa hàng ứng dụng. Sự thật là chưa có ai bắt đầu quy trình gửi thông tin đế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 hãy nhìn vào electron, nền tảng.
electron là gì?
Điểm bán hàng duy nhất của Electron là công cụ này cho phép bạn "xây dựng ứng dụng dành cho máy tính trên nhiều nền tảng với JavaScript, HTML và CSS". Ứng dụng được xây dựng bằng Electron được "tương thích với Mac, Windows và Linux", tức là "Các ứng dụng điện tử xây dựng và chạy trên ba thiết bị nền tảng". Theo trang chủ này, những phần khó mà Electron có thể làm là dễ dàng 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à phân tích, và Trình cài đặt Windows. Hoá ra, một vài các tính năng đã hứa hẹn cần xem xét chi tiết về bản 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. Có không có hỗ trợ tích hợp sẵn cho trình cập nhật tự động trên Linux, do đó bạn nên sử dụng trình quản lý gói để cập nhật ứng dụng của bạn".
Các 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 này sẽ được đặt thành trình đơn trên cùng của từng cửa sổ, trong khi trên macOS, có do hệ thống xác định, chẳng hạn như Dịch vụ . Để biến trình đơn của mình thành trình đơn chuẩn, nhà phát triển nên đặtrolecủa trình đơn sao cho phù hợp, và Electron sẽ nhận ra chúng và biến chúng trở thành trình đơn tiêu chuẩn. Điều này có nghĩa là rất nhiều mã liên quan đến trình đơn sẽ sử dụng bước 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. README của dự án nhấn mạnh rằng "đối với ứng dụng chính thức, bạn cần ký vào đơn đăng ký của mình. của Internet Explorer Bộ lọc SmartScreen sẽ chặn quá trình 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ó chứng chỉ hợp lệ" [sic].
Chỉ cần nhìn vào ba ví dụ này, rõ ràng là electron khác không 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 cho chứng nhận quyền sở hữu ứng dụng. Việc đóng gói một ứng dụng đòi hỏi phải sử dụng những công cụ như electron-forge và suy nghĩ về nơi cần đến các gói lưu trữ trên máy chủ để cập nhật ứng dụng. Quá trình này 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ợ nhiều nền tảng. Xin lưu ý rằng hoàn toàn bạn có thể tạo Ứng dụng điện tử với đủ công sức và tâm huyết. Đối với Excalidraw Desktop, chúng tôi không có ở đó.
Vị trí bị tắt trên màn hình của Excalidraw
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 có cửa sổ About Excalidraw được thêm vào. Giao diện
và giao diện của ứng dụng gần giống với phiên bản web.
Trên macOS, giờ đây đã có một trình đơn cấp hệ thống ở đầu ứng dụng, nhưng vì không có trình đơn nào các thao tác—ngoài Đóng cửa sổ và Giới thiệu về Excalidraw—được kết nối với bất kỳ thứ gì, trình đơn là, trong trạng thái hiện tại, khá vô dụng. Trong khi đó, tất cả các thao tác đều có thể được thực hiện 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 sử dụng electron-builder, hỗ trợ
mối liên kết loại tệp.
Bằng cách nhấp đúp vào tệp .excalidraw, lý tưởng là ứng dụng Excalidraw Desktop sẽ mở ra. Chiến lược phát hành đĩa đơn
phần trích dẫn có 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, trong thực tế, điều này không phải lúc nào cũng hoạt động như dự kiến vì còn phụ 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 sẽ không có quyền liên kết loại tệp với chính họ.
Những thiếu sót này và những cải tiến đang chờ xử lý để mang đến trải nghiệm thực sự giống như ứng dụng trên tất cả nền tảng (và một lần nữa, có thể là một lý do đủ nỗ lực) là một lập luận mạnh mẽ để chúng tôi xem xét lại khoản đầu tư vào Excalidraw Desktop. Mặc dù vậy, lý do khiến chúng ta tranh cãi lớn hơn là chúng ta đã thấy trước rằng đối với 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. Nhóm phát triển và vẫn đang phát triển khả năng của web cũng phục vụ chúng tôi tốt như nhau, hoặc không tốt hơn.
Cách web phục vụ chúng ta ở hiện tại và trong tương lai
Ngay cả trong năm 2020, jQuery vẫn vô cùng phổ biến. Dành cho nhiều người nhà phát triển đã trở thành thói quen sử dụng tính năng này, mặc dù thực tế hiện nay chúng có thể không cần jQuery. Cũng có một tài nguyên tương tự cho Electron, được gọi một cách phù hợp là Bạn có thể không cần sự kiện điện tử. Để tôi nêu ra lý do chúng tôi cho rằng 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 service worker và tệp kê khai ứng dụng web. Nó lưu tất cả tài nguyên của mình vào hai bộ nhớ đệm, một cho phông chữ và CSS liên quan đến phông chữ và một cho mọi thứ khác.
Điều này có nghĩa là ứng dụng hoàn toàn có khả năng hoạt động khi không có mạng 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 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 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 nó, bạn sẽ nhận được một ứng dụng chạy trong cửa sổ riêng. Nó đượ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 mà bạn cài đặt nó.
Quyền truy cập vào hệ thống tệp
Excalidraw sử dụng browser-fs-access cho 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 mở→chỉnh sửa→ lưu quy trình làm việc và lưu quá mức thực tế và "lưu dưới dạng", với 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), đây là một trình duyệt đã bỏ có thể chỉnh sửa được ngay và nội dung sửa đổi sẽ được lưu vào tệp gốc. Như vậy 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. Toàn bộ bản vẽ khai thác hoặc chỉ có
có thể sao chép và dán từng đối tượng ở định dạng image/png và image/svg+xml, cho phép
dễ dàng tích hợp với các công cụ khác dành riêng cho nền tảng như Inkscape hoặc dựa trên nền tảng web
như SVGOMG.
Xử lý tệp
Excalidraw đã hỗ trợ API Xử lý tệp thử nghiệm,
tức 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à
sẽ mở trực tiếp trong ứng dụng Excalidraw vì Excalidraw đăng ký là trình xử lý tệp cho .excalidraw
trong hệ điều hành.
Ghi liên kết khai báo
Bạn có thể chia sẻ bản vẽ khai thác bằng đường liên kết. Dưới đây là một ví dụ. Trong tương lai, nếu người dùng đã cài đặt Excalidraw làm PWA, các đường liên kết đó sẽ không mở trong thẻ trình duyệt mà sẽ khởi chạy cửa sổ độc lập mới. Trong khi chờ triển khai, điều này sẽ hoạt động nhờ chụp liên kết khai báo, tại thời điểm viết, đề xuất vượt trội cho tính năng nền tảng web mới.
Kết luận
Web đã trải qua một chặng đường phát triển dài, với ngày càng nhiều tính năng hạ cánh trong các trình duyệt mà chỉ có một vài nhiều năm hoặc thậm chí vài tháng trước đây là điều không thể tưởng tượng 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 có thể thực hiện trong trình duyệt, đồng thời thừa nhận rằng không phải tất cả các trình duyệt trên tất cả 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 một chiến lược chiến lược nâng cao, chúng tôi tận hưởng phiên bản mới nhất và hiệu quả nhất bất cứ khi nào có thể, mà không để bất kỳ ai phía sau. Xem tốt nhất trên bất kỳ trình duyệt nào.
Electron đã phục vụ chúng tôi tốt, nhưng trong năm 2020 và xa hơn nữa, chúng ta có thể sống mà không có dịch vụ này. Ồ, và đối với điều đó mục tiêu của @vjeux: vì Cửa hàng Play trên Android hiện chấp nhận PWA trong một có tên là Hoạt động đáng tin cậy trên web và vì Microsoft Store hỗ trợ PWA, cũng có thể sớm triển khai Excalidraw tại các cửa hàng này trong tương lai không xa. Trong thời gian chờ đợi, bạn có thể luôn 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 do @lipis xem xét, @dwelle và Joe Medley.