bởi Andrew Walsh
Là một khuôn khổ để phát triển các ứng dụng dành cho máy tính để bàn, Electron có rất nhiều thứ để cung cấp. Nó cấp toàn quyền truy cập vào API của Node và hệ sinh thái. Nó triển khai trên tất cả các hệ điều hành chính (với một cơ sở mã duy nhất). Và với kiến trúc dựa trên web, bạn có thể sử dụng các tính năng mới nhất của CSS để tạo giao diện người dùng nâng cao.
Có rất nhiều bài viết đề cập đến việc thiết lập và chạy với Electron, nhưng ít bài viết hơn dành riêng cho việc sử dụng SQLite hoặc cách thực hiện đa luồng. Chúng ta sẽ xem xét cách sử dụng Electron để xây dựng các ứng dụng xử lý lượng dữ liệu lớn hoặc chạy nhiều tác vụ.
Đặc biệt, chúng tôi sẽ bao gồm:
- Cách thức hoạt động của Electron (tóm tắt) và cách cấu trúc của nó ảnh hưởng đến những gì chúng ta có thể làm
- đa luồng
- Sử dụng cơ sở dữ liệu cục bộ như SQLite hoặc ghi vào bất kỳ tệp nào trong ứng dụng Electron
- mô-đun bản địa
- Một vài vấn đề cần lưu ý
- Đóng gói một ứng dụng bằng các mô-đun gốc
Electron hoạt động như thế nào – rút gọn
Cần lặp lại các nguyên tắc chính đằng sau kiến trúc của Electron. Một ứng dụng Electron bao gồm ít nhất hai quy trình. Chuỗi chính là lối vào ứng dụng của bạn và thực hiện tất cả công việc cần thiết để hiển thị (hoặc các quy trình) trình kết xuất của bạn cho người dùng của bạn. Chỉ có thể có một phiên bản của quy trình chính.
Các quy trình kết xuất sử dụng Chromium để kết xuất ứng dụng của bạn. Giống như mỗi tab chạy trong quy trình riêng của nó, mỗi trình kết xuất cũng vậy. Chúng được tải bằng phương thức loadURL của hàm tạo BrowserWindow, phương thức này cần trỏ đến một tệp HTML cục bộ hoặc từ xa. Điều đó có nghĩa là cách duy nhất để bắt đầu quy trình kết xuất đồ họa là sử dụng tệp HTML làm mục nhập.
Hãy cẩn thận về kiến trúc của Electron
Sự đơn giản của Electron là một trong những tài sản lớn nhất của nó. Quy trình chính của bạn thực hiện bất kỳ cấu hình cần thiết nào, sau đó chuyển tệp HTML hoặc URL tới quy trình kết xuất. Tệp này có thể làm bất cứ điều gì mà một ứng dụng web thông thường có thể làm được — và bạn có thể bắt đầu từ đó.
Nhưng thực tế là chỉ có thể có một quy trình chính nên không rõ ràng về cách triển khai đa luồng. Tài liệu của Electron ngụ ý rằng các quy trình kết xuất được thiết kế nghiêm ngặt cho nhiệm vụ kết xuất giao diện người dùng (như chúng ta sẽ thấy, điều này không đúng).
Điều quan trọng cần biết là thực hiện bất kỳ thao tác tính toán chuyên sâu nào trên quy trình chính sẽ làm chậm (hoặc đóng băng) quy trình kết xuất của bạn. Điều quan trọng là bất kỳ công việc tính toán chuyên sâu nào đều được chuyển ra khỏi luồng chính. Tốt nhất là bạn chỉ nên giao nhiệm vụ làm mọi thứ cần thiết để bắt đầu quy trình kết xuất đồ họa của mình. Vì chúng ta không thể thực hiện công việc chuyên sâu trên cùng một quy trình kết xuất đồ họa đang kết xuất giao diện người dùng của ứng dụng (vì điều này cũng sẽ ảnh hưởng đến giao diện người dùng), nên chúng ta cần một cách tiếp cận khác.
đa luồng
Có ba cách tiếp cận chung để đa luồng trong Electron:
- Sử dụng web worker
- Fork các quy trình mới để chạy các tác vụ
- Chạy các quy trình kết xuất (ẩn) dưới dạng công nhân
nhân viên web
Vì Electron được xây dựng dựa trên Chromium nên mọi thứ có thể được thực hiện trên trình duyệt đều có thể được thực hiện trong quy trình kết xuất đồ họa. Điều này có nghĩa là bạn có thể sử dụng trình xử lý web để chạy các tác vụ chuyên sâu trong các chuỗi riêng biệt. Ưu điểm của phương pháp này là đơn giản và duy trì đẳng cấu với một ứng dụng web.
Tuy nhiên, có một cảnh báo rất lớn — bạn không thể sử dụng các mô-đun gốc. Về mặt kỹ thuật, bạn có thể, nhưng làm như vậy sẽ khiến ứng dụng của bạn gặp sự cố. Đây là một vấn đề quan trọng, vì bất kỳ ứng dụng nào cần đa luồng cũng có thể cần sử dụng các mô-đun gốc (chẳng hạn như nút-sqlite3).
Forking các quy trình mới
Electron sử dụng Node làm thời gian chạy, nghĩa là bạn có toàn quyền truy cập vào các mô-đun tích hợp như cụm. Các quy trình mới có thể được rẽ nhánh để chạy các tác vụ, loại bỏ các công việc chuyên sâu khỏi luồng chính.
Vấn đề chính là, không giống như các quy trình kết xuất, các quy trình con không thể sử dụng các phương thức từ thư viện Electron. Điều này buộc bạn phải duy trì một kênh liên lạc với quy trình chính qua IPC. Các quy trình kết xuất có thể sử dụng mô-đun từ xa để yêu cầu quy trình chính thực hiện các tác vụ chỉ dành cho chính mà không cần bước bổ sung này.
Một vấn đề khác là nếu bạn đang sử dụng các mô-đun ES hoặc các tính năng TC39 của JavaScript, thì bạn cần đảm bảo rằng bạn chạy các phiên bản tập lệnh đã biên dịch của mình. Bạn cũng sẽ cần đưa những thứ này vào ứng dụng đóng gói của mình. Sự cố này ảnh hưởng đến bất kỳ ứng dụng Node nào phân nhánh các quy trình, nhưng nó thêm một lớp phức tạp khác vào quy trình xây dựng của bạn. Nó cũng có thể trở nên phức tạp khi cân bằng nhu cầu đóng gói ứng dụng của bạn với việc sử dụng các công cụ phát triển sử dụng các tính năng như tải lại trực tiếp.
Sử dụng các quy trình kết xuất làm luồng công nhân
Các quy trình kết xuất được coi là quy ước được sử dụng để kết xuất giao diện người dùng của bạn. Tuy nhiên, họ không bị ràng buộc vào nhiệm vụ duy nhất này. Chúng có thể được ẩn và chạy trong nền bằng cách định cấu hình cờ hiển thị được chuyển tới BrowserWindow.
Làm điều này có nhiều lợi thế. Không giống như nhân viên web, bạn có quyền tự do sử dụng các mô-đun gốc. Và không giống như các quy trình rẽ nhánh, bạn vẫn có thể sử dụng thư viện điện tử để yêu cầu quy trình chính thực hiện những việc như mở hộp thoại hoặc tạo thông báo hệ điều hành.
Một thách thức khi sử dụng Electron là IPC. Mặc dù đơn giản, nhưng nó yêu cầu một lượng lớn bản soạn sẵn và đặt ra khó khăn trong việc gỡ lỗi một số lượng lớn người nghe sự kiện. Đó cũng là một điều khác mà bạn phải kiểm tra đơn vị. Bằng cách sử dụng quy trình kết xuất làm luồng công nhân, bạn có thể tránh hoàn toàn điều này. Giống như bạn làm với máy chủ, bạn có thể lắng nghe trên cổng cục bộ và nhận yêu cầu, cho phép bạn sử dụng các công cụ như GraphQL + React Apollo. Bạn cũng có thể sử dụng ổ cắm web để liên lạc theo thời gian thực. Một phần thưởng khác là bạn không cần sử dụng ipcRenderer và có thể giữ cho các ứng dụng web và Electron của mình đẳng cấu (nếu bạn muốn sử dụng cơ sở mã dùng chung cho máy tính để bàn và ứng dụng web).
Đối với các trường hợp sử dụng nâng cao, phương pháp này có thể được kết hợp với phân cụm để đạt được kết quả tốt nhất trong tất cả các thế giới. Hạn chế duy nhất là bạn sẽ cần cung cấp một tệp HTML làm mục nhập cho các quy trình trình kết xuất công nhân của bạn (điều này giống như một thứ gì đó bị hack).
Cách sử dụng SQLite (hoặc bất kỳ thứ gì bạn cần ghi vào)
Có một số cách tiếp cận để quản lý trạng thái không yêu cầu các mô-đun gốc. Ví dụ: xử lý tất cả trạng thái của bạn trong ngữ cảnh trình kết xuất với Redux.
Tuy nhiên, nếu bạn cần xử lý một lượng lớn dữ liệu, điều này sẽ không đủ. Đặc biệt, chúng ta sẽ xem xét cách sử dụng SQLite trong ứng dụng Electron.
Để triển khai ứng dụng Electron của bạn, trước tiên bạn cần đóng gói ứng dụng đó. Có một số công cụ có sẵn để làm như vậy — phổ biến nhất là Electron Builder. Electron sử dụng định dạng lưu trữ ASAR để nhóm ứng dụng của bạn vào một tệp duy nhất, không nén. Các kho lưu trữ ASAR ở dạng chỉ đọc — nghĩa là bạn không thể ghi bất kỳ dữ liệu nào vào chúng. Điều này có nghĩa là bạn không thể đưa cơ sở dữ liệu của mình vào kho lưu trữ ASAR cùng với phần còn lại của mã (trong trình tạo điện tử, phần này sẽ nằm trong “tệp”).
Thay vào đó, hãy đưa cơ sở dữ liệu của bạn vào thư mục Tài nguyên của gói điện tử của bạn. Cấu trúc tệp của ứng dụng Electron được đóng gói và vị trí đặt cơ sở dữ liệu của bạn có thể được xem bên dưới:
Kho lưu trữ ASAR được đóng gói có tên app.asar tồn tại trong ./Contents/Resources. Bạn có thể đặt cơ sở dữ liệu của mình hoặc bất kỳ tệp nào bạn muốn ghi nhưng bao gồm trong ứng dụng đóng gói của mình, trong cùng một thư mục. Điều này có thể đạt được với Electron Builder bằng cách sử dụng cấu hình “extraResources”.
Một cách tiếp cận khác là tạo hoàn toàn một cơ sở dữ liệu trong một thư mục khác. Nhưng bạn sẽ cần tính đến việc xóa tệp này trên tất cả các nền tảng nếu người dùng quyết định gỡ cài đặt ứng dụng của bạn.
Đóng gói với các mô-đun gốc
Phần lớn các mô-đun Node là các tập lệnh được viết bằng JavaScript. Các mô-đun gốc là các mô-đun được viết bằng C++ có các ràng buộc để sử dụng với Node. Chúng hoạt động như một giao diện cho các thư viện khác được viết bằng C/C++ và thường được cấu hình để biên dịch sau khi cài đặt.
Là các mô-đun cấp thấp, chúng cần được biên dịch cho các kiến trúc và hệ điều hành đích. Mô-đun gốc được biên dịch trên máy Windows sẽ không hoạt động trên máy Linux — mặc dù mô-đun thông thường sẽ hoạt động. Đây là một vấn đề đối với Electron, vì cuối cùng chúng tôi cần đóng gói mọi thứ thành tệp thực thi .dmg (OSX), .exe (Windows) hoặc .deb (Linux).
Các ứng dụng điện tử sử dụng các mô-đun gốc cần được đóng gói trên hệ thống mà chúng đang nhắm mục tiêu. Vì bạn sẽ muốn tự động hóa quy trình này trong đường dẫn CI/CD, nên bạn sẽ cần xây dựng các phần phụ thuộc gốc của mình trước khi đóng gói. Để thực hiện điều này, bạn có thể sử dụng một công cụ do nhóm Electron phát triển có tên là xây dựng lại điện tử.
Nếu bạn đang phát triển một dự án mã nguồn mở phi thương mại, bạn có thể sử dụng TravisCI (Linux, OSX) và Appveyor (Windows) để tự động xây dựng, thử nghiệm và triển khai ứng dụng của bạn miễn phí.
Việc thiết lập cho điều này có thể phức tạp nếu bạn có các bài kiểm tra tích hợp, vì bạn sẽ cần cài đặt một số phụ thuộc nhất định để các bài kiểm tra headless hoạt động. Bạn có thể tìm thấy cấu hình ví dụ cho OSX và Linux với TravisCI tại đây và cấu hình Appveyor mẫu tại đây (các ví dụ này dựa trên cấu hình trong dự án nồi hơi phản ứng điện tử, với việc bổ sung OSX và triển khai).
Gotchas
Khi ứng dụng Electron của bạn được đóng gói, một số thuộc tính tích hợp sẵn của Nút liên quan đến đường dẫn có thể không hoạt động như bạn mong đợi và sẽ không hoạt động như khi bạn chạy tệp nhị phân dựng sẵn để phục vụ ứng dụng của mình.
Các biến như __dirname, __filename và các phương thức như process.cwd sẽ không hoạt động như mong đợi trong một ứng dụng đóng gói (xem các sự cố tại đây, tại đây và tại đây). Thay vào đó, hãy sử dụng app.getAppPath.
Một lưu ý cuối cùng trên bao bì
Trong khi phát triển ứng dụng Electron, bạn có thể muốn sử dụng cả hai chế độ sản xuất (cung cấp mã đi kèm với tệp nhị phân dựng sẵn) và phát triển (sử dụng webpack-dev-server hoặc webpack-serve để xem các tệp của bạn).
Để duy trì sự tỉnh táo của bạn, hãy xây dựng và phân phối các gói của bạn từ cùng thư mục với mã nguồn của bạn. Điều này có nghĩa là khi bạn chọn các tệp này để đóng gói, mọi giả định về đường dẫn tệp vẫn nhất quán giữa các chế độ này và gói của bạn.
Ít nhất, quy trình chính của bạn sẽ cần trỏ đến đường dẫn tệp của tệp HTML của quy trình kết xuất của bạn. Nếu bạn di chuyển tệp này vào một thư mục khác như một phần của quá trình xây dựng, bạn sẽ buộc phải duy trì các giả định về cấu trúc tệp và điều này có thể nhanh chóng trở thành một lớp phức tạp khác mà bạn cần duy trì.
Gỡ lỗi các vấn đề liên quan đến đường dẫn tệp không chính xác trong một ứng dụng được đóng gói là một trường hợp thử và sai.
Tóm lược
Có một số cách tiếp cận đa luồng trong Electron. Công nhân web thuận tiện, nhưng thiếu khả năng sử dụng các mô-đun gốc. Việc phân nhánh các quy trình mới hoạt động giống như trong Node, nhưng việc thiếu khả năng sử dụng thư viện Electron buộc phải sử dụng IPC cho các tác vụ thông thường và có thể nhanh chóng trở nên phức tạp. Sử dụng các quy trình kết xuất với tư cách là công nhân cấp toàn bộ sức mạnh của tất cả các công cụ máy chủ Node có sẵn để thay thế cho giao tiếp qua IPC, trong khi vẫn giữ quyền truy cập vào các mô-đun và phương thức gốc từ thư viện trình kết xuất Electron.
Vì Electron đóng gói các tệp trong kho lưu trữ ASAR chỉ đọc, nên không thể bao gồm bất kỳ tệp nào chúng tôi cần ghi vào (chẳng hạn như cơ sở dữ liệu SQLite). Thay vào đó, chúng có thể được đặt trong thư mục Tài nguyên nơi chúng sẽ vẫn còn trong ứng dụng được đóng gói.
Cuối cùng, hãy lưu ý rằng trong một ứng dụng được đóng gói, một số thuộc tính Nút không hoạt động như bạn mong đợi. Và để rõ ràng, hãy khớp cấu trúc tệp của ứng dụng được đóng gói với mã nguồn của bạn.
