Kerangka Kerja Front-end Paling Populer di 2022

Survei tahunan State of JavaScript telah berakhir untuk tahun 2021. Sedikit terlambat dengan kedatangannya, tetapi lebih baik terlambat daripada tidak sama sekali. Sacha Grief menjelaskannya dengan mengatakan, “Banyak yang terjadi pada tahun 2021. Faktanya, survei tersebut diundur hingga 2022!” .

Aku tidak mengeluh. Yang penting adalah kami memiliki data baru untuk dilihat. Dan, dalam survei terbaru ini, ada banyak hal menarik. Tapi, kami akan fokus pada kumpulan data tertentu. Dan itulah popularitas kerangka kerja front-end. Apa tumpukan pengembang web saat ini?

Yah, ini bukan kejutan besar. Selama 5 tahun berturut-turut, trio emas – React, Angular, dan Vue – terus mendominasi pangsa pasar kerangka kerja front-end.

Perlu dicatat bahwa statistik ini didasarkan pada penggunaan . Jika kita melihat kepuasan , Angular telah kehilangan lebih dari 20%, React sekitar 10%, dan Vue sekitar 10% juga. Dan minat untuk tiga besar juga telah turun sekitar 20% selama beberapa tahun terakhir.

Tapi, itulah yang diharapkan. Kerangka kerja front-end selalu memiliki umur yang rapuh bagi mereka. Menariknya, Svelte telah meningkat pesat selama 2 tahun terakhir. Apakah itu akan menjadi hal besar berikutnya? Saya akan mengawasi karena konsensusnya cukup positif.

Apa tren Front-end saat ini?

Saya pikir menyiratkan bahwa, "ini adalah kerangka kerja front-end terbaik" , agak cerdik. Tentu, beberapa kerangka kerja lebih baik daripada yang lain, dan mereka adalah yang terbaik untuk kasus penggunaan tertentu. Namun, pada kenyataannya, ada alasan mengapa beberapa kerangka kerja front-end bisa populer secara bersamaan.

Jadi, pertanyaan sebenarnya adalah – apa tren terkini dalam pengembangan front-end?

Arsitektur Mikro Frontend

Arsitektur mikro-frontend memisahkan proyek aplikasi skala penuh menjadi "aplikasi mikro" yang dapat dikelola. Dengan kata lain, micro-frontend memungkinkan pengembang dengan berbagai latar belakang untuk bekerja sama dalam proyek yang sama. Jika seseorang lebih mahir dengan Vue dan TypeScript, seharusnya tidak memaksa pengembang lain untuk menggunakan teknologi yang sama.

Dengan demikian, mikro-frontend dapat digunakan untuk menggabungkan beberapa teknologi sekaligus mempertahankan peta jalan produk yang sama. Manfaat tambahan termasuk kecepatan pengembangan yang lebih cepat, lebih sedikit masalah dengan penerapan, dan keserbagunaan dalam preferensi kerangka kerja.

Tentu, ada kelemahan seperti pengujian yang lebih kompleks, manajemen konfigurasi, dan integrasi standar aksesibilitas. Namun, terlepas dari tantangannya – banyak tim front-end yang mengadopsi pendekatan micro-frontend karena berhasil dalam praktik.

Pengembangan Berbasis Komponen

CDD bukanlah hal baru; tren melihat adopsi massal pertama beberapa tahun yang lalu. Namun, meskipun sudah ada cukup lama – CDD terus mendominasi lanskap front-end.

Singkatnya, pengembangan berbasis komponen adalah proses penataan aplikasi di sekitar modul atau komponen. Setiap komponen memiliki peran tertentu dalam desain aplikasi. Dan, dengan demikian, komponen itu sendiri dapat dikelola atau dihilangkan sepenuhnya tanpa menimbulkan masalah di lingkungan produksi.

React.js adalah contoh utama dari kerangka kerja yang sepenuhnya mencakup komponen. Dan, tidak mengejutkan melihat bahwa kerangka kerja front-end teratas semuanya merangkul pengembangan gaya komponen/templat.

JAMStack

JAMstack adalah konsep unik untuk membangun halaman web statis. Alih-alih menerapkan solusi back-end untuk pembuatan konten, API digunakan sebagai gantinya. Hasil akhirnya adalah situs web lebih cepat, tetapi juga lebih mudah dikelola dari sudut pandang pengembang.

Definisi untuk JAMstack:

• J untuk JavaScript – bahasa yang digunakan untuk menulis fungsi front-end.
• A untuk API – meminta konten (data) dari layanan pihak ketiga.
• M untuk Markup – menyusun konten di halaman web.

Adapun tumpukan, ini adalah kombinasi alat yang Anda gunakan. JAMstack dapat digunakan dengan kerangka kerja dan kombinasi layanan apa pun, asalkan mengikuti struktur JAM.

Pelajari lebih lanjut: Jamstack.org // WTF itu Jamstack?

Kerangka Kerja Front-end Teratas untuk 2022

Mari kita lihat lebih dekat kerangka kerja front-end yang mendominasi lanskap. Kita tahu siapa pemain besar, tapi bagaimana dengan pendatang baru? Alpine, Lit, dan Solid semuanya menunjukkan persentase penggunaan yang menjanjikan. Dan kami pasti ingin tahu lebih banyak tentang Svelte.

#1 – Bereaksi

React terus mendominasi ruang front-end. Kerangka kerja ini menonjol dengan DOM virtualnya sendiri, memastikan kinerja aplikasi yang persisten dalam skala besar. Demikian juga, struktur berbasis komponen berarti bahwa pengembangan lebih mudah diakses di seluruh tim.

Sementara kurva pembelajaran untuk React cukup memaafkan, aksesibilitas alat membuat proses dapat dikelola. Yaitu, create-react-app mengotomatiskan proses build untuk boilerplate aplikasi. Dan kemudian ada React DevTools, memberikan pengalaman debug yang dapat diakses dari browser.

Berkat adopsi massal React, pengembang front-end dapat menikmati banyak proyek sumber terbuka. Misalnya, lebih dari selusin sistem desain skala penuh dibangun untuk React. Jumlah jam yang dipangkas dari proses pengembangan ini sangat besar.

#2 – Sudut

Sementara Angular mempertahankan persentase penggunaan yang agak besar, minat dalam kerangka kerja selalu rendah. Siapa tahu, mungkin pengikut setianya karena Angular berbasis TypeScript? Aku hanya bercanda, tentu saja.

Angular menyediakan cukup banyak fleksibilitas untuk membangun SPA – Aplikasi Halaman Tunggal. Mirip dengan kerangka kerja front-end terkemuka lainnya, Angular mengimplementasikan alur kerja pengembangan berbasis Komponen. Dan, tambahkan sistem Template – yang mengelola sifat dinamis dari komponen.

Di atas segalanya, Angular dapat dan sedang digunakan untuk membangun aplikasi untuk semua platform secara bersamaan. Kode dapat digunakan kembali untuk diimplementasikan di aplikasi web, proyek seluler, serta aplikasi desktop asli. Adapun kinerja – dioptimalkan melalui SSR dan Pekerja Web.

Apakah mudah untuk memulai dengan Angular? Tidak persis. Faktanya, jika kita melihat data survei – kepuasan dengan kerangka kerja ini juga sangat menurun. Dan alasan utamanya adalah kurva belajar, di antara preferensi pribadi.

#3 – Vue

Vue tetap menjadi pilihan yang solid untuk pengembangan web yang benar-benar modern. Kerangka kerja progresif baru-baru ini mendorong rilis Vue 3-nya. Dan, berkat fitur dan peningkatan baru, bertujuan untuk memperkuat dirinya sebagai kerangka kerja masuk untuk membangun tumpukan modern.

Rilis baru membawa beberapa implementasi yang telah lama ditunggu-tunggu. Termasuk toolchain build baru yang memanfaatkan Vite. Peningkatan pengelolaan negara melalui Pinia. Dan dokumentasi yang benar-benar dirubah, yang memiliki tumpukan tutorial untuk Anda mulai.

Mengenai popularitasnya, Vue unggul dalam hal fleksibilitas. Kerangka kerja tidak memaksakan rutinitas yang ketat melainkan memungkinkan Anda memutuskan apa yang ingin Anda bangun.

Misalnya, Anda dapat menyusun Komponen Web yang dapat digunakan kembali di tumpukan pengembangan lainnya, termasuk sebagian besar templat HTML dasar. Selain itu, Vue sering digunakan untuk mengerjakan proyek SPA yang kuat karena alat asli, termasuk – CSR, DevTools, dukungan untuk TypeScript, dan alat pengujian.

#4 – Langsing

Jadi, apa masalahnya dengan Svelte? Kerangka kerja telah melihat sedikit adopsi akhir-akhir ini dan bahkan membuat Vercel berinvestasi pada penciptanya, Rich Harris. Pada dasarnya, Svelte bekerja seperti kerangka kerja berbasis komponen lainnya. Anda membangun komponen yang kemudian digunakan untuk menyusun UI aplikasi Anda.

Perbedaan utama dibandingkan dengan kerangka kerja seperti React adalah bahwa Svelte tidak perlu dikirimkan ke browser secara keseluruhan. Sebagai gantinya, aplikasi Svelte harus dikompilasi, yang akan menggabungkan komponen Anda ke dalam file JavaScript yang sudah jadi.

Sementara kerangka kerja lain menggunakan DOM Virtual untuk membuat perubahan, Svelte mengkompilasi aplikasi dengan simpul DOM yang telah ditetapkan sebelumnya. Pendekatan ini memiliki manfaat kinerja yang bertahan lama, seperti yang ditunjukkan oleh Josh Collinsworth. Dan terakhir, Svelte cukup kompatibel dengan kode HTML asli dan tidak memaksakan struktur yang ketat.

Yang ideal untuk pengembangan front-end yang cepat. Berikut ini contohnya:

 // Example.svelte <script lang="typescript"> export let name = 'Svelte'; export let textColor = '#000'; function reset() { name = 'Svelte'; textColor = '#000'; } </script> <h1 style="color: {textColor}" on:dblclick={reset}>Hello, {name}!</h1> <style> h1 { margin: auto; font-family: Georgia, system-ui; font-size: 3rem; font-weight: regular; text-align: none; } </style>

#5 – Tepat

Kerangka kerja meta selalu menjadi hal. Dan, dalam hal ini, Preact bertujuan untuk menjadi alternatif ringan untuk React. Jika Anda pernah bekerja dengan React di masa lalu, memahami Preact akan mudah. Bahkan, Anda dapat dengan nyaman menggunakan komponen di antara kedua kerangka kerja.

Hal pertama yang perlu diperhatikan adalah ukuran bundel, yaitu 4kb gzip untuk Preact, dan 38kb gzip untuk React. Demikian juga, sistem acara ditangani melalui addEventListener, sehingga Anda dapat menggunakan JavaScript vanilla untuk menangani acara.

Jika Anda mencari studi kasus yang terperinci, saya sarankan untuk memeriksa mengapa Etsy pindah dari React ke Preact. Publikasi ini sedekat mungkin dengan mengukur manfaat, dan juga keuntungan jangka panjang dalam hal pemeliharaan dan stabilitas migrasi.

#6 – Bara

Ember kembali begitu lama sehingga mendahului semua kerangka kerja yang disebutkan di atas. Tentu, Ember.js mungkin melihat lebih sedikit penggunaan selama bertahun-tahun. Namun, ini masih merupakan pesaing kuat untuk pengembangan aplikasi yang produktif menggunakan pola MVC. Dan, meskipun kerangka kerja ini populer di kalangan pengembang web, kerangka ini juga cukup fleksibel untuk aplikasi desktop dan seluler.

Lebih penting lagi, Ember tetap dalam pengembangan aktif. Dan rilis Ember 4.0 menambahkan fitur baru untuk mengikuti tren front-end. Hal lain yang membuat Ember istimewa adalah kompatibilitas mundur yang terintegrasi. Sejauh kerangka kerja, Ember melakukan pekerjaan yang sangat baik untuk memastikan kode Anda tidak rusak dengan perubahan besar dalam kerangka itu sendiri.

#7 – Lit

Lit (sebelumnya lit-HTML dan LitElement) adalah kerangka kerja komponen web yang dikelola oleh Google. Lit adalah kerangka kerja yang digunakan dalam tumpukan teknologi untuk Wordle. Game tebak kata populer yang mendapat jutaan pengunjung setiap hari. Jadi, untuk meringkas, Lit paling sering digunakan untuk membangun Aplikasi Web Progresif dengan antarmuka yang sederhana dan kompleks.

Sementara itu, Anda dapat bekerja langsung dengan Komponen Web. Pendekatan ini membantu membuat komponen yang tidak menambah kelebihan kinerja. Dan jejak waktu proses Lit sangat kecil. Sederhananya, kerangka kerja seperti React bergantung pada JavaScript, dan Lit hanya mengimplementasikan komponen web standar.

#8 – Alpen

Alpine.js adalah kerangka kerja front-end JavaScript untuk menyesuaikan perilaku UI. Dan, meskipun Alpine menyerupai Vue dan Angular, itu jauh lebih sedikit menuntut penggunaan sumber daya. Penulisnya, Caleb Porzio, menyebutnya, “sebuah ketukan untuk menutup lubang antara jQuery dan React” .

Alpine bekerja paling baik saat Anda ingin menambahkan interaksi ke desain Anda, tanpa semua biaya tambahan. Misalnya, jika Anda memiliki desain aplikasi bawaan dan ingin menambahkan menu tarik-turun interaktif. Menggunakan React untuk fungsionalitas interaktif dasar adalah berlebihan.

Pikirkan Alpine sebagai sarana untuk mengoptimalkan kerangka kerja web sisi server Anda. Faktanya, penulis sendiri menekankan bahwa Alpine menghasilkan banyak inspirasi dari kerangka kerja seperti Laravel, Django, dll. Demikian juga, ini adalah solusi ringan yang sempurna untuk menambahkan fitur gaya jQuery ke generator situs statis: Jekyll, Hugo, dll.

#9 – Padat

SolidJS telah aktif dalam pengembangan sejak 2019. Namun, pada Juni 2021 framework tersebut lulus ke v1. Dan sejak itu, telah menarik pengikut yang cukup besar. Saat ini, Solid memiliki lebih dari 14 ribu bintang di GitHub, dan ada pembaruan besar setiap 3 bulan atau lebih.

Kerangka kerja ini bersifat deklaratif dan tidak menggunakan DOM Virtual. Sebaliknya, Solid mirip dengan Svelte karena mengkompilasi komponen ke DOM yang sebenarnya. Dengan demikian, memperbarui status khusus untuk kode yang menggunakannya.

Terakhir, SolidJS sangat terinspirasi oleh React. Dan, dalam banyak hal, ada beberapa kesamaan. Termasuk dukungan untuk JSX, API untuk Hooks, dan fitur-fitur seperti Komponen Web, SSR. Menariknya, itu juga sangat cepat.

Tes benchmark yang disimpulkan oleh Ryan Carniato menunjukkan bahwa Solid mampu mengungguli Svelte, Elm, tetapi juga kerangka kerja seperti Vue dan Redux.

#10 – Stimulus

Dan terakhir, setidaknya untuk tahun ini, kami memiliki Stimulus. Kerangka JS minimal yang sedang dikembangkan oleh Basecamp. Salah satu hal pertama yang akan Anda perhatikan adalah memiliki kesamaan dengan Alpine. Dengan kata lain, Stimulus mencoba menjadi alternatif sederhana untuk jQuery.

Kerangka kerja ini paling baik digunakan untuk menyempurnakan HTML yang sudah Anda gunakan sebagai bagian dari struktur halaman Anda. Stimulus memungkinkan Anda mengoptimalkan elemen HTML Anda dengan menambahkan pengontrol data JavaScript. Ini adalah fungsi interaktif dan dinamis, berguna untuk meningkatkan pengiriman formulir, tampilan tombol, dan banyak lagi.

Jika ada satu hal yang bisa diambil dari tren tahun ini, para pengembang ingin menyederhanakan banyak hal. Ini cukup jelas melalui kerangka kerja seperti Lit dan Solid. Meskipun React memiliki ekosistem yang hebat, itu tidak selalu diperlukan untuk membangun aplikasi SPA dan PWA sederhana.

Saya juga percaya bahwa tren itu cukup jelas dengan sendirinya.

Angular dulunya adalah hal terbaik yang pernah ada, tetapi apa yang dihasilkannya membuat para pengembang menjauh. Jadi, tidak mengherankan jika Vue, React, dan Angular kehilangan minat pengembang.

Dan, alternatif yang lebih kecil tetapi lebih rumit semakin populer. Padahal, tahun ini banyak proyek yang berdampak pada ekosistem front-end developer. Yaitu, ada Bun yang bertujuan untuk bersaing sebagai runtime JS de facto dan Segar – yang menekankan kecepatan dan kesederhanaan, dan saya sepenuhnya mengharapkan alat ini menjadi yang teratas dalam daftar laporan tahun depan.