Komunitas pengembangan web sedang terlibat dalam diskusi sengit tentang apakah pengejaran kemurnian functional programming telah membuat pengembangan frontend modern menyimpang dari kemampuan native platform web. Perdebatan ini berpusat pada apakah tools seperti React, CSS-in-JS, dan framework JavaScript yang kompleks telah membuat pengembangan web menjadi tidak perlu rumit dengan melawan fitur-fitur bawaan browser.
Perdebatan Besar CSS: Global vs Scoped Styling
Salah satu poin paling kontroversial dalam diskusi ini berkisar pada manajemen CSS. Banyak developer berargumen bahwa perpindahan industri dari CSS tradisional menuju solusi CSS-in-JS dan utility framework seperti Tailwind telah menciptakan lebih banyak masalah daripada yang dipecahkan. Komunitas menunjukkan bahwa CSS dirancang untuk cascade secara global, memungkinkan stylesheet kecil mengontrol dokumen besar secara efisien. Namun, advokat functional programming mendorong isolasi komponen, yang mengarah pada generasi style runtime dan tooling yang kompleks.
Beberapa developer berpengalaman mencatat bahwa masalah sebenarnya bukanlah teknis tetapi organisasional. Tim kesulitan menegakkan panduan CSS di antara multiple developer, membuat mereka mengadopsi utility framework yang memastikan konsistensi bahkan dengan biaya markup yang verbose dan payload HTML yang lebih besar. Ini menyoroti ketegangan fundamental antara mempertahankan kualitas kode dalam skala besar dan memanfaatkan kemampuan native platform.
Native Web APIs vs Reimplementasi JavaScript
Bagian signifikan dari perdebatan berfokus pada bagaimana framework modern sering mengimplementasi ulang fitur browser dalam JavaScript daripada menggunakan native APIs. Diskusi ini secara khusus menyoroti kontroversi elemen <dialog>, di mana developer terus membangun komponen modal kustom dengan elemen <div> alih-alih menggunakan fungsionalitas dialog native yang menyediakan manajemen fokus bawaan, penanganan keyboard, dan fitur aksesibilitas.
Namun, komunitas memberikan konteks penting tentang timing dan kompatibilitas. Elemen <dialog> baru mencapai dukungan browser penuh pada Maret 2022, dengan Firefox menambahkan dukungan hanya dua bulan lalu. Ini menjelaskan mengapa library komponen yang ada dan materi edukasi masih mengandalkan implementasi JavaScript - mereka dibuat sebelum alternatif native menjadi viable.
API Web Native vs Implementasi Framework
| Fitur | Solusi Native | Pendekatan Framework | Trade-offs |
|---|---|---|---|
| Dialog Modal | Elemen <dialog> |
Komponen <div> kustom |
Native: A11y bawaan, manajemen fokus; Framework: Kontrol lebih banyak, dukungan browser lama |
| Validasi Form | Atribut validasi HTML5 | Library validasi JavaScript | Native: Instan, tidak perlu JS; Framework: Logika kustom, UX konsisten |
| Routing | Tag <a>, History API |
Router sisi klien | Native: Berfungsi tanpa JS, dapat diakses; Framework: Tidak ada reload halaman, preservasi state |
| Styling | Cascade CSS, stylesheet | CSS-in-JS, utility classes | Native: Parsing paralel, payload lebih kecil; Framework: Isolasi komponen, tidak ada konflik penamaan |
Masalah Learning Curve
Anggota komunitas menyatakan kekhawatiran tentang bagaimana konsep functional programming diajarkan dan diterapkan dalam pengembangan frontend. Banyak yang mengamati developer menulis kode yang terlalu kompleks menggunakan array methods seperti reduce() dan method chaining yang berlebihan ketika for-loop sederhana akan lebih mudah dibaca dan dipelihara.
Saya melihat begitu banyak kode yang rumit dengan arr.reduce() atau banyak chained arr.map().filter().filter().map(), yang akan jauh lebih sederhana dan mudah dibaca jika itu adalah for-loop klasik.
Diskusi mengungkapkan perpecahan generasional dalam pendekatan pemrograman. Developer yang dilatih dalam functional programming merasa sulit memahami imperative loop, sementara mereka yang memiliki latar belakang prosedural kesulitan dengan functional chain. Ini menunjukkan bahwa masalahnya tidak secara inheren tentang satu pendekatan yang superior, tetapi tentang mencocokkan tool yang tepat dengan masalah spesifik dan konteks tim.
Evolusi Platform vs Keterbatasan Framework
Aspek menarik dari perdebatan ini menyangkut seberapa cepat standar web berkembang dibandingkan dengan adopsi framework. Komunitas mencatat bahwa browser sekarang mendukung banyak fitur yang telah developer rebuild dalam JavaScript selama bertahun-tahun, seperti elemen <select> yang dapat dikustomisasi, date picker native, dan kemampuan styling CSS yang canggih.
Namun, keterbatasan framework terkadang mencegah developer menggunakan fitur-fitur baru ini. Beberapa fitur browser eksperimental menyebabkan hydration failure dalam framework populer, menciptakan situasi di mana platform telah berkembang melampaui apa yang dapat ditangani oleh dominant development tools. Ini menciptakan lag antara apa yang mungkin secara native dan apa yang praktis dalam pengembangan berbasis framework.
Linimasa Dukungan Browser untuk Fitur-Fitur Utama
- Elemen
<dialog>: Dukungan penuh tercapai pada Maret 2022, dukungan Firefox ditambahkan pada Oktober 2024 <select>yang dapat dikustomisasi: Masih bersifat eksperimental di sebagian besar browser hingga tahun 2024- Selektor CSS
::part()dan::pseudo(): Dukungan luas untuk styling tingkat lanjut <input type="date">: Didukung dengan baik di seluruh browser modern- Popover API: Dukungan yang berkembang untuk fungsi tooltip dan overlay
Perbedaan Organisasional vs Teknis
Diskusi berulang kali kembali pada ide bahwa banyak keputusan teknis dalam pengembangan frontend sebenarnya memecahkan masalah organisasional daripada teknis. Tim pengembangan besar membutuhkan konsistensi dan maintainability, yang terkadang bertentangan dengan menggunakan fitur platform secara optimal. Ini menjelaskan mengapa tim memilih tools yang menegakkan pola dan mencegah kelas error tertentu, bahkan ketika tools tersebut menambah kompleksitas atau overhead performa.
Komunitas mengakui bahwa React dan framework serupa memecahkan masalah nyata dengan pengembangan gaya jQuery, khususnya seputar manajemen state dan organisasi komponen. Pertanyaannya bukan apakah tools ini memiliki nilai, tetapi apakah mereka telah menjadi pilihan default untuk masalah yang tidak memerlukan kompleksitas mereka.
Melihat ke Depan
Percakapan menunjukkan bahwa industri mulai mengenali ketegangan-ketegangan ini. Framework yang lebih baru seperti HTMX, Qwik, dan Astro secara eksplisit dirancang untuk bekerja dengan kemampuan platform web daripada melawannya. Tools ini bertujuan menyediakan pengalaman pengembangan modern sambil memanfaatkan fitur browser native untuk performa dan kesederhanaan.
Perdebatan ini pada akhirnya mencerminkan ekosistem yang matang yang bergulat dengan keseimbangan antara developer experience, performa, dan alignment platform. Saat standar web terus berkembang dan menyediakan lebih banyak solusi native, komunitas kemungkinan akan terus menilai ulang kapan framework kompleks diperlukan versus kapan pendekatan yang lebih sederhana dan selaras dengan platform mungkin lebih tepat.
Referensi: How Functional Programming Shaped (and Twisted) Frontend Development