Apa yang Terjadi pada Frontend Saat Anda Tidak Memperhatikannya

kciter1 · 2026-07-20T02:12:58+09:00

Tulisan yang menjelaskan perubahan selama 20 tahun terakhir untuk para developer yang meninggalkan frontend sekitar tahun 2008 Gagasan utamanya adalah bahwa semua alat merupakan jaringan parut yang terbentuk di atas masalah nyata, dan solusi di setiap layer menumpuk sambil menciptakan masalah untuk layer berikutnya Sepanjang tulisan, satu dijadikan sampel untuk menelusuri bagaimana tombol berubah di setiap era Layer I — jQuery (2006–2010) Berawal dari kebutuhan untuk mengubah hanya sebagian halaman tanpa me-refresh seluruh halaman jQuery menghilangkan perbedaan antar-browser dan memopulerkan AJAX, tetapi memunculkan masalah karena data ada sekaligus di variabel JS dan di layar sehingga developer harus menyinkronkannya sendiri Manipulasi DOM manual ini adalah "dosa asal" yang kemudian ingin diselesaikan oleh semua layer setelahnya Layer II — Framework (2010–2015) UI deklaratif: alih-alih menulis prosedur untuk memperbarui layar, kita mendeskripsikan tampilan layar berdasarkan data dan framework yang menangani pembaruannya React memimpin era ini dengan komponen + JSX + Virtual DOM, lalu diikuti Vue/Angular/Svelte/Solid Saat ini semua framework sedang berkumpul pada konsep signal yang melacak dependensi dan hanya memperbarui bagian yang diperlukan Ada juga kubu yang kembali ke cara mengirim HTML dari server seperti htmx, Alpine.js, dan Hotwire Layer III — Build (2012–2018) Karena JS tidak memiliki sistem modul, CommonJS dan ES Modules sempat bersaing, dan untuk kompatibilitas dengan browser lama diperlukan transpile Babel serta bundling webpack Proses build mencakup minify, tree-shaking, code splitting, dan pembuatan source map Konsekuensinya, muncullah node_modules, dan bahkan proyek starter kosong pun memasang sekitar 250 ribu file Layer IV — Persaingan Tooling (2018–2024) Era ketika masalah build yang lambat dan konfigurasi webpack yang rumit diselesaikan dengan menulis ulang dalam Go/Rust esbuild (Go) membuat bundling 10–100 kali lebih cepat, dan SWC (Rust) menggantikan Babel Vite menjadi tool default, sementara bundler produksi sedang diganti ke Rolldown berbasis Rust, dan stack terkait sedang disatukan di bawah VoidZero (baru-baru ini diakuisisi Cloudflare) Package manager juga mengikuti arus yang sama lewat pnpm, Bun, dan lainnya Layer V — Kembalinya server rendering (2014–2026) SPA mengirim hanya div kosong dari server, sehingga saat initial load pengguna melihat layar kosong dan mesin pencari juga melihat halaman kosong Solusinya adalah merender ulang HTML di server, yakni kembali ke pendekatan tahun 2008 Muncul SSR (render per request), SSG (pre-render saat build), dan ISR (SSG yang diperbarui otomatis), dengan meta-framework seperti Next.js, Astro, SvelteKit, dan Nuxt yang menanganinya Biaya hydration untuk menghidupkan kembali HTML server di browser menjadi masalah baru, lalu muncullah Islands (Astro), Resumability (Qwik), dan React Server Components sebagai cara untuk mengurangi hydration Layer VI — Alat rekayasa (2015–2026) TypeScript memberi stabilitas refactoring lewat sistem tipe dan pada praktiknya telah menjadi standar Tailwind memimpin styling dengan pendekatan utility class, sementara CSS native juga berkembang dengan nesting, variabel, container query, dan lainnya sehingga kebutuhan akan tooling lama berkurang shadcn/ui memantapkan pendekatan menyalin dan memiliki source code komponen alih-alih menginstalnya sebagai dependensi, dan TanStack Query, Zustand, Zod, Vitest, serta Playwright membentuk kosakata dasar aplikasi tahun 2026 Layer VII — Deployment (2015–2026) Alih-alih upload via FTP, cukup hubungkan repositori Git ke Vercel/Netlify/Cloudflare maka build dan deployment berjalan otomatis setiap push, dan setiap PR menghasilkan URL live preview Konsep serverless function dan edge (menjalankan kode di ratusan data center dekat pengguna) telah mapan Layer VIII — AI (2023–2026) Dengan menjelaskan kebutuhan dalam bahasa alami ke v0, Lovable, atau Bolt, frontend yang berfungsi bisa langsung dibuat, sementara Cursor, Claude Code, dan Copilot menulis kode sebagai gantinya Bahkan engineer backend/sistem kini bisa membuat frontend dalam sehari, sehingga batas antarbidang engineering makin kabur Namun kode yang dihasilkan tetap mengandaikan pengetahuan tentang 8 layer di atas, dan menjembatani kesenjangan itulah tujuan tulisan ini Bedrock — Kesimpulan Arah terdepan pada 2026 adalah merender HTML di server, hampir tidak mengirim JS, dan memanfaatkan web platform Kesimpulannya, setelah 20 tahun berputar dalam lingkaran besar, industri kembali ke titik yang mirip dengan file-file yang dulu diunggah lewat FTP

Tulisan yang menjelaskan perubahan selama 20 tahun terakhir untuk para developer yang meninggalkan frontend sekitar tahun 2008
Gagasan utamanya adalah bahwa semua alat merupakan jaringan parut yang terbentuk di atas masalah nyata, dan solusi di setiap layer menumpuk sambil menciptakan masalah untuk layer berikutnya
Sepanjang tulisan, satu <button> dijadikan sampel untuk menelusuri bagaimana tombol berubah di setiap era

Layer I — jQuery (2006–2010)
- Berawal dari kebutuhan untuk mengubah hanya sebagian halaman tanpa me-refresh seluruh halaman
- jQuery menghilangkan perbedaan antar-browser dan memopulerkan AJAX, tetapi memunculkan masalah karena data ada sekaligus di variabel JS dan di layar sehingga developer harus menyinkronkannya sendiri
- Manipulasi DOM manual ini adalah "dosa asal" yang kemudian ingin diselesaikan oleh semua layer setelahnya
Layer II — Framework (2010–2015)
- UI deklaratif: alih-alih menulis prosedur untuk memperbarui layar, kita mendeskripsikan tampilan layar berdasarkan data dan framework yang menangani pembaruannya
- React memimpin era ini dengan komponen + JSX + Virtual DOM, lalu diikuti Vue/Angular/Svelte/Solid
- Saat ini semua framework sedang berkumpul pada konsep signal yang melacak dependensi dan hanya memperbarui bagian yang diperlukan
- Ada juga kubu yang kembali ke cara mengirim HTML dari server seperti htmx, Alpine.js, dan Hotwire
Layer III — Build (2012–2018)
- Karena JS tidak memiliki sistem modul, CommonJS dan ES Modules sempat bersaing, dan untuk kompatibilitas dengan browser lama diperlukan transpile Babel serta bundling webpack
- Proses build mencakup minify, tree-shaking, code splitting, dan pembuatan source map
- Konsekuensinya, muncullah node_modules, dan bahkan proyek starter kosong pun memasang sekitar 250 ribu file
Layer IV — Persaingan Tooling (2018–2024)
- Era ketika masalah build yang lambat dan konfigurasi webpack yang rumit diselesaikan dengan menulis ulang dalam Go/Rust
- esbuild (Go) membuat bundling 10–100 kali lebih cepat, dan SWC (Rust) menggantikan Babel
- Vite menjadi tool default, sementara bundler produksi sedang diganti ke Rolldown berbasis Rust, dan stack terkait sedang disatukan di bawah VoidZero (baru-baru ini diakuisisi Cloudflare)
- Package manager juga mengikuti arus yang sama lewat pnpm, Bun, dan lainnya
Layer V — Kembalinya server rendering (2014–2026)
- SPA mengirim hanya div kosong dari server, sehingga saat initial load pengguna melihat layar kosong dan mesin pencari juga melihat halaman kosong
- Solusinya adalah merender ulang HTML di server, yakni kembali ke pendekatan tahun 2008
- Muncul SSR (render per request), SSG (pre-render saat build), dan ISR (SSG yang diperbarui otomatis), dengan meta-framework seperti Next.js, Astro, SvelteKit, dan Nuxt yang menanganinya
- Biaya hydration untuk menghidupkan kembali HTML server di browser menjadi masalah baru, lalu muncullah Islands (Astro), Resumability (Qwik), dan React Server Components sebagai cara untuk mengurangi hydration
Layer VI — Alat rekayasa (2015–2026)
- TypeScript memberi stabilitas refactoring lewat sistem tipe dan pada praktiknya telah menjadi standar
- Tailwind memimpin styling dengan pendekatan utility class, sementara CSS native juga berkembang dengan nesting, variabel, container query, dan lainnya sehingga kebutuhan akan tooling lama berkurang
- shadcn/ui memantapkan pendekatan menyalin dan memiliki source code komponen alih-alih menginstalnya sebagai dependensi, dan TanStack Query, Zustand, Zod, Vitest, serta Playwright membentuk kosakata dasar aplikasi tahun 2026
Layer VII — Deployment (2015–2026)
- Alih-alih upload via FTP, cukup hubungkan repositori Git ke Vercel/Netlify/Cloudflare maka build dan deployment berjalan otomatis setiap push, dan setiap PR menghasilkan URL live preview
- Konsep serverless function dan edge (menjalankan kode di ratusan data center dekat pengguna) telah mapan
Layer VIII — AI (2023–2026)
- Dengan menjelaskan kebutuhan dalam bahasa alami ke v0, Lovable, atau Bolt, frontend yang berfungsi bisa langsung dibuat, sementara Cursor, Claude Code, dan Copilot menulis kode sebagai gantinya
- Bahkan engineer backend/sistem kini bisa membuat frontend dalam sehari, sehingga batas antarbidang engineering makin kabur
- Namun kode yang dihasilkan tetap mengandaikan pengetahuan tentang 8 layer di atas, dan menjembatani kesenjangan itulah tujuan tulisan ini
Bedrock — Kesimpulan
- Arah terdepan pada 2026 adalah merender HTML di server, hampir tidak mengirim JS, dan memanfaatkan web platform
- Kesimpulannya, setelah 20 tahun berputar dalam lingkaran besar, industri kembali ke titik yang mirip dengan file-file yang dulu diunggah lewat FTP

Apa yang Terjadi pada Frontend Saat Anda Tidak Memperhatikannya

Bacaan terkait

4 komentar