Local First HTTPX pt1

Gambaran keseluruhan

Terdapat pandangan biasa di internet bahawa keadaan menjadi lebih teruk dan terus menjadi lebih teruk. Terdapat percambahan iklan pemuatan yang menggemparkan yang mengerikan pada setiap tapak web, setiap enjin carian melemparkan ringkasan AI yang jelek di hadapan hasil carian anda, setiap tapak/apl web nampaknya semakin perlahan dan perlahan. Saya tidak dapat memberikan penyelesaian untuk semua itu, tetapi saya boleh menunjukkan paradigma yang lebih baik untuk reka bentuk tapak web dan aplikasi web. Paradigma itu adalah tempatan dahulu.

Local first ialah prinsip reka bentuk untuk apl web di mana UI dan data ditempatkan bersama dan perubahan pada data disegerakkan dengan pelayan jauh. Apl pertama tempatan berasa cepat dan berprestasi tinggi kerana ia tidak memerlukan RTT rangkaian antara tindakan pengguna dan memaparkan hasil tindakan tersebut. Saya syorkan bermain-main dengan linear.app untuk merasai perasaan apl tempatan kelas pertama. Saya tidak akan menghabiskan banyak masa cuba meyakinkan tentang apl web yang buruk - kerana jika anda jahil dan gembira, saya tidak mahu merosakkan kebahagiaan itu.

Jika anda sudah biasa dengan isu Jira atau Github, anda seharusnya dapat memberitahu dengan segera betapa ketara perbezaan apl tempatan yang pertama. Jira lambat kerana setakat yang saya tahu ia hanya lambat dan ia memuatkan banyak data dengan perlahan dan jika anda mengklik dan kemudian kembali, anda perlu memuat semula semua itu data yang sama sekali lagi. Github ialah aplikasi web SSR yang bermaksud bahawa html dijana pada pelayan dan kemudian dihantar kepada anda. Ini bermakna sebarang interaksi biasanya memerlukan perjalanan pergi balik yang lengkap antara penyemak imbas anda dan pelayan yang biasanya sangat ketara. Ironinya, SSR lambat Github berprestasi jauh lebih baik daripada Jira dalam pengalaman saya - mereka melakukan perkara yang berbeza tetapi saya tidak suka menggunakan Jira. Saya hanya boleh berharap suatu hari nanti saya akan dapat menggunakan Linear di tempat kerja dan ia akan sepantas hari ini.

Saya akan berhenti sebentar di sini dan hanya menjelaskan bahawa hampir mana-mana seni bina apl boleh menjadi sangat perlahan jika dilaksanakan dengan buruk. Saya sangat berhujah bahawa kebanyakan tapak web, aplikasi web, dsb. yang kami lawati setiap hari dilaksanakan dengan buruk. Terdapat pelbagai teknik yang boleh digunakan dalam semua seni bina yang berbeza ini (SPA tradisional, SSR, dll) tetapi tempatan terlebih dahulu memberikan kelebihan yang paling tinggi sebagai seni bina apabila ia berkaitan dengan prestasi.

Pembangunan Didorong Meme

Itu lebih serius daripada yang saya maksudkan jadi mari kita menyelami beberapa Pembangunan Didorong Meme (MDD). Mari kita masuk ke hidangan utama siaran ini dan bercakap tentang HTMX Pertama Tempatan.

HTMX adalah... satu meme dan mungkin juga serius, saya tidak pasti sama ada sesiapa benar-benar tahu. HTMX ialah rangka kerja/perpustakaan hujung hadapan javascript anti-javascript (orang ramai menggunakan istilah tersebut secara longgar). Lebih penting lagi ia adalah meme sangat bagus dan itulah kunci kepada MDD. Jadi saya fikir saya harus menggabungkan HTMX dan tempatan terlebih dahulu untuk mencipta sesuatu yang benar-benar mengerikan lagi cantik. Saya tidak semestinya mengesyorkan pendekatan ini, tetapi saya teruja untuk berkongsi perkara yang telah saya lakukan untuk mencipta apl Todo HTMX Local First yang pertama.

HTMX bukan rangka kerja yang betul tetapi mungkin ia

Matlamat HTMX untuk memudahkan pembangunan bahagian hadapan sambil mengekalkan tahap interaktiviti yang baik. Idea umum HTMX ialah HTML anda akan dipaparkan oleh bahagian belakang — à la Perenderan Sisi Pelayan. Istilah teknikalnya ialah hipermedia sebagai enjin keadaan HATEOS. Jika anda masih ingat bahawa SSR (memerlukan RTT ke pelayan untuk setiap interaksi) mempunyai masalah prestasi dan boleh menyebabkan tapak web berasa lembap (sukar untuk melawan kelajuan cahaya). Jika anda hanya memercikkan interaktiviti ia boleh berfungsi. Tetapi dan ini ialah idea utama Local First HTMX - anda tidak perlu memaparkan HTML pada bahagian belakang. Anda boleh membina "pelayan" dan menyusunnya ke WASM dan menjalankannya dalam penyemak imbas. Ini akan memberi anda semua kecemerlangan kelas pertama Javascript Local First SPA tanpa JS — jauh lebih sedikit daripada JS. Matlamatnya bukan untuk mengelakkan JS tetapi untuk mempunyai apl yang lebih mudah.

Gambaran Keseluruhan Seni Bina

Untuk mengimbas kembali, kami sedang membina apl HTMX Local First dengan menyusun kod SSR kami ke WASM dan kemudian menjalankannya dalam pekerja perkhidmatan. Secara ringkas dan mungkin salah izinkan saya menerangkan beberapa perkara tentang penyemak imbas. Terdapat utas utama, di sinilah perkara JS dan HTML anda biasanya berlaku. Benang utama ialah apa yang mempunyai akses kepada DOM dan sebenarnya boleh memaparkan kandungan. Pelayar telah menambah banyak ciri, tetapi saya ingin menyebut dua. Yang pertama ialah pekerja web, yang membenarkan anda menjalankan kod dalam urutan berbeza yang mempunyai kebenaran terhad (tiada akses kepada DOM). Yang kedua ialah pekerja perkhidmatan - yang seperti pekerja web tetapi mempunyai perbezaan yang penting. Pekerja perkhidmatan boleh dikonfigurasikan untuk memintas semua permintaan mengambil.

Pekerja perkhidmatan boleh melakukan apa yang mereka mahu dengan mereka daripada memproksi mereka, melihat cache atau mengendalikan permintaan itu sendiri. Inilah yang saya ingin manfaatkan - Saya mahu proksi semua permintaan pengambilan dan secara pilihan memilih untuk memaparkan HTML dan menghantarnya kembali.

Permintaan asas HTMX kelihatan seperti ini

<button hx-post="/clicked"
    hx-trigger="click"
    hx-target="#parent-div"
    hx-swap="outerHTML"
>
    Click Me!
</button>

Biasanya ini akan menghantar permintaan HTTP kepada pelayan, tetapi kami mahu memintas permintaan ini dalam pekerja perkhidmatan, mengendalikan permintaan dan mengembalikan HTML. Kemudian di latar belakang pekerja perkhidmatan boleh menyegerakkan data dengan pelayan sambil mengekalkan stor data setempatnya. Dalam catatan susulan, saya akan membincangkan butiran pelaksanaan tentang cara saya melakukan ini, beberapa isu yang saya hadapi, dan kemudian bercakap tentang beberapa idea lanjut.

Nantikan.

Atas ialah kandungan terperinci Local First HTTPX pt1. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!