Apa Kabar JavaScript? Rilis State of JS 2022

State of JS 2022 akhirnya resmi rilis nih, yey! 🎉

Buat kalian yang belum tahu, State of JS tuh survey tahunan yang dibikin sama Devographics. Tujuannya biar kita bisa melihat gimana tren JavaScript di tahun ini. Pertanyaan yang diajukan di survey ini lumayan lengkap, mulai dari fitur bahasa yang paling sering dipakai, framework pilihan beserta tingkat retention (retensi) dan interest (minat), sampai hal-hal menarik lainnya.

Dengan jumlah responden yang hampir menyentuh angka 40.000 orang, tahun 2022 ini bener-bener jadi tahun yang mengesankan banget. Jumlah ini melonjak drastis kalau kalian bandingin sama tahun lalu yang cuma dapet sekitar 16.000-an responden aja.

Banyaknya partisipan ini tentu bikin hasil survey jadi makin nggak terduga tapi juga super menarik. Soalnya, makin banyak opini yang terkumpul, makin banyak pula insight baru yang bisa kita ulik bareng-bareng.

Mulai dari framework, build tool, meta-framework, sampai fitur-fitur baru di JavaScript, semuanya dibahas tuntas di sini.

Ngomong-ngomong soal insight, hal menarik pertama yang aku temukan tuh tentang istilah logical assignment (yaitu operator ||= dan &&=). Jujur, awalnya terasa asing banget di telinga, tapi pas dicoba ternyata keren juga, haha.

Terus, gimana dengan insight menarik lainnya? Yuk, kita bahas satu per satu!

Sekilas Pandang: Siapa yang Ada di Pucuk?

Sebagai permulaan, yuk kita intip library tier list tahun ini. Jujur aja, kebanyakan dari kita (termasuk aku sendiri) pasti seneng banget kalau framework jagoan kita nangkring di posisi teratas, kan? 😎

📷 Ilustrasi: diagram bagan tier list library dan framework JavaScript berdasarkan tingkat retensi kepuasan pengembang.

Daftar peringkat ini cukup menggambarkan peta kekuatan State of JS tahun ini, deh. 😂

Pengelompokan tier list ini dibuat berdasarkan tingkat retention alias seberapa besar kecenderungan developer buat memakai kembali alat tersebut. Terlihat beberapa framework dan tool yang lagi anget-angetnya tahun ini langsung nangkring di posisi paling atas.

Dari kategori build tool, kita punya Vite yang perkasa banget. Walaupun baru dirilis resmi sekitar akhir tahun 2021, performa dan developer experience (DX) yang ditawarkan emang nggak usah diragukan lagi.

Selanjutnya ada Svelte, sebuah framework web yang bisa dibilang masih relatif baru tapi perkembangannya luar biasa. Bisa bersaing ketat dengan Next.js yang udah eksis bertahun-tahun tuh bener-bener pencapaian yang gokil sih.

Terus, gimana kabar trio framework legendaris: React, Vue, dan Angular?

Kalau dibandingin sama tahun lalu, React dan Angular kelihatan cenderung stabil. React tetap kokoh bertahan di tier A, sedangkan Angular masih setia alias istiqomah nangkring di posisi juru kunci dari bawah.

Di sisi lain, Vue tampaknya harus rela turun kasta nih. Tahun lalu mereka ada di tier A, tapi sekarang terpaksa turun ke tier B. Mungkin ini efek dari transisi radikal dari Vue 2 ke Vue 3 yang sempat bikin komunitas heboh. Apalagi, tahun 2023 ini jadi tahun End of Life (EOL) buat Vue 2, jadi banyak developer yang terpaksa kudu migrasi kode mereka.

Sejujurnya, aku sempat ngira Vue bakal bisa mengungguli React tahun ini berkat konsep Composition API dan Single File Component (SFC) barunya yang lebih segar. Tapi ternyata, data di lapangan berkata lain.

Bagaimana dengan kategori mobile apps? Aku nggak bisa komentar banyak soal ini karena nggak punya banyak pengalaman langsung. Tapi kalau dilihat dari datanya, pamor Electron dan Capacitor tampaknya lagi sedikit menurun.

Si Paling Hype: Svelte

Svelte, Svelte, Svelte. Rasanya belakangan ini di mana-mana kita selalu denger nama framework satu ini.

Framework yang satu ini awet banget nangkring di peringkat atas dalam hal tingkat retention. Dengan persentase mencapai 90%, Svelte cuma terpaut tipis 1% aja dari Solid yang merupakan pendatang baru super potensial.

📷 Ilustrasi: grafik perbandingan rasio retensi dan kepuasan pengembang terhadap berbagai framework frontend JavaScript.

Selain lagi hype banget, Svelte juga konsisten menempati peringkat pertama sebagai framework yang paling pengen dipelajari sama para developer. Banyak banget web developer yang penasaran pengen nyicipin kehebatan framework satu ini—termasuk aku sendiri, haha.

Ketertarikan ini mungkin dipicu sama fiturnya yang berani tampil beda. Di saat framework populer lain kayak React, Vue, dan Angular masih mengandalkan Virtual DOM, Svelte justru memilih jalan lain dengan mengompilasi kodenya menjadi vanilla JavaScript yang langsung berinteraksi dengan DOM asli.

Langkah berani ini tentu membawa dampak yang positif banget buat performa aplikasi yang kita bikin. Terbukti dari hasil benchmark, Svelte tergolong unggul jauh baik dari segi runtime maupun ukuran bundle size yang bisa hemat sampai 60%.

Nggak cuma soal performa aja, DX (developer experience) saat nulis kode pakai Svelte juga nggak main-main enaknya. Buat aku yang udah terbiasa pakai Vue, nyobain Svelte tuh rasanya kayak pulang ke rumah sendiri. Setiap berkas dengan ekstensi .svelte terdiri dari tiga bagian utama, yaitu script, template, dan style, yang mirip banget sama struktur SFC di Vue.

Pemasihan struktur ini terasa lebih natural karena aliran data dan fungsi dari script ke template kelihatan jelas banget. Ya, walaupun di beberapa bagian masih ada hal-hari ajaib yang terkesan kayak magic sih.

Selain Svelte, ada satu nama lagi yaitu Solid yang kelihatan sangat menjanjikan. Walaupun sekarang belum sepopuler Svelte dan namanya masih agak asing, tingkat retention yang dimilikinya tergolong tinggi banget. Siapa tahu di masa depan Solid bakal merebut mahkota "si paling hype" dari Svelte. Kita tunggu aja pembuktiannya tahun depan!

Si Paling Blazing Fast: Vite

Ngomong-ngomong tentang build tool, kalian pasti udah nggak asing lagi sama nama Vite. Meski baru resmi meluncur di akhir tahun 2021, perkakas ini langsung diadopsi secara luas di mana-mana.

FYI, nama 'Vite' itu dibaca 'vit'—mirip kayak merk air mineral kemasan—bukan dibaca 'vait' ya!

📷 Ilustrasi: diagram peringkat kepuasan dan minat adopsi build tools JavaScript yang menempatkan Vite di posisi puncak.

Proses adopsinya bisa dibilang kilat banget. Dalam kurun waktu kurang dari satu tahun, hampir semua framework yang sebelumnya memakai Webpack berbondong-bondong pindah haluan ke Vite. Mulai dari Vue, React, Svelte, Preact, Lit, dan masih banyak lagi.

Vite terbukti punya performa yang jauh lebih ngebut dibandingkan Webpack. Rahasianya, Vite menggabungkan keunggulan dua perkakas handal yaitu Rollup dan ESBuild. ESBuild dipakai buat proses transpilation, sedangkan Rollup bertugas menangani bagian bundling akhir.

Pengalaman melakukan development memakai Vite bener-bener kerasa nyaman dan memanjakan developer. Fitur Hot Module Replacement (HMR) miliknya bahkan terasa instan banget. Pas kita menyimpan perubahan di berkas kode, browser bakal langsung memperbarui tampilannya tanpa jeda.

Penjelasan ringkas alias in a nutshell mengenai cara kerja Vite ini bisa kalian baca langsung lewat thread dari pembuatnya di sini.

Walau baru eksis seumur jagung, tampaknya Vite bakal dapet penantang serius di tahun-tahun mendatang. Pesaing terdekatnya nggak lain adalah Turbopack, proyek suksesor Webpack garapan Vercel yang saat ini masih menyandang status alpha.

Turbopack ini mengklaim punya performa yang sanggup melesat hingga 5 kali lipat lebih kencang dibanding Vite. Perkakas garapan Vercel ini punya potensi besar buat menggusur posisi Vite di masa depan. Kita lihat aja nanti perkembangannya.

Bingung Pilih Framework? Pilih Semua Aja!

Para web developer zaman sekarang emang sering banget dihadapkan sama tumpukan pilihan teknologi. Saking banyaknya opsi, kadang kita malah jadi pusing sendiri mau pakai yang mana. Kalau gitu kasusnya, kenapa nggak kita pakai semuanya aja sekalian? 😂

Dari kategori rendering tool (meta-framework), ada Astro yang belakangan ini lagi naik daun banget. Astro mengusung konsep yang cukup unik buat merender halaman website. Konsep ini beda dari kebanyakan framework modern lain yang biasanya sibuk mengunggulkan fitur hydration, reaktivitas, dan segala macamnya.

Kerennya, lewat Astro kita bisa bikin halaman web menggunakan framework apa aja sesuka hati—bahkan dicampur-campur dalam satu halaman pun nggak masalah! Coba kita intip sedikit potongan kode dari dokumentasi resminya berikut ini.

---
import MyReactSidebar from '../components/MyReactSidebar.jsx';
import MyReactButton from '../components/MyReactButton.jsx';
import MySvelteButton from '../components/MySvelteButton.svelte';
---

<MyReactSidebar>
  <p>Here is a sidebar with some text and a button.</p>
  <div slot="actions">
    <MyReactButton client:idle />
    <MySvelteButton client:idle />
  </div>
</MyReactSidebar>

Ada yang kelihatan aneh? Haha, kolaborasi Astro + Svelte + React langsung goes brrr! 😎

Bagaikan mesin waktu yang bawa kita kembali ke masa lalu, proses rendering pada Astro berjalan sepenuhnya di sisi server. Dengan kata lain, sisi client cuma bakal nerima dokumen HTML dan CSS statis tanpa muatan JavaScript sama sekali.

Rasanya kayak familiar ya? Ehem, apa kabar PHP dan ASP? 😂

Meskipun konsepnya klasik, Astro terbukti sangat disukai sama para developer di luar sana. Aku sendiri sebenernya belum pernah mencobanya langsung, tapi makin ke sini kok makin penasaran banget ya buat ikutan nyobain, hehe.

📷 Ilustrasi: grafik survei State of JS yang menunjukkan skor retensi dan minat komunitas terhadap jajaran meta-framework.

Tingginya minat ini kelihatan jelas dari peringkatnya. Dengan tingkat retention mencapai 93% (setara dengan SvelteKit) dan tingkat interest di angka 67%, Astro sukses menyita perhatian besar dari komunitas web developer global.

Apa Kabar TypeScript?

Beberapa tahun belakangan ini emang bisa dibilang jadi tahun keemasan buat TypeScript. Gimana nggak, hampir semua framework modern sekarang udah menyediakan dukungan TypeScript yang matang dan stabil secara bawaan.

Selain bisa meminimalkan potensi munculnya bug lewat fitur type checking, memakai TypeScript juga bakal mengaktifkan fitur-fitur produktivitas di editor kode kita. Sebut saja fitur keren kayak intellisense dan code completion—dan ini yang bener-bener penting banget pas nulis kode.

📷 Ilustrasi: grafik proporsi penggunaan JavaScript murni berbanding TypeScript di kalangan responden State of JS.

Pada data statistik survei tersebut, tercatat lebih dari 20% responden terpantau sudah menggunakan TypeScript secara penuh dalam proyek-proyek mereka.

Lonjakan tren ini kemungkinan juga dipicu oleh kehadiran runtime alternatif yang mendukung TypeScript secara native, misalnya seperti Deno dan Bun. Walaupun kontribusi angkanya saat ini belum terlalu dominan, kedua runtime ini punya potensi besar buat menantang dominasi Node.js di masa mendatang.

Mungkin di lain kesempatan kita bakal bahas kedua runtime tersebut secara lebih mendalam ya.

Apa Kabar JavaScript di 2023?

Tahun 2022 emang bener-bener jadi tahun adopsi perkakas baru buat dunia JavaScript. Ada banyak banget peristiwa menarik yang terjadi di sepanjang tahun ini.

Svelte yang makin berkibar, adopsi Vite di mana-mana, peluncuran SvelteKit, kemunculan Turbopack versi alpha, hingga Astro yang berani tampil beda. Semuanya bener-bener bikin industri ini dinamis banget.

Kira-kira perkembangan di tahun 2023 nanti bakal seperti apa ya?

Apakah tren static rendering ala Astro bakal makin merajai, Turbopack meluncurkan versi stabilnya, muncul framework baru lagi yang nggak kalah revolusioner, atau jangan-jangan Angular bakal bikin kejutan buat comeback?

Kita tunggu aja bareng-bareng gimana kelanjutannya.

Oh iya, jangan lupa buat ikutan berpartisipasi mengisi survey State of JS selanjutnya ya! Selamat bersenang-senang dengan JavaScript! 👋