Local Premier HTMX pt1

Gambaran keseluruhan

Terdapat pegangan biasa di internet bahawa keadaan menjadi lebih buruk 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 lokal 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 ketaranya perbezaan apl pertama tempatan. Jira lambat kerana sejauh 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 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 aplikasi 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 Meme Driven Development (MDD). Mari kita masuk ke hidangan utama siaran ini dan bercakap tentang Local First HTMX.

HTMX adalah... baik 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 idk frontend menggunakan istilah tersebut dengan longgar). Lebih penting lagi ia adalah meme yang 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 aplikasi Local First HTMX Todo 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 aplikasi yang lebih mudah.

Présentation de l'architecture

Pour récapituler, nous construisons une application Local First HTMX en compilant notre code SSR dans WASM, puis en l'exécutant dans un service worker. Permettez-moi d'expliquer brièvement et peut-être de manière incorrecte quelques points sur les navigateurs. Il y a un fil principal, c'est là que se déroulent normalement vos tâches JS et HTML. Le fil principal est ce qui a accès au DOM et peut réellement restituer le contenu. Les navigateurs ont ajouté de nombreuses fonctionnalités, mais je souhaite en mentionner deux. Le premier concerne les Web Workers, qui vous permettent d'exécuter du code dans un thread différent disposant d'autorisations limitées (pas d'accès au DOM). Le second est un service worker - qui ressemble à un web worker mais qui a une distinction importante. Un service worker peut être configuré pour intercepter toutes les requêtes fetch.

Le service worker peut faire ce qu'il veut avec eux, en les proxy, en consultant le cache ou en traitant lui-même la demande. C'est ce dont je veux profiter : je souhaite proxy toutes les demandes de récupération et éventuellement choisir de restituer le HTML et de le renvoyer.

Une requête HTML de base ressemble à ceci

    Click Me!

Normalement, cela enverrait une requête HTTP au serveur, mais nous voulons intercepter cette requête dans le service worker, gérer la requête et renvoyer du HTML. Ensuite, en arrière-plan, le service worker peut synchroniser les données avec le serveur tout en conservant son magasin de données local. Dans un article de suivi, je passerai en revue les détails de mise en œuvre de la façon dont j'ai procédé, certains problèmes que j'ai rencontrés, puis je parlerai d'autres idées.

Restez à l'écoute.

以上是Local Premier HTMX pt1的详细内容。更多信息请关注PHP中文网其他相关文章！