Mereka bentuk Rangka Kerja Web Python Tulen

Pembangunan web adalah salah satu kes penggunaan yang paling popular untuk pengaturcaraan. Python adalah salah satu bahasa pengaturcaraan yang paling popular di dunia. Jadi mengapa kita tidak boleh membina aplikasi web dalam Python?

Membuat UI sepatutnya mudah, tetapi walaupun anda mempunyai jurutera yang hebat dalam pasukan anda, overhed mempelajari bahasa dan alatan baharu merupakan halangan yang besar. Selalunya membuat UI mungkin lebih sukar daripada kerja sebenar yang dilakukan! Kami membina Reflex, rangka kerja web Python sumber terbuka untuk menyelesaikan masalah yang tepat ini.

TLDR

Di bawah tudung, apl Refleks menyusun ke apl bahagian hadapan React dan apl bahagian belakang FastAPI . Hanya UI yang disusun ke Javascript; semua logik aplikasi dan pengurusan keadaan kekal dalam Python dan dijalankan pada pelayan. Refleks menggunakan WebSockets untuk menghantar acara dari hujung hadapan ke hujung belakang, dan untuk menghantar kemas kini keadaan dari hujung belakang ke hujung hadapan.

Penyelesaian Python Sedia Ada

Terdapat beberapa cara untuk membina apl dalam Python, tetapi tiada satu pun daripadanya sesuai dengan keperluan kita.

Di satu pihak, terdapat rangka kerja seperti Django dan Flask yang bagus untuk membina apl web gred pengeluaran. Tetapi mereka hanya mengendalikan bahagian belakang - anda masih perlu menggunakan JavaScript dan rangka kerja bahagian hadapan, serta menulis banyak kod boilerplate untuk menyambungkan bahagian hadapan dan bahagian belakang.

Sebaliknya, perpustakaan Python tulen seperti Dash dan Streamlit boleh menjadi bagus untuk projek kecil, tetapi ia terhad kepada kes penggunaan tertentu dan tidak mempunyai ciri dan prestasi untuk membina apl web penuh. Apabila apl anda berkembang dalam ciri dan kerumitan, anda mungkin mendapati diri anda mencapai had rangka kerja, pada ketika itu anda sama ada perlu mengehadkan idea anda agar sesuai dengan rangka kerja, atau membatalkan projek anda dan membina semula menggunakan "rangka kerja web sebenar".

Kami ingin merapatkan jurang ini dengan mencipta rangka kerja yang mudah dan intuitif untuk dimulakan, sambil kekal fleksibel dan berkuasa untuk menyokong mana-mana apl.

Matlamat Refleks

• Python Tulen : Gunakan satu bahasa untuk segala-galanya.
• Mudah untuk bermula : Bina idea anda dengan mudah tanpa memerlukan pengalaman pembangunan web.
• Fleksibiliti penuh : Apl web harus sepadan dengan kebolehsesuaian dan prestasi rangka kerja web tradisional.
• Bateri disertakan : Kendalikan tindanan penuh dari hujung hadapan, ke hujung belakang, hingga ke letak.

Sekarang mari kita mendalami cara kami membina Reflex untuk memenuhi matlamat ini.

Seni Bina Refleks

Apl web tindanan penuh terdiri daripada bahagian hadapan dan hujung belakang. Bahagian hadapan ialah antara muka pengguna, dan dihidangkan sebagai halaman web yang berjalan pada penyemak imbas pengguna. Bahagian belakang mengendalikan logik dan pengurusan keadaan (seperti pangkalan data dan API), dan dijalankan pada pelayan. Dalam pembangunan web tradisional, ini biasanya dua apl berasingan, dan selalunya ditulis dalam rangka kerja atau bahasa yang berbeza. Sebagai contoh, anda boleh menggabungkan bahagian belakang Flask dengan bahagian hadapan React. Dengan pendekatan ini, anda perlu mengekalkan dua aplikasi berasingan dan akhirnya menulis banyak kod boilerplate untuk menyambungkan bahagian hadapan dan bahagian belakang.

Kami ingin memudahkan proses ini dalam Reflex dengan mentakrifkan kedua-dua bahagian hadapan dan bahagian belakang dalam satu pangkalan kod, sambil menggunakan Python untuk segala-galanya. Pembangun hanya perlu bimbang tentang logik apl mereka dan bukan tentang butiran pelaksanaan peringkat rendah.

Bahagian hadapan

Kami mahu apl Reflex kelihatan dan berasa seperti apl web tradisional kepada pengguna akhir, sementara masih mudah dibina dan diselenggara untuk pembangun. Untuk melakukan ini, kami membina di atas teknologi web yang matang dan popular.

Apabila anda reflex run apl anda, Reflex menyusun bahagian hadapan ke bawah ke satu halaman apl Next.js dan menyajikannya pada port (secara lalai 3000 ) yang boleh anda akses dalam penyemak imbas anda.

Tugas bahagian hadapan adalah untuk menggambarkan keadaan apl dan menghantar acara ke bahagian belakang apabila pengguna berinteraksi dengan UI. Tiada logik sebenar dijalankan pada bahagian hadapan.

Komponen

Bahagian hadapan refleks dibina menggunakan komponen yang boleh digubah bersama untuk mencipta UI yang kompleks. Daripada menggunakan bahasa templat yang mencampurkan HTML dan Python, kami hanya menggunakan fungsi Python untuk mentakrifkan UI.

Di bawah tudung, komponen menyusun ke komponen React. Kebanyakan komponen teras kami adalah berdasarkan Radix , perpustakaan komponen React yang popular. Kami juga mempunyai banyak komponen lain untuk graf, jadual data dan banyak lagi. Kami memilih React kerana ia adalah perpustakaan yang popular dengan ekosistem yang besar. Matlamat kami bukan untuk mencipta semula ekosistem web, tetapi untuk menjadikannya boleh diakses oleh pembangun Python.

Ini juga membolehkan pengguna kami membawa komponen mereka sendiri jika kami tidak mempunyai komponen yang mereka perlukan. Pengguna boleh membungkus komponen React mereka sendiri dan kemudian menerbitkannya untuk digunakan oleh orang lain. Lama kelamaan kami akan membina ekosistem komponen pihak ketiga kami supaya pengguna boleh mencari dan menggunakan komponen yang telah dibina oleh orang lain dengan mudah.

Penggayaan

Kami mahu memastikan apl Refleks kelihatan bagus di luar kotak, sambil masih memberi pembangun kawalan penuh ke atas penampilan apl mereka.

Kami mempunyai sistem tema teras yang membolehkan anda menetapkan pilihan penggayaan tahap tinggi seperti mod gelap dan warna aksen di seluruh apl anda untuk memberikan rupa dan rasa yang bersatu.

Di luar ini, komponen Refleks boleh digayakan menggunakan kuasa penuh CSS. Kami memanfaatkan perpustakaan Emosi untuk membenarkan penggayaan "CSS-in-Python", supaya anda boleh menghantar mana-mana prop CSS sebagai hujah kata kunci kepada komponen. Ini termasuk prop responsif dengan menghantar senarai nilai.

Bahagian belakang

Dalam Reflex hanya bahagian hadapan dikompilasi ke Javascript dan berjalan pada penyemak imbas pengguna, manakala semua keadaan dan logik kekal dalam Python dan dijalankan pada pelayan. Apabila anda reflex run , kami memulakan pelayan FastAPI (secara lalai pada port 8000 ) yang disambungkan ke bahagian hadapan melalui soket web.

Semua keadaan dan logik ditakrifkan dalam kelas State . Negeri ini terdiri daripada vars dan pengendali acara . Var ialah sebarang nilai dalam apl anda yang boleh berubah dari semasa ke semasa. Ia ditakrifkan sebagai atribut kelas pada kelas State anda dan mungkin mana-mana jenis Python yang boleh disirikan kepada JSON.

Pengendali acara ialah kaedah dalam kelas State anda yang dipanggil apabila pengguna berinteraksi dengan UI. Ia adalah satu-satunya cara kita boleh mengubah suai vars dalam Reflex, dan boleh dipanggil sebagai tindak balas kepada tindakan pengguna, seperti mengklik butang atau menaip dalam kotak teks.

Memandangkan pengendali acara dijalankan pada bahagian belakang, anda boleh menggunakan mana-mana perpustakaan Python di dalamnya.

Pemprosesan Acara

Biasanya apabila menulis apl web, anda perlu menulis banyak kod boilerplate untuk menyambungkan bahagian hadapan dan bahagian belakang. Dengan Reflex, anda tidak perlu risau tentang itu - kami mengendalikan komunikasi antara bahagian hadapan dan bahagian belakang untuk anda. Pembangun hanya perlu menulis logik pengendali acara mereka, dan apabila vars dikemas kini, UI dikemas kini secara automatik.

Pencetus Peristiwa

Pengguna boleh berinteraksi dengan UI dalam pelbagai cara, seperti mengklik butang, menaip dalam kotak teks atau melayang di atas elemen. Dalam Refleks, kami memanggil pencetus peristiwa ini .

Barisan Acara

Di bahagian hadapan, kami mengekalkan baris gilir acara untuk semua acara yang belum selesai. Peristiwa terdiri daripada tiga keping data utama:

• Token klien : Setiap pelanggan (tab penyemak imbas) mempunyai token unik untuk mengenal pastinya. Ini membolehkan bahagian belakang mengetahui keadaan yang hendak dikemas kini.
• pengendali acara : Pengendali acara untuk dijalankan di negeri.
• hujah : Hujah untuk diserahkan kepada pengendali acara.

Apabila peristiwa dicetuskan, ia akan ditambahkan pada baris gilir. Kami mempunyai bendera processing untuk memastikan hanya satu acara diproses pada satu masa. Ini memastikan negeri sentiasa konsisten dan tidak ada sebarang syarat perlumbaan dengan dua pengendali acara mengubah suai negeri pada masa yang sama. Terdapat pengecualian untuk ini, seperti acara latar belakang yang membolehkan anda menjalankan acara di latar belakang tanpa menyekat UI.

Setelah acara sedia untuk diproses, ia dihantar ke bahagian belakang melalui sambungan WebSocket.

Pengurus Negeri

Setelah acara diterima, ia diproses di bahagian belakang. Refleks menggunakan pengurus negeri yang mengekalkan pemetaan antara token pelanggan dan keadaan mereka. Secara lalai, pengurus negeri hanyalah kamus dalam ingatan, tetapi ia boleh dilanjutkan untuk menggunakan pangkalan data atau cache. Dalam pengeluaran kami menggunakan Redis sebagai pengurus negeri kami.

Pengendalian Acara

Sebaik sahaja kita mempunyai keadaan pengguna, langkah seterusnya ialah menjalankan pengendali acara dengan argumen.

Kemas Kini Negeri

Setiap kali pengendali acara kembali (atau menghasilkan), kami menyimpan keadaan dalam pengurus negeri dan menghantar kemas kini negeri ke bahagian hadapan untuk mengemas kini UI. Untuk mengekalkan prestasi semasa keadaan anda berkembang, secara dalaman Reflex menjejaki vars yang dikemas kini semasa pengendali acara ( dirty vars ).

Apabila pengendali acara selesai memproses, kami mencari semua vars kotor dan membuat kemas kini keadaan untuk dihantar ke bahagian hadapan.

Kami menyimpan keadaan baharu dalam pengurus negeri kami, dan kemudian menghantar kemas kini negeri ke bahagian hadapan. Bahagian hadapan kemudian mengemas kini UI untuk mencerminkan keadaan baharu.

Kesimpulan

Saya harap ini memberikan gambaran yang baik tentang cara Refleks berfungsi di bawah tudung. Kami akan mempunyai lebih banyak siaran yang akan dikeluarkan untuk berkongsi cara kami menjadikan Refleks berskala dan berprestasi melalui ciri-ciri seperti sharding keadaan dan pengoptimuman pengkompil.