Apa Kabar Javascript? Rilis State of JS 2022

State Of JS 2022 sudah rilis yeyy 🎉

Untuk yang belum tahu, State Of JS adalah survey tahunan yang dibuat oleh Devographics yang bertujuan untuk melihat bagaimana tren JS pada tahun ini. Pertanyaan yang diajukan meliputi jenis wawasan tentang JS, framework yang digunakan beserta retensi dan interest, serta banyak lagi yang lainnya.

Dengan jumlah responden hampir 40000, sepertinya 2022 ini menjadi tahun yang sangat mengesankan. Jumlah ini bisa dibilang cukup banyak jika dibandingkan dengan tahun lalu yang hanya 16000-an responden.

Banyaknya responden ini tentu membuat hasil survey semakin tidak terduga tapi juga menarik. Karena semakin banyak opini yang dihasilkan semakin banyak pula insight baru yang bisa kita dapatkan.

Framework, build tool, meta-framework, hingga fitur di Javascript, semua ada.

Ngomong-ngomong tentang insight, hal menarik yang pertama saya dapat adalah tentang istilah logical assignment (operator ||= dan &&=). Benar-benar asing di telinga, tapi ternyata keren juga haha.

Bagaimana dengan insight lainnya? mari kita bahas lebih lanjut.

Sekilas Pandang

Sebagai permulaan, kita coba lihat Library Tier List tahun ini. Karena jujur saja, kebanyakan orang (termasuk saya) suka jika framework jagoannya ada di tier teratas.

Sepertinya tier list ini cukup menggambarkan State of JS tahun ini haha.

Tier list ini didasarkan pada retensi pemakaian alias seberapa tinggi kecenderungan pemakaian kembali. Bisa kita lihat beberapa framework dan tools yang lagi panas-panasnya tahun ini ada di posisi teratas.

Dari sisi build tool kita punya vite. Walaupun baru dirilis akhir tahun 2021, tapi performa dan DX-nya tidak perlu diragukan lagi.

Selanjutnya ada Svelte, web framework pendatang baru juga. Bisa menyaingi Next.js yang sudah eksis bertahun-tahun itu keren sih.

Bicara tentang framework populer, React, Vue, dan Angular apa kabar?

Jika dibanding dengan tahun lalu, React dan Angular terlihat cenderung konsisten. React tetap di posisi A, sedangkan Angular istiqomah di nomor 1 dari bawah.

Di sisi lain, Vue kelihatan turun. Tahun lalu ada di posisi A, sekarang di B. Mungkin ini akibat dari perubahan radikal dari Vue 2 ke 3. Apalagi tahun 2023 jadi tahun EOL untuk vue 2, sehingga banyak developer terpaksa harus migrasi.

Sejujurnya, saya kira Vue akan mengungguli React tahun ini, karena konsep composition API dan SFC-nya yang baru. Tapi sepertinya kebanyakan orang berkata lain.

Dari sisi mobile apps? Saya tidak bisa komentar banyak karena tidak punya pengalaman. Tapi yang jelas ada Electron dan Capacitor yang sepertinya sedang turun pamor.

Si Paling Hype: Svelte

Svelte, svelte, svelte. Di mana-mana dengar svelte.

Framework satu ini awet ada di peringkat atas soal tingkat retensinya. Bisa kita lihat dengan persentase 90%, hanya terpaut 1% dari Solid, sang pendatang baru.

Lagi hype-hype nya, Svelte juga konsisten ada di peringkat satu sebagai framework yang paling ingin dipelajari. Banyak web developer yang penasaran dengan framework yang satu ini — termasuk saya haha.

Mungkin ini disebabkan karena fiturnya yang bisa dibilang cukup berani beda. Ketika framework populer seperti React, Vue, dan Angular menggunakan Virtual DOM, Svelte dikompilasi menjadi vanilla Javascript yang langsung berinteraksi dengan DOM.

Tentu saja ini punya imbas positif pada performa aplikasi yang kita buat. Terbukti dari hasil benchmark, Svelte lebih unggul baik dari sisi runtime maupun bundle size hingga 60%.

Bukan cuma performa saja, DX dengan svelte juga tidak main-main. Bagi saya yang sudah sering menggunakan Vue, mencicipi Svelte serasa ada di rumah sendiri. Tiap file .svelte terdiri dari 3 bagian yaitu script, template, dan style. Benar benar mirip seperti SFC di Vue.

Pemisahan ini juga terkesan lebih natural, karena pemanggilan fungsi dari script ke template terlihat jelas. Yah walaupun ada beberapa bagian yang terkesan seperti magic.

Selain Svelte, ada juga Solid yang sepertinya sangat menjanjikan. Walaupun tidak sepopuler Svelte — masih asing di telinga — tapi retensinya cukup tinggi. Mungkin kedepannya Solid bakal jadi "si paling hype" menggantikan Svelte. Kita tunggu saja tahun depan.

Si Paling Blazing Fast: Vite

Ngomong-ngomong tentang build tool, siapa yang tidak kenal sama Vite. Walaupun baru rilis akhir tahun 2021 tapi sudah diadopsi di mana-mana.

FYI 'Vite' itu dibaca 'vit' — mirip merk air mineral — bukan 'vait'.

Waktu adopsi ini bisa disebut sangat cepat. Dalam waktu kurang dari 1 tahun, framework yang menggunakan webpack sudah beranjak ke Vite semua. Sebut saja Vue, React, Svelte, Preact, Lit, dan banyak lagi.

Vite terbukti punya performa yang lebih cepat dibanding webpack. Vite menggabungkan 2 build tool yang sudah terkenal cepat yaitu Rollup dan ESBuild. ESBuild untuk transpilasi, Rollup untuk bundling.

Development dengan Vite benar-benar memberi developer experience yang sangat apik — setidaknya menurut penilaian saya. HMR-nya bahkan terasa instan. Ketika kita menyimpan file, perubahannya bisa langsung terlihat di browser tanpa perlu menunggu lagi.

In A Nutshell tentang cara kerja Vite bisa dibaca trit dari sang empunya di sini

Baru eksis 1 tahun, sepertinya Vite bakal punya saingan di tahun-tahun depan. Yang paling dekat adalah Turbopack, suksesor dari Webpack — yang saat ini masih berstatus alpha.

Turbopack mengklaim punya performa yang bahkan hingga 5 kali lipat lebih cepat dibanding Vite. Tool garapan Vercel ini bisa jadi menggantikan Vite di masa depan. Kita lihat saja.

Bingung Pilih Framework? Pilih Semua Aja

Web developer sekarang dihadapkan dengan banyak pilihan. Kadang sampai bingung mau pakai yang mana. Kenapa tidak pakai semuanya saja.

Dari sisi Rendering tools (meta-framework) kita punya Astro yang sedang naik daun. Astro membawa konsep unik untuk merender halaman web. Tidak seperti framework lainnya yang mengunggulkan konsep hidrasi, reaktivitas, dan segala sebangsanya.

Dengan Astro kita bisa membuat halaman web menggunakan framework apapun — bahkan dicampur juga bisa. Kita coba comot sedikit kode dari dokumentasinya.

---
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 aneh? haha astro + svelte + react goes brrr

Seakan kembali ke masa lalu, proses rendering pada Astro dilakukan secara penuh di sisi server. Dengan kata lain, client hanya mendapat dokumen HTML dan CSS statis Tanpa JS sama sekali.

Sepertinya familiar ya — ehem PHP, ehem ASP.

Walaupun begitu, Astro sepertinya disukai oleh para developer. Saya sendiri belum pernah mencobanya, tapi semakin kesini semakin penasaran pingin nyoba hehe.

Dari peringkatnya saja sudah terlihat, dengan retensi 93% menyamai SvelteKit dan interest 67%, Astro jelas menyita perhatian banyak web developer.

Apa Kabar Typescript?

Beberapa tahun ini sepertinya menjadi tahunnya Typescript. Bagaimana tidak, sekarang sudah banyak framework yang menyediakan support Typescript dengan matang.

Selain mengurangi kemungkinan bug dengan type checking-nya, menggunakan Typescript juga mengaktifkan fitur-fitur IDE seperti intellisense dan completion — ini yang penting.

Lebih dari 20% responden terpantau menggunakan Typescript secara penuh dalam proyeknya.

Hasil ini mungkin juga dipengaruhi oleh Runtime lainnya yang mendukung Typescript secara native. Seperti Deno dan Bun. Yah, walaupun tidak berkontribusi banyak, tapi 2 Runtime ini punya potensi untuk menggantikan Node di masa depan.

Mungkin kita akan bahas 2 runtime ini di lain waktu.

Apa Kabar Javascript 2023?

Tahun 2022 jadi tahun adopsi tools baru untuk Javascript. Banyak sekali peristiwa yang terjadi.

Svelte yang lagi hype, Vite di mana-mana, rilis SvelteKit, Turbopack alpha, Astro yang berani beda, daan banyak lagi yang lainnya.

Kira-kira 2023 bakal jadi seperti apa ya?

Static rendering ala Astro makin marak, turbopack rilis stabil, ada framework baru lagi, atau jangan-jangan Angular come back?

Kita tunggu saja kedepannya.

Jangan lupa partisipasi di State Of JS tahun ini. Selamat ber-javascript ria 👋