Yang baru di Framework JavaScript (Mei 2024)

Katie Hempenius
Katie Hempenius
X
Addy Osmani
Addy Osmani
X GitHub

Mungkin sulit untuk mengikuti semua yang terjadi dengan framework JavaScript. Dokumen ini memberikan sorotan singkat tentang peristiwa terbaru dalam ekosistem framework JavaScript selama sekitar setahun terakhir. Untuk diskusi yang lebih panjang tentang beberapa topik ini, lihat diskusi Menavigasi Ekosistem Framework JavaScript yang relevan dari acara Google I/O tahun ini.

Diagram yang membandingkan fitur framework

Seperti yang ditunjukkan dalam diagram, framework JavaScript berkumpul pada sejumlah fitur dan arsitektur yang serupa. Layanan tersebut mencakup arsitektur berbasis komponen, perutean berbasis file, dan dukungan SSR modern. Konvergensi ini menunjukkan kematangan dan evolusi ekosistem saat framework belajar satu sama lain dan mengadopsi praktik terbaik.

Pada saat yang sama, sejumlah tren terbaru (seperti komponen server dan pendekatan yang berbeda untuk reaktivitas yang mendetail) terus membuat masing-masing framework memiliki perbedaan. Untuk membantu memahami tren ini dengan lebih baik, kami mempelajarinya satu per satu frameworknya.

Angular

Rilis terbaru Angular memuat berbagai perubahan signifikan termasuk sinyal, tampilan yang dapat ditangguhkan, NgOptimziedImage, hidrasi yang tidak merusak, dan hidrasi parsial. Beberapa sorotan mencakup:

  • Sinyal: Sinyal adalah pendekatan yang digunakan oleh beberapa framework (termasuk sekarang Angular) untuk melacak status dalam aplikasi. Sinyal Angular dapat meningkatkan performa runtime—termasuk Interaction to Next Paint (INP)—dengan mengurangi jumlah komputasi yang harus terjadi selama deteksi perubahan.
  • Tampilan yang dapat ditangguhkan: Tampilan yang dapat ditangguhkan memungkinkan untuk menunda pemuatan komponen, perintah, dan pipa tertentu. Misalnya, Anda dapat menunda pemuatan dependensi hingga konten memasuki area pandang atau hingga thread utama tidak ada aktivitas.
  • NgOptimizedImage: NgOptimizedImage adalah komponen gambar untuk Angular yang mengotomatiskan penerapan praktik terbaik pemuatan gambar.
  • Hidrasi non-destruktif: Hidrasi non-destruktif memperbaiki kedipan yang akan terjadi saat DOM aplikasi Angular yang dirender sisi server dibuat ulang di sisi klien.
  • Hidrasi sebagian: Tim Angular akan segera merilis pratinjau developer untuk hidrasi parsial. Dengan hidrasi parsial, secara default, browser tidak memuat JavaScript halaman saat halaman dirender. Sebagai gantinya, bagian tertentu halaman akan terhidrasi saat pengguna berinteraksi dengan halaman.

Astro

Astro, pembuat situs statis modern, telah membuat gebrakan dengan pendekatan inovatifnya terhadap pengembangan web. Dengan fokus pada performa dan pengalaman developer, Astro telah merilis beberapa fitur dan update yang menarik:

  • Kepulauan Astro: Kepulauan Astro memungkinkan developer membuat komponen UI interaktif yang terisolasi dari bagian halaman lainnya. Hal ini memungkinkan update yang efisien dan performa yang optimal.
  • Rendering campuran: Astro kini mendukung rendering hybrid, yang menggabungkan manfaat pembuatan situs statis dan rendering sisi server untuk meningkatkan fleksibilitas.
  • Komponen Image dan Picture: Astro telah memperkenalkan komponen Image dan Picture baru yang menyederhanakan penanganan gambar dan menyediakan pengoptimalan otomatis.
  • Dukungan View Transitions: Astro menawarkan dukungan bawaan untuk View Transitions API, sehingga memungkinkan transisi halaman yang lancar dan lancar.
  • Astro Dev Toolbar: Astro Dev Toolbar menyediakan serangkaian alat yang canggih untuk men-debug dan mengoptimalkan aplikasi Astro.

Reaksi

Tahun lalu, rilis Komponen Server React memperkenalkan pendekatan baru untuk komponen React. Sejak saat itu, tim React telah mengerjakan berbagai fitur baru termasuk fitur React Compiler dan Server Actions, serta:

  • Komponen Server: Komponen server reaksi adalah komponen yang mengambil data dan dirender di server sebelum di-streaming ke klien. Tindakan ini akan memindahkan pekerjaan rendering ke server dan mengurangi jumlah kode yang perlu dikirim ke klien.
  • React Compiler: React Compiler adalah compiler yang dapat memprioritaskan komponen secara otomatis. Hal ini meningkatkan performa dengan mengurangi rendering ulang yang tidak perlu. Tim React mengatakan bahwa developer akan dapat mengadopsi React Compiler tanpa membuat perubahan kode apa pun.
  • Tindakan Server: Tindakan Server memungkinkan komunikasi klien ke server. Dengan Tindakan Server, Anda dapat menentukan fungsi sisi server yang dapat dipanggil langsung dari komponen React, sehingga tidak perlu melakukan panggilan API manual dan pengelolaan status yang kompleks. Hal ini dapat sangat berguna untuk hal-hal seperti mutasi data dan pengiriman formulir.
  • Pemuatan Aset: React telah mengerjakan API deklaratif untuk pramuat dan memuat aset seperti skrip, gaya, font, dan gambar.
  • Rendering di Luar Layar: React juga telah berfungsi di Rendering di Luar Layar. Rendering di Luar Layar adalah "kemampuan mendatang di React untuk merender layar di latar belakang tanpa overhead performa tambahan. Anda dapat menganggapnya sebagai versi properti CSS visibilitas konten yang tidak hanya berfungsi untuk elemen DOM, tetapi juga komponen React."

Remix

Remix, framework web full stack, telah mendapatkan perhatian di komunitas developer. Dengan fokusnya pada dasar-dasar web dan pengalaman developer yang ditingkatkan, Remix telah memperkenalkan beberapa update penting:

  • Rilis Remix 2.0: Remix 2.0, yang dirilis pada September 2023, menghadirkan peningkatan yang signifikan dan fitur baru ke framework.
  • Dukungan stabil untuk Vite: Remix kini menawarkan dukungan yang stabil untuk Vite, alat build yang cepat dan ringan, yang menyediakan build pengembangan yang lebih cepat dan performa yang lebih baik.
  • Mode SPA: Remix memperkenalkan mode SPA, yang memungkinkan pembuatan situs yang sepenuhnya statis tanpa memerlukan server JavaScript dalam produksi. Hal ini memungkinkan developer menggunakan fitur canggih Remix seperti pemilihan rute berbasis file, pemisahan kode otomatis, dan lainnya, dengan tetap mempertahankan kemudahan deployment situs statis.

Next.js

Rilis Next.js 13.4 pada Mei 2023 sangat penting karena menghadirkan dukungan yang stabil untuk Komponen Server React, streaming, dan Suspense. Sejak saat itu, Next.js terus membangun dukungan untuk React API baru (misalnya, Action Server) dan melakukan iterasi pengalaman developer melalui inisiatif seperti Turbopack. Sorotan lainnya mencakup:

  • Router Aplikasi: Router Aplikasi, yang menjadi stabil di Next.js 13.4, adalah cara baru untuk menyusun dan mengelola pemilihan rute di aplikasi Next.js. Router Aplikasi adalah prasyarat untuk menggunakan fitur Next.js baru seperti tata letak bersama dan perutean bertingkat, serta React API baru seperti Komponen Server React, Suspense, dan Tindakan Server di aplikasi Next.js.

  • Turbopack: pendekatan yang saat ini eksperimental) untuk rendering halaman yang dibuat berdasarkan Suspense API React. Pra-rendering sebagian merender halaman menggunakan shell pemuatan statis. Namun, shell meninggalkan "lubang" untuk konten dinamis dalam halaman, dan konten ini dimuat secara asinkron. Hal ini memberikan manfaat performa dari halaman statis yang dapat di-cache sekaligus tetap dapat menggabungkan data dinamis ke konten halaman.

Vue

Rilis terbaru Vue, Vue 3.4, menyertakan berbagai peningkatan performa. Vue saat ini juga sedang mengerjakan Vue Vapor, yang juga berorientasi performa. Berikut adalah beberapa sorotan tentang apa yang terjadi di ruang ini:

  • Vue 3.4 dirilis: Fiturnya mencakup "Parser yang sepenuhnya ditulis ulang, yang dua kali lebih cepat, kompilasi SFC yang lebih cepat, dan sistem reaktivitas yang difaktorkan ulang yang meningkatkan efisiensi penghitungan ulang."
  • Vue Vapor Mode: Vue sedang mengerjakan Mode Vapor, sebuah strategi kompilasi keikutsertaan yang berorientasi performa yang berfungsi dengan Komponen File Vue Single. Mode Uap menghasilkan kode yang berperforma lebih tinggi daripada kode yang saat ini dihasilkan oleh Vue Compiler. Selain itu, penggunaan Mode Vapor dengan semua komponen akan menghilangkan kebutuhan akan DOM Virtual Vue (yang mengurangi ukuran paket).
  • Vue 2 mencapai EOL: Akhir siklus proses (EOL) Vue 2 adalah 31 Desember 2023. Namun, Vue 2 masih cukup banyak digunakan: ~50% download paket npm Vue adalah untuk Vue 2.

Kacang

Nuxt mendekati rilis Nuxt 4. Selain rilis framework Nuxt yang sering dilakukan selama setahun terakhir, ekosistem modul Nuxt telah berkembang hingga hampir 220 modul. Beberapa perkembangan terbaru dalam bidang ini antara lain:

Solid

Solid sedang mengupayakan rilis 1.0 stabil dari framework meta SolidStart mereka. SolidStart menawarkan reaktivitas yang sangat detail, perutean isomorfik, dan dukungan untuk berbagai mode rendering. Sorotan meliputi:

  • Reaktivitas yang mendetail: Sistem reaktivitas padat memungkinkan update yang tepat dan performa yang optimal, sehingga memungkinkan rendering dan pengelolaan status yang efisien.
  • Perutean isomorfik: SolidStart memberikan pendekatan terpadu untuk perutean, sehingga developer dapat menentukan rute yang berfungsi dengan lancar di klien dan server.
  • Mode rendering yang fleksibel: SolidStart mendukung berbagai mode rendering, termasuk rendering sisi server, pembuatan situs statis, dan rendering sisi klien, sehingga developer memiliki fleksibilitas untuk memilih pendekatan terbaik untuk aplikasi mereka.

Lengkung

Selama setahun terakhir, tim Svelte berfokus pada rilis mendatang Svelte 5, yang akan signifikan. Sorotan lainnya mencakup:

  • Svelte 5 akan segera hadir: Selain menyertakan "penulisan ulang compiler dan runtime Svelte", Svelte 5 juga memperkenalkan konsep Runes.
  • Runes diumumkan: Rune adalah fitur yang akan datang di Svelte 5. "Rune membuka reaktivitas universal yang halus... Dengan rune, reaktivitas melampaui batas file .svelte... Reaktivitas Svelte 5 didukung oleh sinyal - tetapi, [tidak seperti framework lainnya], di Svelte 5, sinyal adalah detail implementasi yang tersembunyi, bukan sesuatu yang berinteraksi dengan Anda secara langsung."
  • SvelteKit 2 dirilis: SvelteKit adalah framework meta untuk Svelte. Fitur dalam rilis ini mencakup perutean dangkal dan dukungan untuk Vite 5.

Aurora Krom

Chrome Aurora adalah tim di Google yang berkolaborasi dengan berbagai framework web open source untuk meningkatkan pengalaman pengguna—terutama performa—di seluruh web. Berikut beberapa inisiatif yang kami kontribusikan selama setahun terakhir:

Kesimpulan

Ekosistem framework JavaScript terus berkembang dengan pesat, dengan setiap framework menghadirkan serangkaian inovasi dan peningkatannya sendiri. Baik Anda tertarik dengan fitur terbaru framework yang sudah ada seperti Angular, React, dan Vue, maupun menjelajahi opsi yang lebih baru seperti Astro, Remix, dan Solid, tidak ada kekurangan pengembangan menarik untuk diikuti.

Sebagai developer, terus mengikuti informasi tentang kemajuan ini membantu kami membuat keputusan yang tepat saat memilih framework untuk project kami. Dengan memahami kelebihan dan fitur unik setiap framework, kami dapat memilih framework yang paling sesuai dengan persyaratan project dan preferensi pengembangan kami.

Kami harap ringkasan ini memberi Anda gambaran sekilas tentang status framework JavaScript saat ini. Untuk mempelajari lebih dalam topik yang dibahas dalam postingan blog ini, pastikan untuk melihat diskusi yang menyertainya dari Google I/O. Selamat membuat kode!