Bagaimana saya membina aplikasi desktop silang platform dengan svelte, redis, dan karat

Cloudflare menawarkan produk yang sangat baik yang dipanggil Pekerja KV, lapisan penyimpanan nilai utama yang direplikasi secara global. Ia boleh mengendalikan berjuta -juta kunci, masing -masing boleh diakses dengan latensi yang sangat rendah dalam skrip pekerja, tidak kira di mana permintaan itu berasal. Para pekerja KV sangat mengagumkan - ia juga berharga, termasuk peringkat percuma yang murah hati.

Walau bagaimanapun, sebagai pengguna jangka panjang produk Cloudflare, saya mendapati bahawa satu perkara telah hilang: introspeksi tempatan . Saya sering mempunyai ribuan atau bahkan beratus -ratus ribu kunci dalam permohonan saya dan saya sering ingin mempunyai cara untuk menanyakan semua data, menyusunnya, atau hanya melihat apa yang sebenarnya wujud.

Baru -baru ini, saya mempunyai kehormatan untuk menyertai Cloudflare! Lebih penting lagi, saya menyertai suku ini sebelum "Minggu Win Quick" (aka hackathon mingguan). Oleh kerana saya tidak mengumpulkan cukup banyak kerja (belum), percayalah, saya akan merebut peluang ini untuk memenuhi kehendak saya.

Kembali ke titik, beritahu saya bagaimana saya membina pekerja KV GUI, aplikasi desktop silang platform yang dibina menggunakan svelte, redis, dan karat.

Aplikasi front-end

Sebagai pemaju web, ini adalah pautan yang biasa. Saya ingin menyebutnya "bahagian yang mudah", tetapi memandangkan anda boleh menggunakan mana -mana dan semua kerangka HTML, CSS dan JavaScript, perpustakaan atau corak, memilih lumpuh mudah berlaku ... ia juga mungkin biasa. Jika anda mempunyai timbunan teknologi front-end yang anda suka, itu hebat, gunakannya! Untuk aplikasi ini, saya memilih untuk menggunakan Svelte kerana bagi saya ia benar -benar membuat perkara mudah dan membuat mereka mudah.

Di samping itu, sebagai pemaju web, kami ingin membawa semua alat dengan kami. Sudah tentu anda boleh! Sekali lagi, fasa projek ini tidak berbeza dengan kitaran pembangunan aplikasi web biasa. Anda boleh mengharapkan untuk menjalankan benang dev (atau beberapa varian) sebagai arahan utama anda dan merasa di rumah. Untuk menyimpan tema "mudah", saya memilih untuk menggunakan Sveltekit, rangka kerja rasmi Svelte dan toolkit untuk membina aplikasi. Ia termasuk sistem binaan yang dioptimumkan, pengalaman pemaju yang sangat baik (termasuk HMR!), Router berasaskan sistem fail, dan semua ciri-ciri yang ditawarkan oleh Svelte sendiri .

Sebagai rangka kerja, terutama sekali yang menjaga alat -alat itu sendiri, Sveltekit membolehkan saya berfikir semata -mata mengenai permohonan saya dan keperluannya. Malah, satu -satunya perkara yang perlu saya lakukan dari segi konfigurasi adalah untuk memberitahu Sveltekit bahawa saya ingin membina satu aplikasi halaman (SPA) yang hanya berjalan pada pelanggan. Dalam erti kata lain, saya harus secara jelas memilih keluar dari Sveltekit dengan mengandaikan bahawa saya mahukan pelayan, yang sebenarnya merupakan asumsi yang munasabah, kerana kebanyakan aplikasi boleh mendapat manfaat daripada rendering sisi pelayan. Ini semudah melampirkan pakej statik @sveltejs/penyesuai, pratetap konfigurasi yang dibuat khusus untuk tujuan ini. Selepas pemasangan, keseluruhan fail konfigurasi saya kelihatan seperti ini:

 <code>// svelte.config.js import preprocess from 'svelte-preprocess'; import adapter from '@sveltejs/adapter-static'; /** @type {import('@sveltejs/kit').Config} */ const config = { preprocess: preprocess(), kit: { adapter: adapter({ fallback: 'index.html' }), files: { template: 'src/index.html' } }, }; export default config;</code>

Perubahan kepada index.html adalah keutamaan peribadi saya. Sveltekit menggunakan app.html sebagai templat asas lalai, tetapi tabiat lama sukar diubah.

Hanya dalam beberapa minit, toolchain saya sudah tahu ia sedang membina spa, sudah mempunyai router siap, dan pelayan pembangunan bersedia untuk disediakan. Di samping itu, Sokongan TypeScript, PostCSS, dan/atau SASS juga disediakan kerana svelte-preprocess jika saya mahu (dan saya mahukannya). Bersedia!

Permohonan memerlukan dua pandangan:

1. Skrin untuk memasukkan butiran sambungan (halaman lalai/selamat datang/rumah)
2. Skrin yang sebenarnya melihat data

Di dunia Sveltekit, ini diterjemahkan ke dalam dua "router", yang Sveltekit menyatakan bahawa laluan ini harus wujud sebagai src/routes/index.svelte (halaman rumah) dan src/routes/viewer.svelte (halaman penonton data). Dalam aplikasi web sebenar, laluan kedua akan dipetakan ke URL /Viewer. Walaupun ini masih berlaku, saya tahu aplikasi desktop saya tidak akan mempunyai bar navigasi, yang bermaksud URL akan tidak kelihatan ... ini bermakna tidak kira bagaimana saya menamakan laluan ini, selagi ia masuk akal kepada saya.

Kandungan fail ini kebanyakannya tidak relevan, sekurang -kurangnya untuk artikel ini. Bagi mereka yang ingin tahu, keseluruhan projek adalah sumber terbuka, dan jika anda mencari contoh Svelte atau Sveltekit, anda dialu -alukan untuk menyemaknya. Pada risiko menjadi seperti rekod yang patah, titik di sini ialah saya membina aplikasi web biasa.

Pada ketika ini, saya hanya merancang pandangan saya dan membuang data palsu dan keras sehingga saya mendapat sesuatu yang kelihatan sah. Saya tinggal di sini selama kira -kira dua hari sehingga semuanya kelihatan cantik dan semua interaktiviti (klik butang, penyerahan bentuk, dan lain -lain) telah disempurnakan. Saya akan menyebutnya aplikasi atau model "Runable".

Alat Aplikasi Desktop

Pada masa ini, spa berfungsi sepenuhnya sudah wujud. Ia berjalan dalam pelayar web - dan dibangunkan dalam pelayar web. Mungkin bertentangan dengan intuisi, ini menjadikannya calon yang sempurna untuk aplikasi desktop! Tetapi bagaimana untuk melakukannya?

Anda mungkin pernah mendengar tentang Electron. Ia adalah alat yang paling terkenal untuk membina aplikasi desktop silang platform menggunakan teknologi web. Terdapat banyak aplikasi yang sangat popular dan berjaya dibina dengannya: Kod Studio Visual, WhatsApp, Atom, dan Slack, untuk menamakan beberapa. Ia berfungsi dengan menggabungkan sumber web anda dengan pemasangan kromium sendiri dan runtime node.js sendiri. Dalam erti kata lain, apabila anda memasang aplikasi berasaskan elektron, ia dilengkapi dengan pelayar krom tambahan dan satu set lengkap bahasa pengaturcaraan (Node.js). Ini tertanam dalam kandungan aplikasi dan tidak dapat dielakkan kerana ini adalah kebergantungan aplikasi, memastikan ia berjalan secara konsisten di mana -mana sahaja. Seperti yang anda bayangkan, terdapat beberapa tradeoffs untuk pendekatan ini - aplikasi agak besar (iaitu lebih 100MB) dan menggunakan banyak sumber sistem untuk dijalankan. Untuk menggunakan aplikasinya, latar belakang menjalankan krom baru/berasingan - yang tidak sama seperti membuka tab baru.

Nasib baik, terdapat beberapa alternatif - saya menilai Svelte Nodegui dan Tauri. Kedua -dua pilihan menyediakan saiz permohonan yang signifikan dan penjimatan penggunaan dengan bergantung kepada penerima asli yang disediakan oleh sistem operasi dan bukannya membenamkan salinan Chrome. Nodegui melakukan ini dengan bergantung kepada QT, satu lagi rangka kerja aplikasi desktop/GUI yang disusun menjadi pandangan asli. Walau bagaimanapun, untuk melakukan ini, Nodegui perlu membuat beberapa tweak ke kod aplikasi anda supaya ia dapat menukar komponen anda ke dalam komponen QT . Walaupun saya percaya ini pasti akan berfungsi, saya tidak berminat dengan penyelesaian ini kerana saya mahu menggunakan apa yang saya tahu tanpa tweaking ke fail svelte saya. Sebaliknya, Tauri mencapai simpanannya dengan membungkus webviewer asli sistem operasi-contohnya, koko/webkit pada macOS, GTK-WebKit2 di Linux, dan WebKit On Edge pada Windows. Webviewers sebenarnya penyemak imbas, dan Tauri menggunakannya kerana mereka sudah wujud pada sistem anda, yang bermaksud aplikasi kami boleh tetap produk pembangunan web semata -mata.

Dengan simpanan ini, aplikasi Tauri terkecil kurang daripada 4MB dan berat aplikasi purata kurang daripada 20MB. Dalam ujian saya, aplikasi Nodegui terkecil berat kira -kira 16MB. Aplikasi elektron terkecil boleh mencapai 120MB dengan mudah.

Tidak perlu dikatakan, saya memilih Tauri. Dengan mengikuti Panduan Integrasi Tauri, saya menambah pakej @Tauri-Apps/CLI dalam DevDependency dan memulakan projek:

 <code>yarn add --dev @tauri-apps/cli yarn tauri init</code>

Ini mewujudkan direktori SRC-Tauri di sebelah direktori SRC (di mana aplikasi Svelte terletak). Di sinilah semua fail khusus Tauri terletak, yang bagus untuk organisasi.

Saya tidak pernah membina aplikasi Tauri sebelum ini, tetapi selepas melihat dokumentasi konfigurasinya, saya dapat menyimpan sebahagian besar nilai lalai- kecuali untuk item seperti Package.ProductName dan Windows.Title Nilai, tentu saja. Sebenarnya satu -satunya perubahan yang perlu saya buat ialah konfigurasi membina, yang harus diselaraskan dengan Sveltekit untuk maklumat pembangunan dan output:

 <code>// src-tauri/tauri.conf.json { "package": { "version": "0.0.0", "productName": "Workers KV" }, "build": { "distDir": "../build", "devPath": "http://localhost:3000", "beforeDevCommand": "yarn svelte-kit dev", "beforeBuildCommand": "yarn svelte-kit build" }, // ... }</code>

Distdir berkaitan dengan lokasi aset siap pengeluaran yang dibina. Nilai ini dihuraikan dari lokasi fail tauri.conf.json, jadi ia mempunyai ../ awalan.

Devpath adalah URL yang proksi semasa pembangunan. Secara lalai, Sveltekit menjana pelayan pembangunan (boleh dikonfigurasikan) pada port 3000. Saya telah mengakses alamat localhost: 3000 dalam penyemak imbas semasa fasa pertama, jadi ini tidak berbeza.

Akhirnya, Tauri mempunyai dev sendiri dan membina arahan. Untuk mengelakkan kerumitan mengendalikan pelbagai perintah atau skrip bangunan, Tauri menyediakan cangkuk boredevcommand dan sebelum ini, membolehkan anda menjalankan apa -apa arahan sebelum perintah Tauri dijalankan. Ini adalah kemudahan yang halus tetapi kuat!

Sveltekit CLI boleh diakses melalui nama binari Svelte-kit. Sebagai contoh, menulis benang Svelte-kit membina akan memberitahu Benang untuk mendapatkan binari Svelte-kit tempatan (dipasang melalui kebencian) dan kemudian memberitahu Sveltekit untuk menjalankan perintah binaannya.

Dengan ini, pakej peringkat akar saya mengandungi skrip berikut:

 <code>{ "private": true, "type": "module", "scripts": { "dev": "tauri dev", "build": "tauri build", "prebuild": "premove build", "preview": "svelte-kit preview", "tauri": "tauri" }, // ... "devDependencies": { "@sveltejs/adapter-static": "1.0.0-next.9", "@sveltejs/kit": "1.0.0-next.109", "@tauri-apps/api": "1.0.0-beta.1", "@tauri-apps/cli": "1.0.0-beta.2", "premove": "3.0.1", "svelte": "3.38.2", "svelte-preprocess": "4.7.3", "tslib": "2.2.0", "typescript": "4.2.4" } }</code>

Selepas integrasi, perintah pengeluaran saya masih membina benang, yang memanggil Tauri membina untuk benar-benar membungkus aplikasi desktop, tetapi hanya selepas benang Svelte-kit membina berjaya selesai (melalui pilihan sebelumnya). Perintah pembangunan saya masih benang Dev, yang mengendalikan Tauri Dev dan benang Svelte-kit dev perintah selari. Aliran kerja pembangunan sepenuhnya di dalam aplikasi Tauri dan kini ia adalah proksy localhost: 3000, yang membolehkan saya masih mendapat manfaat dari pelayan pembangunan HMR.

Penting: Tauri masih dalam beta pada masa penulisan. Yang berkata, ia terasa sangat stabil dan dirancang dengan baik. Saya tidak bersekutu dengan projek itu, tetapi kelihatan seperti Tauri 1.0 mungkin akan pergi ke versi yang stabil tidak lama lagi. Saya dapati Tauri Discord sangat aktif dan membantu, termasuk balasan dari penyelenggara Tauri! Mereka juga menjawab beberapa soalan pemula karat saya sepanjang proses. ""

Sambung ke Redis

Pada ketika ini, hari Rabu petang minggu pemenang yang cepat dan saya jujur ​​mula merasa gugup untuk menyelesaikannya sebelum demo pasukan Jumaat. Kenapa? Oleh kerana saya telah menghabiskan separuh minggu ini, walaupun saya mempunyai spa yang tampan dalam aplikasi desktop yang boleh dijalankan, ia masih tidak melakukan apa-apa . Saya telah melihat data palsu yang sama sepanjang minggu.

Anda mungkin berfikir bahawa kerana saya mempunyai akses ke WebView, saya boleh menggunakan FETCH () untuk membuat beberapa API REST yang disahkan untuk data KV pekerja yang saya mahu dan membuangnya ke dalam jadual localStorage atau indexeddb ... anda betul -betul betul! Walau bagaimanapun, ini bukan idea saya untuk kes penggunaan aplikasi desktop.

Ia benar-benar layak untuk menyimpan semua data anda ke beberapa jenis penyimpanan dalam pelayar, tetapi ia menjimatkannya secara tempatan ke mesin anda . Ini bermakna jika ahli pasukan anda cuba melakukan perkara yang sama, semua orang mesti mendapatkan dan menyimpan semua data pada mesin mereka sendiri . Sebaik -baiknya, aplikasi KV pekerja ini harus mempunyai pilihan untuk menyambung dan menyegerakkan dengan pangkalan data luaran. Dengan cara ini, apabila bekerja dalam persediaan pasukan, semua orang boleh menyesuaikan diri dengan cache pangkalan data yang sama untuk menjimatkan masa - dan wang. Ini mula menjadi penting apabila berurusan dengan berjuta -juta kunci, yang, seperti yang dinyatakan sebelum ini, tidak biasa apabila menggunakan pekerja KV.

Selepas memikirkannya untuk seketika, saya memutuskan untuk menggunakan Redis sebagai penyimpanan backend saya kerana ia juga merupakan kedai nilai utama. Ini hebat kerana Redis sudah merawat kunci sebagai warga kelas pertama dan menyediakan tingkah laku penyortiran dan penapisan yang saya mahukan (iaitu, saya boleh lulus kerja dan bukannya melaksanakannya sendiri!). Kemudian, tentu saja, Redis mudah dipasang dan dijalankan secara tempatan atau dalam bekas, dan jika seseorang memilih untuk pergi ke laluan itu, terdapat banyak Redis yang dihoskan sebagai penyedia perkhidmatan.

Tetapi, bagaimana saya menyambung kepadanya? Aplikasi saya pada dasarnya adalah tag penyemak imbas yang berjalan svelte, bukan? Ya - tetapi ia juga lebih daripada itu.

Seperti yang anda dapat lihat, sebahagian daripada sebab kejayaan Electron ialah, ya, ia menjamin bahawa aplikasi web memberikan dengan baik pada setiap sistem operasi, tetapi ia juga membawa runtime Node.js. Sebagai pemaju web, ia seperti termasuk API backend secara langsung dalam pelanggan saya. Pada asasnya, masalah "... tetapi ia berjalan pada mesin saya" masalah hilang kerana semua pengguna (secara tidak sedar) menjalankan tetapan localhost yang sama. Melalui lapisan Node.js, anda boleh berinteraksi dengan sistem fail, jalankan pelayan pada pelbagai port, atau sertakan sekumpulan node_modules ke-saya hanya bercakap secara santai di sini-menyambung kepada contoh Redis. Barang yang kuat.

Kami tidak akan kehilangan kuasa besar ini kerana kami menggunakan Tauri! Ia sama, tetapi sedikit berbeza.

Daripada termasuk runtime Node.js, aplikasi Tauri dibina menggunakan Rust, bahasa sistem peringkat rendah. Ini adalah bagaimana Tauri sendiri berinteraksi dengan sistem operasi dan "meminjam" webviewer asalnya. Semua toolkit Tauri disusun (melalui karat), yang menyimpan aplikasi yang dibina kecil dan cekap. Walau bagaimanapun, ini juga bermakna bahawa kami , pemaju aplikasi, boleh memasukkan apa -apa peti lain (bersamaan "modul NPM") ke dalam aplikasi yang dibina. Sudah tentu, terdapat juga peti Redis yang bernama yang bertindak sebagai pemandu pelanggan Redis yang membolehkan pekerja KV GUI menyambung ke mana-mana contoh Redis.

Dalam karat, fail cargo.toml adalah serupa dengan fail pakej.json kami. Di sinilah kebergantungan dan metadata ditakrifkan. Dalam persediaan Tauri, ia terletak di SRC-Tauri/Cargo.toml Kerana sekali lagi, segala-galanya yang berkaitan dengan Tauri terletak di direktori ini. Kargo juga mempunyai konsep "bendera berfungsi" yang ditakrifkan pada tahap ketergantungan. (Analogi terdekat yang boleh saya fikirkan menggunakan NPM untuk mengakses struktur dalaman modul atau import yang dinamakan submodul, walaupun ia masih tidak sama, kerana dalam karat, bendera ciri mempengaruhi bagaimana pakej dibina.)

 <code># src-tauri/Cargo.toml [dependencies] serde_json = "1.0" serde = { version = "1.0", features = ["derive"] } tauri = { version = "1.0.0-beta.1", features = ["api-all", "menu"] } redis = { version = "0.20", features = ["tokio-native-tls-comp"] }</code>

Di atas mentakrifkan peti Redis sebagai kebergantungan dan memilih fungsi "Tokio-asli-TLS-Comp", yang dikatakan dokumentasi diperlukan untuk sokongan TLS.

Ok, jadi saya akhirnya mempunyai semua yang saya perlukan. Saya mesti bercakap dengan redis saya sebelum Rabu berakhir. Selepas melihat sekeliling, saya perhatikan bahawa semua perkara penting seolah-olah berlaku dalam fail SRC-Tauri/Main.rs. Saya menulis makro #[perintah] dan saya tahu saya telah melihatnya sebelum ini dalam contoh Tauri pada hari itu, jadi saya belajar untuk menyalin pelbagai bahagian fail sampel untuk melihat pepijat yang muncul dan pergi mengikut pengkompil karat.

Akhirnya, aplikasi Tauri dapat berjalan semula, dan saya belajar bahawa makro #[perintah] entah bagaimana membungkus fungsi asas supaya ia dapat menerima nilai "konteks" (jika anda memilih untuk menggunakannya) dan menerima nilai parameter yang telah dipadamkan. Di samping itu, sebagai bahasa, Rust melakukan banyak penukaran jenis. Contohnya:

 <code>use tauri::{command}; #[command] fn greet(name: String, age: u8) { println!("Hello {}, {} year-old human!", name, age); }</code>

Ini mewujudkan perintah salam, dan apabila berlari, mengharapkan dua parameter: nama dan umur. Apabila ditakrifkan, nilai nama adalah nilai rentetan, dan umurnya adalah jenis data U8 - iaitu, integer. Walau bagaimanapun, jika kedua -duanya hilang, Tauri membuang kesilapan kerana definisi arahan tidak menyatakan bahawa apa -apa boleh menjadi pilihan.

Untuk benar -benar menghubungkan perintah Tauri ke aplikasi, ia mesti ditakrifkan sebagai sebahagian daripada kombinasi Tauri :: Builder, yang terletak di dalam fungsi utama.

 <code>use tauri::{command}; #[command] fn greet(name: String, age: u8) { println!("Hello {}, {} year-old human!", name, age); } fn main() { // start composing a new Builder chain tauri::Builder::default() // assign our generated "handler" to the chain .invoke_handler( // piece together application logic tauri::generate_handler![ greet, // attach the command ] ) // start/initialize the application .run( // put it all together tauri::generate_context!() ) // print<message> if error while running .expect("error while running tauri application"); }</message></code>

Permohonan Tauri menyusun dan mengetahui bahawa ia mempunyai perintah "salam". Ia juga mengawal WebView (kami telah membincangkannya), tetapi apabila berbuat demikian , ia bertindak sebagai jambatan antara hujung semasa (WebView Content) dan backend, yang terdiri daripada API Tauri dan mana -mana kod lain yang kami tulis (seperti arahan salam). Tauri membolehkan kami menghantar mesej antara jambatan supaya kedua -dua dunia dapat berkomunikasi antara satu sama lain.

Bahagian depan boleh mengakses "jambatan" ini dengan mengimport fungsi dari mana-mana (sudah termasuk) @Tauri-Apps Pakej, atau dengan bergantung pada pembolehubah global window.Tauri (yang boleh digunakan untuk keseluruhan aplikasi klien) . Khususnya, kami berminat dengan arahan Invoke, yang menerima nama arahan dan satu set parameter. Sekiranya terdapat sebarang hujah, ia mesti ditakrifkan sebagai objek di mana kunci sepadan dengan nama parameter yang dijangkakan oleh karat kami.

Dalam lapisan Svelte, ini bermakna kita boleh melakukan perkara berikut untuk memanggil perintah ucapan yang ditakrifkan dalam lapisan karat:

 <code>function onclick() { __TAURI__.invoke('greet', { name: 'Alice', age: 32 }); } Click Me</code>

Apabila butang ini diklik, tetingkap terminal kami (di mana arahan Tauri Dev berjalan) akan mencetak:

 <code>Hello Alice, 32 year-old human!</code>

Sekali lagi, ini berlaku kerana fungsi println (sebenarnya Rust's Console.log) digunakan oleh perintah salam. Ia muncul dalam tetingkap konsol terminal -bukan dalam konsol penyemak imbas -kerana kod ini masih berjalan di sisi karat/sistem.

Ia juga mungkin untuk menghantar beberapa kandungan kepada pelanggan dari perintah Tauri, jadi mari kita cepat mengubah salam:

 <code>use tauri::{command}; #[command] fn greet(name: String, age: u8) { // implicit return, because no semicolon! format!("Hello {}, {} year-old human!", name, age) } // OR #[command] fn greet(name: String, age: u8) { // explicit `return` statement, must have semicolon return format!("Hello {}, {} year-old human!", name, age); }</code>

Menyedari bahawa saya akan memanggil memohon beberapa kali dan menjadi sedikit malas, saya mengeluarkan pembantu pelanggan ringan untuk mengintegrasikannya:

 <code>// @types/global.d.ts ///<reference types="@sveltejs/kit"></reference> type Dict<t> = Record<string t=""> ; declare const __TAURI__: { invoke: typeof import('@tauri-apps/api/tauri').invoke; } // src/lib/tauri.ts export function dispatch(command: string, args: Dict<string> ) { return __TAURI__.invoke(command, args); }</string></string></t></code>

Kemudian refactor the Greeter.Svelte sebelumnya ke:

 <code>import { dispatch } from '$lib/tauri'; async function onclick() { let output = await dispatch('greet', { name: 'Alice', age: 32 }); console.log('~>', output); //=> "~> Hello Alice, 32 year-old human!" } Click Me</code>

Luar Biasa! Jadi hari Khamis dan saya belum menulis apa -apa kod Redis, tetapi sekurang -kurangnya saya tahu bagaimana untuk menyambungkan dua bahagian otak aplikasi bersama -sama. Sudah tiba masanya untuk menyikat kod klien dan menggantikan semua todo dalam pengendali acara dan menyambungkannya ke kandungan sebenar.

Saya akan menghilangkan butiran di sini kerana dari sini ia sangat khusus aplikasi - dan terutamanya mengenai kisah pengkompil karat yang membawa saya tamparan. Di samping itu, meneroka butiran adalah betul -betul mengapa projek itu adalah sumber terbuka!

Pada tahap yang tinggi, apabila sambungan Redis ditubuhkan dengan butiran yang diberikan, butang Sync boleh diakses dalam laluan /penonton. Apabila butang ini diklik (dan hanya kemudian - kerana kos), fungsi JavaScript dipanggil, yang bertanggungjawab untuk menyambung ke API REST CloudFlare dan menghantar perintah "Redis_Set" untuk setiap kunci. Perintah redis_set ini ditakrifkan dalam lapisan karat-seperti semua arahan berasaskan redis-dan bertanggungjawab untuk benar-benar menulis pasangan nilai utama kepada redis.

Membaca data dari Redis adalah proses yang sangat serupa, sebaliknya. Sebagai contoh, apabila /penonton bermula, semua kunci perlu disenaraikan dan siap. Dalam istilah Svelte, ini bermakna saya perlu menjadualkan arahan Tauri apabila komponen /penonton dipasang. Ini berlaku hampir verbatim di sini. Di samping itu, mengklik nama kunci di bar sisi memaparkan lebih banyak "butiran" mengenai kunci, termasuk masa tamatnya (jika ada), metadata (jika ada), dan nilai sebenar (jika diketahui). Untuk mengoptimumkan kos dan beban rangkaian, kami memutuskan bahawa kami hanya perlu mendapatkan nilai kunci yang diperlukan. Ini memperkenalkan butang Refresh, yang apabila diklik, berinteraksi dengan API REST sekali lagi dan kemudian menjadualkan arahan supaya klien Redis dapat mengemas kini kunci secara individu.

Saya tidak cuba untuk berakhir dengan tergesa -gesa, tetapi apabila anda melihat interaksi yang berjaya antara JavaScript dan Rust Code, anda melihat semua interaksi! Selebihnya pada hari Khamis dan Jumaat pagi saya hanya menentukan permintaan baru-diterima pasangan, yang terasa seperti menghantar mesej ping dan pong.

kesimpulannya

Bagi saya - saya fikir begitu banyak pemaju JavaScript lain - cabaran minggu ini adalah pembelajaran karat. Saya percaya anda telah mendengar ini sebelum ini, dan anda pasti akan mendengarnya lagi pada masa akan datang. Peraturan pemilikan, meminjam cek, dan makna penanda sintaks tunggal aksara (penanda tidak mudah dicari dengan cara) hanyalah beberapa halangan yang saya hadapi. Terima kasih sekali lagi Tauri Discord atas bantuan dan kebaikannya!

Ini juga bermakna bahawa menggunakan Tauri bukan satu cabaran - ia adalah kelegaan yang besar. Saya pasti merancang untuk menggunakan Tauri sekali lagi pada masa akan datang, terutamanya jika saya tahu saya hanya boleh menggunakan WebViewer jika saya mahu. Menggali dan/atau menambah bahagian karat adalah "bahan tambahan" dan hanya memerlukannya jika permohonan saya memerlukannya.

Bagi mereka yang ingin tahu, kerana saya tidak dapat mencari tempat lain untuk menyebutnya: pada macOS, pekerja KV GUI aplikasi beratnya kurang daripada 13 MB. Saya sangat teruja dengan hasil ini!

Sudah tentu, Sveltekit juga membuat jadual ini mungkin. Bukan sahaja menyelamatkan saya setengah hari mengkonfigurasi tali pinggang alat, tetapi pelayan pembangunan HMR segera juga mungkin menjimatkan saya beberapa jam menyegarkan secara manual pelayar - dan kemudian penonton Tauri.

Sekiranya anda melihatnya di sini-ia mengagumkan! Terima kasih banyak atas masa dan perhatian anda. Sebagai peringatan, projek ini boleh didapati di GitHub, dan binari terkini yang terdahulu sentiasa tersedia melalui halaman penerbitannya.

Atas ialah kandungan terperinci Bagaimana saya membina aplikasi desktop silang platform dengan svelte, redis, dan karat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!