Memperkenalkan Qwik — Framework JavaScript Supercepat

May 08 2023

Gambaran umum tentang fitur dan arsitektur utama Qwik

Seperti yang mungkin Anda ketahui, banyak framework JavaScript telah muncul dengan cepat dalam beberapa tahun terakhir. Tapi yang ini membawa paradigma rendering yang sama sekali baru ke meja.

Memperkenalkan Gambar Sampul Qwik (Dirancang oleh Penulis)

Seperti yang mungkin Anda ketahui, banyak framework JavaScript telah muncul dengan cepat dalam beberapa tahun terakhir. Tapi yang ini membawa paradigma rendering yang sama sekali baru ke meja. Itu tidak lain adalah Qwik.

Qwik seperti kedengarannya, sangat cepat. Ia mengklaim kerangka front-end tercepat saat ini. Ini menawarkan waktu pemuatan halaman secepat kilat, terlepas dari ukuran dan kompleksitas situs Anda. Ini dianggap sebagai kompleksitas O(1) karena dapat mencapai kinerja yang konsisten dalam skala besar.

Versi stabil Qwik 1.0 telah dirilis baru-baru ini. Ini adalah proyek sumber terbuka di bawah lisensi MIT. Anda dapat menjelajahinya di situs resmi mereka dan repositori GitHub publik .

Qwik Dirilis v1.0 (Screenshot dari GitHub — 03/05/2023)

Jadi artikel ini adalah tentang memandu Anda melalui kerangka kerja yang luar biasa ini, fitur-fiturnya, dan strateginya di bawah terpal. Mari selami.

Sebelum kita beralih ke Qwik, pertama-tama kita perlu memahami bagaimana proses rendering terjadi dalam framework JavaScript. Ada dua opsi rendering yang tersedia: rendering sisi klien dan rendering sisi server.

Rendering sisi klien

Seperti yang tersirat dari namanya, browser merender semua data dalam file HTML di sisi klien dalam rendering sisi klien.

Saat pengguna mengunjungi situs web, browser mengirimkan permintaan ke server untuk mengambil file HTML, CSS, dan JS. Setelah menerima file-file ini, browser mengeksekusi file-file itu dan merender situs web. Sehingga pengguna dapat melihat dan berinteraksi dengan konten tersebut.

Ini melibatkan eksekusi semua logika, pengambilan data, perutean, dan templating di sisi klien. Pengguna biasanya melihat halaman kosong hingga seluruh proses ini terjadi.

Render sisi klien (Gambar oleh Penulis)

Kelemahan signifikan dari pendekatan ini adalah saat aplikasi berkembang, waktu untuk merender halaman awal meningkat.

Render sisi server

Dalam rendering sisi server, server mengirimkan HTML yang dirender sebagai respons.

Daripada menghabiskan waktu mengeksekusi file JavaScript seperti pada rendering sisi klien, browser dapat langsung menampilkan situs web menggunakan respons ini.

Ini mempercepat waktu render awal secara signifikan. Jadi, pengguna dapat dengan cepat melihat konten website tanpa menatap layar kosong.

Namun, halaman tersebut hanya dapat dilihat dan tidak interaktif hingga file JavaScript dimuat ke DOM. Setelah JS dimuat, halaman akan dapat berinteraksi dengan pengguna.

Render sisi server (Gambar oleh Penulis)

Proses Hidrasi

Seperti yang telah kita bahas di atas, halaman yang awalnya ditampilkan oleh browser kepada kita belum dapat berinteraksi. Untuk berinteraksi dengan halaman web, JavaScript harus dimuat ke DOM. Proses ini disebut hidrasi.

Ini melibatkan melampirkan pendengar acara, memulihkan status aplikasi dan membangun kembali seluruh pohon komponen dari bawah ke atas.

Teknik ini digunakan oleh hampir semua framework meta saat ini seperti Next.js, Nuxt.js, Angular dll. (Kecuali Astro — Ini menggunakan hidrasi parsial)

Sisi negatif dari proses hidrasi ini adalah meskipun halaman ditampilkan di layar pengguna, ini tidak interaktif hingga kode diunduh dan dijalankan kembali.

Ketika sejumlah besar kode JavaScript perlu dieksekusi, ini dapat menyebabkan aplikasi web melambat.

Sebagian besar kerangka kerja JavaScript ini mengunduh dan menjalankan semua kode sekaligus. Akibatnya, waktu muat (waktu interaksi) menjadi lebih lambat, dan mengikuti perkembangan linier O(n).

Gambar dari dokumentasi Builder (https://www.builder.io/blog/hydration-is-pure-overhead)

Jadi kerangka berdasarkan teknik ini akan mengamati keterlambatan dalam berinteraksi dengan halaman web.

Inilah masalah yang dipecahkan oleh Qwik.

Mengapa Qwik begitu Cepat?

Alasan utama Qwik menjadi super cepat, menghilangkan proses hidrasi ini.

Ini membawa paradigma rendering yang sama sekali baru ke tabel yang disebut Resumability yang benar-benar menghilangkan kebutuhan akan hidrasi. (Hidrasi Nol)

Gambar dari dokumentasi Qwik (https://qwik.builder.io/docs/concepts/resumable/)

Apa itu Resumabilitas?

Resumabilitas mengacu pada kemampuan untuk menjeda eksekusi di server dan melanjutkannya di klien tanpa perlu memutar ulang atau mengunduh semua logika aplikasi.

Aplikasi Qwik dapat diserialisasi sepenuhnya sebagai HTML. Kapan saja, Anda dapat melakukan tindakan dan menangkap semua data dan penutupan dalam aplikasi dan menampilkan semuanya sebagai string HTML.

Kemudian browser dapat mengambil di mana server tinggalkan tanpa perlu mengeksekusi JavaScript sama sekali.

Jadi, akan ada jeda waktu yang sangat besar antara Qwik dan framework lainnya.

Mari kita bahas bagaimana hal ini bisa dilakukan secara mendetail dengan strateginya.

Strategi Qwik

Qwik mencapai tujuan ini melalui dua strategi utama:

Tunda eksekusi dan unduh JavaScript selama mungkin. (kecuali kode awal)
Serialkan status eksekusi aplikasi dan kerangka kerja di server dan lanjutkan di klien. (Catatan — Qwik hanya membuat serial data yang diperlukan untuk halaman saat ini.)

Di Qwik, semuanya dapat dimuat dengan malas:

Komponen pada render (blok inisialisasi dan blok render)
Komponen di jam tangan (efek samping, hanya diunduh jika input berubah)
Pendengar (hanya diunduh saat interaksi)
Gaya (hanya diunduh jika server belum menyediakannya)

Panduan Kode

Mari kita lihat beberapa contoh kode untuk pemahaman yang lebih baik tentang pemuatan lambat dan serialisasi.

Saya telah membuat komponen dasar yang hanya memiliki tombol yang ketika diklik akan mengingatkan nama depan saya. Anda tidak perlu khawatir tentang sintaks di Qwik karena sangat mirip dengan React.

Anda tahu Bereaksi? Anda tahu Qwik.

— Dokumen Resmi

// the `$` suffix for `component` indicates that the component should be
// lazy-loaded.
const Test = component$(() => {
  const store = useStore({ name: "Yasas"});

  // the `$` suffix for `onClick` indicates that the implementation for
  // the handler should be lazy-loaded.
  return <button onClick$={() => alert(`Hi! ${store.name}`)}>Click Here</button>;
});

Contoh Aplikasi Qwik (Gambar oleh Penulis)

Anda akan melihat hal yang istimewa di sini. Ya! Tanda dolar.

Apa ini `$`?

Qwik memiliki Pengoptimal. Ini mirip dengan kompiler. Simbol dolar ini memberi tahu Pengoptimal bahwa fungsi yang mengikutinya harus dimuat dengan lambat.

Artinya JS tidak akan dimuat sampai kita mengklik tombolnya. Bundel JS yang dimuat lambat ini berisi kode yang ingin kami jalankan.

Selain itu, ini memiliki akses ke lingkungan leksikal untuk memperbarui status yang mungkin digunakan bersama oleh komponen lain yang berasal dari bundel pemuatan lambat lainnya.

Qwik menangani semua pemecahan kode dan pemuatan lambat untuk kami di luar kotak. Ini sangat menguntungkan karena sebagai pengembang kita bahkan tidak perlu memikirkannya. Ini adalah perilaku default Qwik.

Apa yang terjadi di bawah tenda?

Sekarang Anda menyadari kemampuan melanjutkan. Tapi bagaimana cara kerjanya? Mari kita gali lebih dalam.

Jika Anda pergi ke tab HTML dari contoh sebelumnya, Anda akan melihat banyak titik dua q. (Q:)

Kode Sumber HTML Qwik (Gambar oleh Penulis)

Qwik memasukkan informasi tambahan ke dalam HTML. Ini dikenal sebagai serialisasi informasi ke dalam HTML. Sehingga nantinya bisa mengambil keputusan.

Qwik membuat serial pendengar acara ke dalam DOM dalam format berikut:

<button on:click="./chunk.js#handler_symbol">Click Here</button>

Pemisahan Kode Qwik (Gambar oleh Penulis)

Ini dilakukan oleh Pengoptimal Qwik. Seperti yang saya jelaskan sebelumnya, Qwik Optimizer adalah sebuah kompiler.

Itu mengambil kode yang saya tulis (file JS itu) memeriksanya dan membuat file baru berdasarkan kode tersebut. Lalu di mana kode kami ditinggalkan, itu menggantikannya dengan referensi ke file baru itu.

Pengoptimal ini telah ditulis dalam Rust dan Anda dapat melihatnya di sini . Periksa parse.rsfile di folder src inti. Ini menunjukkan bagaimana parsing terjadi.

Kemudian kami memiliki Qwik Loader .

Qwik Loader (Gambar oleh Penulis)

Setelah kita memiliki semua file terpisah ini yang siap untuk dimuat malas, kita harus dapat menanggapi peristiwa yang dilakukan pengguna dan kemudian memuat file tersebut dengan malas.

Inilah yang dilakukan Qwik Loader.

Itu menambahkan pendengar acara global dan mencari acara pengguna di mana saja di dokumen.

Setelah event on-click dipicu, ia akan mengimpor file chunk.js yang relevan.

Setelah itu, akan ada modul dengan bagian nama simbol. (#handler_symbol) Lazy dimuat dalam file terpisah. Jadi loader akan membawa file itu dan mengeksekusinya.

Status/nilai akan terikat sesuai dengan qwik/jsonreferensi. (lihat lampiran di atas)

Begitulah fungsi event on-click dijalankan. Anda dapat menemukan perilaku loader ini di repositori GitHub di sini .

Instal dan Jalankan Qwik di Lingkungan Lokal

Mari instal binatang kecil ini di mesin kita.

Prasyarat —Anda harus menginstal Node.js ≥v16.8.

Anda dapat menggunakan Qwik CLI untuk menjalankan aplikasi Qwik dengan mudah.

npm create qwik@latest

Menginstal Qwik menggunakan CLI (Gambar oleh Penulis)

Baiklah. Mari kita membangun hal ini menggunakannpm run build

Qwik Build (Gambar oleh Penulis)

Sekarang Anda akan melihat satu ton potongan kecil masing-masing kurang dari satu kilobyte, bukan satu bundel besar. Ini adalah prosedur pemuatan lambat. Ini memberikan kemampuan bagi Qwik untuk menskalakan JavaScript sebanyak mungkin tanpa batas.

Baiklah! Sekarang Anda dapat memulai aplikasi menggunakan npm run devSitus web default tersedia dihttp://localhost:5173/

Halaman arahan Qwik (Gambar oleh Penulis)

Mari kita lihat bagaimana ini memuat bundel JS acara on-click di tombol Time untuk merayakan menggunakan inspeksi.

Periksa bagaimana bundel JS dimuat (Gambar oleh Penulis)

Jika kami membuka tab jaringan, kami hanya akan menemukan bundel JS awal. Setelah kami mengklik tombol, itu akan memuat bundel JS yang relevan dengan tombol tersebut.

Selain itu, Qwik ramah bagi pengembang karena kami dapat Alt dan mengeklik di mana saja untuk membuka kodenya dari IDE favorit Anda.

Bonus — Jika Anda pergi ke sana http://localhost:5173/demo/flower?pride=truedan Anda akan melihat bunga berwarna-warni yang berputar.

Generator Bunga Qwik (Gambar oleh Penulis)

Qwik memungkinkan Anda untuk menambahkan integrasi agar mudah terhubung ke perkakas dan layanan Anda seperti React, Tailwind CSS, dll. menggunakan npm run qwik addperintah. Integrasi yang didukung tercantum dalam dokumen resmi mereka di sini .

Generator Bunga Qwik (Gambar oleh Penulis)

Qwik juga menawarkan tutorial interaktif yang sangat baik untuk membantu Anda menjadi lebih akrab dengan konsep mereka. Semoga Anda dapat menggunakannya untuk mempelajari Qwik dengan cepat.