Rahasia utama untuk mengembangkan aplikasi Elektron yang baik

Beberapa sangat membenci aplikasi Elektron . Bahwa aplikasi termasuk browser Chromium tampaknya, agaknya, aneh. Perasaan ini ditingkatkan selama bekerja dengan aplikasi semacam itu. Mereka mengkonsumsi banyak memori, memuat perlahan dan tidak memiliki tingkat reaksi yang sangat tinggi terhadap interaksi pengguna. Tidak mudah untuk mengembangkan aplikasi web yang bagus. Mengapa teknologi web diseret ke lingkungan desktop? Lagi pula, ada perasaan bahwa di lingkungan ini mereka menciptakan banyak masalah?

Penulis materi, terjemahan yang kami terbitkan hari ini, mengatakan bahwa ia tidak akan memainkan peran sebagai pembela Elektron, meskipun semuanya berbicara tentang keberhasilan platform ini. Benar, tidak ada yang akan mendiskon kelebihan yang melekat pada aplikasi Electron. Apakah mungkin, sambil mengembangkan aplikasi seperti itu, untuk membunuh dua burung dengan satu batu dalam satu tembakan?


Beberapa masalah Elektron (ukuran file besar, loading lambat) adalah warisan teknologi yang menjadi dasar platform ini. Mereka perlu ditangani di tingkat rendah. Masalah yang lebih serius (konsumsi memori, kelambatan antarmuka) dapat diselesaikan pada tingkat di mana aplikasi-Elektron dikembangkan. Namun, menyelesaikan masalah ini tidaklah mudah. Bagaimana jika ada rahasia, mengetahui yang Anda bisa, dalam mode otomatis, meminimalkan kekurangan ini?

Jika Anda suka membaca kode program, Anda dapat segera melihat ke repositori ini . Inilah proyek yang akan dipertimbangkan dalam materi ini.

Inti dari rahasianya

Rahasia untuk mengembangkan aplikasi Elektron berkualitas tinggi adalah dengan melakukan sebagian besar perhitungan pada sistem lokal, dalam proses latar belakang. Semakin sedikit Anda mengandalkan layanan cloud, dan semakin banyak pekerjaan yang Anda lakukan dalam proses latar belakang, semakin Anda dapat mengalami efek positif berikut:

• Pemuatan data instan. Pengguna aplikasi tidak perlu menunggu data untuk diunduh melalui jaringan. Data diunduh dari penyimpanan lokal. Ini segera memberikan aplikasi peningkatan kinerja yang nyata.
• Persyaratan caching rendah. Aplikasi klien tidak perlu khawatir terutama tentang caching. Ini karena semua data yang dia butuhkan tersedia secara lokal. Agar aplikasi web mencapai tingkat kinerja yang layak, biasanya perlu memuat jumlah data yang mengesankan ke dalam kondisi lokalnya. Ini adalah salah satu alasan untuk konsumsi memori aplikasi Electron yang sangat tinggi.

Di sini saya tidak berbicara tentang keuntungan lain dari penyimpanan data lokal, misalnya, tentang kemungkinan bekerja tanpa terhubung ke jaringan.

Lihatlah berapa banyak memori yang dikonsumsi aplikasi Elektron saya - manajer keuangan pribadi Actual . Program ini menyimpan semua datanya secara lokal. Sinkronisasi data antara perangkat yang berbeda adalah fitur opsional, itu tidak mempengaruhi fungsi utama. Saya kira, mengingat bahwa aplikasi ini dirancang untuk bekerja dengan sejumlah besar data, angka konsumsi memorinya berbicara sendiri.


Konsumsi memori yang sebenarnya

Aplikasi yang tidak melakukan tindakan aktif apa pun membutuhkan total memori 239,1 MB. Indikator ini mungkin lebih, tergantung pada apa yang sebenarnya terjadi dalam aplikasi, tetapi dimungkinkan untuk hanya mengambil nomor yang ditentukan sebagai basis. Ini tidak sempurna, tetapi tidak terlalu buruk. Setidaknya - lebih baik daripada memori 1371 MB yang diperlukan di komputer Slack saya. Saya harus mengatakan bahwa Slack adalah contoh atipikal dari aplikasi Elektron, ditandai dengan masalah khusus. Ada beberapa sensasi di sekitar Elektron karena Slack. Aplikasi lain, seperti Notion atau Airtable, mengonsumsi sekitar 400-600 MB memori. Dan ini berarti bahwa aplikasi saya menang dengan baik dalam hal ini dan mereka miliki.

Saya harus mengatakan bahwa angka 239.1 MB diperoleh oleh saya sebelum optimasi apa pun. Saya berencana untuk menulis ulang beberapa bagian aplikasi yang sangat penting dan intensif memori di Rust. Ini harus secara signifikan mengurangi kebutuhan memori aplikasi.

Server latar belakang dapat mengoptimalkan konsumsi memorinya sendiri dengan memuat ke dalam memori hanya data yang diperlukan pada titik waktu tertentu. Cara terbaik adalah menggunakan sesuatu seperti SQLite untuk penyimpanan data. DBMS ini sudah dioptimalkan secara serius untuk menyelesaikan masalah seperti itu (serius - cukup gunakan SQLite). Selain itu, perlu dicatat bahwa memindahkan berbagai perhitungan ke proses latar belakang memungkinkan antarmuka pengguna aplikasi untuk menanggapi pengaruh pengguna secepat mungkin.

Ternyata menggunakan server latar belakang dalam aplikasi Elektron memberikan peluang menarik bagi pengembang. Pada bagian selanjutnya, kita akan berbicara tentang semua hal luar biasa yang dapat dilakukan dengan penggunaannya.

Bahkan jika aplikasi Anda sangat terkait dengan data cloud, Anda mungkin perlu proses latar belakang jika Anda bermaksud untuk bekerja dengan Node.js API. Interaksi dengan API ini hanya dimungkinkan dari proses latar belakang. Sebenarnya, apa pun aplikasi Elektron Anda, saya percaya bahwa mengenal proyek yang akan kita periksa sekarang dapat memberi Anda beberapa ide berguna.

Aplikasi contoh-elektron-dengan-server

Saya membuat aplikasi contoh-elektron-dengan-server untuk menunjukkan semua yang perlu dikonfigurasi untuk mengembangkan aplikasi Elektron lokal yang benar-benar menggunakan contohnya. Saya melakukan ini dalam upaya untuk memikat programmer dengan membuat proyek serupa. Saya ingin bertemu proyek serupa pada saat saya baru mulai bekerja dengan Elektron.

Informasi teknis tentang aplikasi dapat ditemukan di README . Berikut ini adalah gambaran umum proyek:

• Itu menciptakan proses Node.js biasa, digunakan untuk mengeksekusi kode server di latar belakang.
• Di dalamnya, menggunakan node-ipc , saluran IPC dibuat, yang dirancang untuk mengatur interaksi langsung antara backend dan antarmuka pengguna aplikasi.
• Jika proyek diluncurkan dalam mode pengembangan, maka server tidak memulai sebagai proses latar belakang. Anda dapat berinteraksi dengannya melalui jendela browser terpisah. Ini untuk keperluan debugging.

Sekarang mari kita memperlambat sedikit dan melihat lebih dekat pada item terakhir pada daftar ini. Dalam mode pengembangan, dapatkah Anda berinteraksi dengan server melalui jendela browser terpisah?


Bagian klien dan server dari aplikasi

Ya, benar. Setelah saya belajar cara memulai proses latar belakang, saya menyadari, pertama, bahwa saya siap menggunakan alat pengembang Chromium. Dan kedua - saya menyadari bahwa, untuk keperluan debugging, saya dapat menggunakannya untuk men-debug kode Node.js. Sebagai hasilnya, saya berbicara tentang fakta bahwa Anda dapat berinteraksi dengan Node.js melalui browser. Ini memungkinkan Anda menggunakan toolkit pengembang peramban kaya berbasis Chromium untuk men-debug kode server.

Sekarang mari kita lihat semua hal menarik yang bisa kita lakukan berkat aplikasi skema peluncuran aplikasi di atas.

Menggunakan konsol

Saya menambahkan perintah untuk mencatat permintaan dan tanggapan ke file server-ipc.js . Saya dapat menjelajahi mereka menggunakan konsol browser.


Aplikasi debug Node.js di konsol browser

Eksekusi kode langkah-demi-langkah

Saat men-debug sisi server aplikasi menggunakan browser, Anda dapat menggunakan eksekusi kode langkah-demi-langkah. Ini bukan untuk mengatakan bahwa itu adalah sesuatu yang benar-benar fantastis. Tetapi sangat nyaman bahwa fitur ini selalu ada dan tidak memerlukan penggunaan program tambahan.


Eksekusi kode langkah-demi-langkah

Pembuatan profil

Mungkin ini alat favorit saya. Ini adalah alat standar yang brilian untuk meneliti kinerja kode, yang memungkinkan Anda untuk membuat profil sisi server dari aplikasi.


Penelitian kinerja kode server

Menggunakan alat pengembang peramban, Anda bahkan dapat menjelajahi apa yang terjadi ketika proses latar belakang dimulai (ini kemungkinan merupakan bagian tersulit dari memulai aplikasi).

Untuk melakukan ini, cukup mulai proses pencatatan indikator dan muat ulang jendela. Reboot akan menyebabkan server melakukan restart. Ini membawa kita ke langkah selanjutnya.

Reboot server menggunakan kombinasi tombol Cmd + R atau Ctrl + R

Opsi lain untuk men-debug kode server di browser adalah karena debugging server dilakukan di jendela browser, cukup memuat ulang isi jendela tersebut menyebabkan server melakukan restart! Cukup menggunakan kombinasi kunci Cmd+R (atau, untuk Windows, Ctrl+R ), dan yang Anda inginkan adalah perubahan terbaru yang dilakukan pada kode server. Dalam hal ini, data front-end disimpan. Ini berarti bahwa Anda dapat terus bekerja dengan bagian klien dari aplikasi, tetapi, setelah me-restart server, bagian klien sudah akan bekerja dengan versi baru dari kode server. Ini mengingatkan pada sesuatu seperti "hot" code swap pada server yang sedang berjalan.

Gambar berikut menunjukkan bagaimana, mengubah kode server, saya memuat ulang halaman dengan menekan Cmd+R Setelah itu, saya terus bekerja dengan klien, yang sekarang berinteraksi dengan server versi baru.


Server reboot

Meneliti sisi server yang berjalan dari aplikasi dan kode hot-swapping

Biasanya, ketika men-debug server, saya cukup menambahkan perintah console.log() ke tempat yang tepat dalam kode dan restart. Tetapi kadang-kadang, dalam kasus-kasus yang sangat sulit, itu terjadi bahwa akan sangat berguna untuk melihat apa yang terjadi di server yang sedang berjalan, daripada me-reboot-nya. Ada kemungkinan bahwa tidak hanya "melihat" di dalam server, tetapi juga mengubah sesuatu di dalamnya untuk melihat bagaimana ini akan mempengaruhi masalah.

Di konsol, Anda dapat menggunakan Node.js require perintah. Ini berarti bahwa dengan bantuannya Anda dapat menghubungkan modul server apa saja dan bekerja dengannya di konsol.

Misalkan kita perlu bekerja dengan server-handler.js . Untuk melakukan ini, jalankan saja perintah let handlers = require('./server-handlers') di konsol.

Mari kita buat sistem untuk menyimpan status server. Dalam kasus kami, ini akan menjadi daftar semua data yang diteruskan ke fungsi make-factorial (keadaan server dari aplikasi sebenarnya akan jauh lebih rumit):

 handlers._history = [] handlers['make-factorial'] = async ({ num }) => {  handlers._history.push(num) } 

Anda dapat handlers._history status server dari konsol dengan menghubungkan modul yang sesuai dan melihat handlers._history . Jika diinginkan, selama eksekusi program, kita bahkan dapat sepenuhnya menggantikan implementasi make-factorial !


Penelitian Status Server

Ringkasan

Lihatlah repositori electron-dengan-server-contoh untuk membaca tentang detail implementasi proyek dan melihat kode sisi server dari aplikasi Electron.

Jika Anda menggunakan Visual Studio Code, maka Anda mungkin terbiasa dengan integrasi alat pengembang berkualitas tinggi dengan server Node.js. Dengan pendekatan ini, Anda dapat memulai server sendiri, secara terpisah dari aplikasi Electron. Setelah itu, Anda dapat memberi tahu Electron bahwa Anda harus terhubung ke proses yang dimiliki oleh VS Code. Namun, saya lebih suka menggunakan alat pengembangan Elektron yang ada.

Ini berarti bahwa programmer memiliki kesempatan untuk menggunakan alat pengeditan kode pihak ketiga dan pada saat yang sama memiliki akses penuh ke semua alat pengembang browser.

Selama beberapa tahun terakhir, saya telah mengembangkan aplikasi Aktual dan terus menggunakan apa yang baru saja saya bicarakan. Dan saya ingin mengatakan bahwa saya sangat menyukai semua ini. Mungkin pekerjaan pada bagian Node.js dari aplikasi ini telah menjadi sumber pengalaman pemrograman paling menyenangkan yang pernah saya alami.

Selain itu, sangat penting bahwa prinsip-prinsip yang dijelaskan di atas membantu kami mengembangkan aplikasi yang benar-benar lokal. Kami sudah memiliki semua teknologi yang diperlukan untuk ini. Hal utama adalah menggunakannya dengan benar.

Pembaca yang budiman! Bagaimana perasaan Anda tentang aplikasi berbasis Elektron?