Evolusi UI Web: Dari jQuery UI, Bootstrap, React hingga shadcn/ui

Evolusi UI web sangat menarik jika kita melihat kembali perjalanan pengembangan antarmuka website dari masa ke masa. Perubahan ini mencerminkan cara developer membangun aplikasi web, mulai dari era manipulasi DOM secara manual, revolusi desain responsif, hingga arsitektur modern berbasis komponen seperti sekarang. 😆

Berikut perjalanan singkat perkembangan UI library dan CSS framework yang cukup berpengaruh dalam sejarah pengembangan web.

1. Era DOM Manipulation & Widget: Akhir 2000-an hingga Awal 2010-an

Pada era ini, logika antarmuka web masih sangat bergantung pada HTML statis. Jika ingin membuat tampilan yang lebih interaktif, developer biasanya menggunakan JavaScript dan terutama jQuery untuk melakukan manipulasi DOM.

jQuery UI — 2007

jQuery UI menjadi salah satu pionir UI library populer pada masanya. Library ini menyediakan berbagai komponen seperti datepicker, dialog box, slider, accordion, hingga fitur drag-and-drop.

Fitur-fitur tersebut terlihat sederhana sekarang, tetapi pada masa browser seperti Internet Explorer 6 masih banyak digunakan, membuat komponen interaktif yang konsisten di berbagai browser bukanlah pekerjaan mudah.

Ext JS / Sencha — 2007

Ext JS, yang kemudian berkembang di bawah Sencha, sangat populer di kalangan enterprise untuk membangun aplikasi web kompleks yang terasa seperti aplikasi desktop.

Komponennya sangat lengkap, mulai dari data grid, tree, form, panel, hingga berbagai komponen untuk membangun aplikasi bisnis.

jQuery Mobile — 2010

jQuery Mobile ikut populer pada era awal smartphone, ketika iPhone dan Android mulai mengubah cara pengguna mengakses website.

Framework ini memungkinkan developer membuat tampilan yang touch-friendly hanya dengan menambahkan atribut tertentu pada HTML, misalnya:

<div data-role="page">
  ...
</div>

Pada masanya, pendekatan seperti ini terasa sangat praktis. 😅

2. Era CSS Framework & Revolusi Responsive Web Design: 2011–2015

Ketika smartphone dan tablet semakin populer, developer harus menghadapi semakin banyak ukuran layar. Responsive web design akhirnya menjadi kebutuhan utama dalam pengembangan website modern.

Twitter Bootstrap — 2011

Bootstrap menjadi salah satu framework yang paling berpengaruh dalam sejarah UI web modern.

Bootstrap memperkenalkan sistem grid responsif, utility class, serta berbagai komponen siap pakai seperti navbar, button, modal, form, dan banyak elemen lainnya.

Popularitasnya begitu besar sampai banyak website pada era tersebut memiliki tampilan yang sangat mudah dikenali sebagai "gaya Bootstrap". 😎

ZURB Foundation — 2011

Foundation dari ZURB menjadi salah satu pesaing utama Bootstrap. Framework ini dikenal fleksibel dan banyak digunakan oleh developer maupun agency yang membutuhkan kontrol lebih besar terhadap desain.

Semantic UI — 2013

Semantic UI membawa pendekatan menarik dengan menggunakan nama class CSS yang lebih mudah dibaca seperti bahasa manusia.

<div class="ui large primary button">
  Submit
</div>

Pendekatan ini membuat struktur tampilan lebih mudah dipahami dibandingkan nama class yang terlalu abstrak.

Materialize CSS — 2014

Materialize CSS menjadi salah satu pilihan populer bagi developer yang ingin menerapkan konsep Material Design dari Google menggunakan HTML, CSS, dan JavaScript.

3. Era JavaScript Framework & Component-Based UI: 2015–2020

Ketika React, Vue, dan Angular semakin dominan, konsep UI library ikut berubah.

Developer tidak lagi hanya menempelkan class CSS ke elemen HTML. UI mulai dibangun sebagai komponen JavaScript yang menggabungkan struktur tampilan, state, interaksi, dan styling.

Material UI / MUI — 2014

Material UI, yang kini dikenal sebagai MUI, menjadi salah satu library komponen React paling populer untuk menerapkan Material Design.

Library ini sangat membantu developer React membangun aplikasi modern tanpa harus membuat setiap komponen UI dari nol.

Ant Design — 2015

Ant Design dikembangkan oleh tim di Alibaba Group. Library ini menjadi sangat populer untuk aplikasi enterprise, dashboard, dan admin panel.

Salah satu kekuatannya adalah koleksi komponen yang sangat lengkap, terutama untuk tabel data, form, navigasi, dan kebutuhan aplikasi bisnis.

Vuetify dan Element UI — 2016

Di ekosistem Vue.js, Vuetify dan Element UI menjadi dua nama besar.

Vuetify banyak digunakan untuk membangun antarmuka berbasis Material Design, sedangkan Element UI sangat populer untuk dashboard dan aplikasi web desktop.

Chakra UI — 2019

Chakra UI membawa pendekatan yang lebih modern ke React melalui konsep style props.

Styling dapat ditulis langsung melalui properti komponen, sekaligus memberikan perhatian besar terhadap aksesibilitas.

4. Era Utility-First, Headless UI & Copy-Paste: 2020–Sekarang

Setelah bertahun-tahun menggunakan UI library dengan desain bawaan, banyak developer mulai merasa kesulitan ketika harus melakukan override CSS secara terus-menerus.

Tren kemudian bergeser menuju kontrol penuh terhadap tampilan, utility-first CSS, komponen headless, dan arsitektur komponen yang bisa dimodifikasi langsung oleh developer.

Tailwind CSS — 2017

Tailwind CSS secara teknis merupakan CSS framework, bukan UI component library.

Namun pendekatan utility-first yang dibawanya memberikan pengaruh besar terhadap ekosistem UI modern.

Alih-alih menggunakan komponen dengan desain yang sudah ditentukan, developer menyusun tampilan menggunakan utility class langsung di markup.

Headless UI & Radix UI — Era 2020-an

Kemudian muncul paradigma headless UI.

Library seperti Headless UI dan Radix UI berfokus menyediakan perilaku komponen, aksesibilitas, navigasi keyboard, focus management, dan interaksi, tanpa memaksakan desain visual tertentu.

Developer kemudian bebas menentukan tampilannya sendiri, dan pendekatan ini sering dipadukan dengan Tailwind CSS.

shadcn/ui — 2023

shadcn/ui menjadi salah satu pendekatan UI yang sangat populer dalam ekosistem React modern.

Hal yang membuatnya berbeda adalah konsep copy-paste atau code ownership. Komponen yang dibutuhkan ditambahkan langsung ke source code proyek, bukan sekadar digunakan sebagai komponen tersembunyi di dalam node_modules.

Contohnya, ketika menambahkan sebuah komponen melalui CLI, source code komponen tersebut akan menjadi bagian dari project kita.

npx shadcn@latest add button

Hasilnya, developer mendapatkan kontrol yang jauh lebih besar karena source code komponen tersebut dapat dibaca, dimodifikasi, dan dikembangkan sesuai kebutuhan aplikasi.

Bagaimana Evolusi UI Web Mengubah Cara Developer Bekerja?

Jika diperhatikan, perjalanan UI web memperlihatkan perubahan paradigma yang cukup menarik:

HTML + DOM Manual
        ↓
jQuery + Widget
        ↓
CSS Framework
        ↓
Component-Based UI
        ↓
Utility-First CSS
        ↓
Headless Components
        ↓
Code Ownership / Copy-Paste Components

Kita bergerak dari era ketika library menentukan hampir seluruh perilaku dan tampilan komponen, menuju era ketika developer menginginkan kontrol lebih besar atas source code dan desain.

Sedikit Nostalgia dari Era jQuery UI

Saya pribadi sempat merasakan penghujung era jQuery UI, sebelum akhirnya mulai berpindah penuh menggunakan Bootstrap sekitar akhir 2013. 😄

Kalau kalian sudah cukup lama berkecimpung di dunia web development, pasti ada beberapa teknologi di atas yang pernah menemani project kalian.

Kalian pernah merasakan era yang mana saja? 🙈