30 Tahun Web Dilihat dari Tag `<br>`

 (artmann.co)
28 poin oleh GN⁺ 2025-12-17 | Belum ada komentar. | Bagikan ke WhatsApp
  • Artikel yang merangkum bagaimana pengembangan web telah berevolusi, mengikuti perubahan dari web statis era 1990-an, web berpusat pada JavaScript era 2010-an, hingga web di era AI pada 2020-an
  • Web yang bermula dari tag <br> dan FTP berkembang pesat melalui PHP·MySQL menjadi platform yang bisa dibuat siapa saja
  • Pada 2000-an, dengan hadirnya Rails, Git, dan Heroku, pengembangan web direstrukturisasi menjadi industri yang berfokus pada struktur, otomatisasi, dan kolaborasi, sekaligus meletakkan fondasi bagi era cloud dan mobile
  • Kemunculan React, build chain, Docker, dan ekosistem Node pada 2010-an memantapkan web bukan lagi sekadar dokumen, melainkan platform aplikasi yang sesungguhnya
  • Pada 2020-an, ChatGPT dan Copilot mengubah cara menulis kode, menjadi titik balik baru di mana AI memperbesar produktivitas pengembangan
  • Semua perubahan ini, dengan kompleksitas sebagai konsekuensinya, berujung pada proses demokratisasi web yang memungkinkan lebih banyak orang membuat hal yang lebih besar

The Static Web - Era Web Statis

"View Source was how you learned"

  • Pada akhir 1990-an (late 90s), web adalah wilayah perintis yang belum ada seorang pun tahu akan menjadi seperti apa, dan justru ketidakpastian itulah yang menjadi daya tariknya
  • Situs web pribadi dimulai bukan dari perusahaan atau organisasi, melainkan dari server pribadi dan unit folder
    • Dengan direktori pribadi di atas server Unix, file HTML, dan klien FTP saja, seseorang sudah bisa memiliki ruang di internet
    • Hanya dengan editor teks sederhana seperti Notepad, orang bisa menulis lalu langsung mempublikasikannya
  • Web pada masa ini adalah ruang kreasi tanpa sensor maupun proses persetujuan
    • Orang bebas memposting berdasarkan minat seperti masakan, dinosaurus, lagu, dan sebagainya
    • Strukturnya memungkinkan orang langsung mengunggah “hal yang menarik perhatianku minggu ini”
  • Cara belajarnya sepenuhnya dengan melihat langsung lalu menirunya
    • Belum ada tutorial YouTube atau Stack Overflow
    • Jika penasaran dengan situs lain, klik kanan → View Source adalah alat belajar utama
    • Untuk hal yang lebih mendalam, orang belajar dari buku fisik sungguhan
  • Umum bagi orang untuk belajar sambil meletakkan buku teknis ratusan halaman seperti Core Java di samping mereka, lalu bolak-balik antara kode dan buku
    • Lambat, tetapi menjadi pengalaman belajar yang membuat pengetahuan lebih melekat lama
  • HTML saat itu masih bercampur antara struktur dan gaya
    • Tag <table>, <font>, <center> menangani layout dan style sekaligus
    • GIF transparan 1x1 (spacer GIF) dipakai untuk mengatur jarak
    • Kasar dan tidak efisien, tetapi tetap berjalan
  • CSS memang sudah ada, tetapi praktis belum menjadi arus utama
    • Sebagian besar style ditangani lewat atribut inline atau tag HTML itu sendiri
    • Layout diselesaikan dengan tabel bersarang
  • Fitur dinamis memiliki hambatan masuk yang sangat tinggi
    • Bahkan fitur dasar seperti buku tamu atau penghitung pengunjung pun memerlukan skrip CGI
    • Harus ditulis dengan Perl atau C, dan untuk memproses satu parameter URL saja dibutuhkan banyak kode
    • Kompleksitas ini sangat membatasi penyebaran web dinamis
  • Hampir tidak ada solusi untuk masalah layout bersama
    • Header, navigasi, dan footer harus di-copy-paste ke semua file HTML
    • Jika ada perubahan, seluruh file harus diperbarui
    • Ada juga cara menyisipkan elemen bersama dengan <iframe>, tetapi efek sampingnya besar
  • Kompatibilitas browser sudah menjadi masalah serius sejak saat itu
    • Netscape Navigator (1994) dan Internet Explorer (1995) menampilkan hasil render yang berbeda
    • Kalimat peringatan yang mencantumkan browser dan resolusi tertentu benar-benar diperlukan
  • Meski begitu, web di era ini memiliki daya tarik yang kuat
    • Tanpa peralatan cetak atau siaran, orang bisa mempublikasikan sesuatu ke seluruh dunia
    • Web untuk pertama kalinya mewujudkan demokratisasi sarana berekspresi
  • Layanan hosting gratis seperti GeoCities (1994) dan Angelfire (1996) menyediakan ruang berkarya bagi jutaan orang
    • Situs penggemar dan komunitas terhubung melalui web ring
    • Terbentuk ekosistem yang kacau tetapi hidup
  • Di perusahaan, konsep “tim web” masih hampir belum ada
    • Jika sebuah situs web ada, kemungkinan besar dibuat oleh “orang yang paham komputer”
    • Ini adalah tahap tepat sebelum pengembang web mapan sebagai sebuah profesi
  • Alat-alatnya masih primitif dan situs-situsnya kasar, tetapi
    • Gagasan inti tentang ruang tempat siapa saja bisa membuat dan berbagi mulai berakar pada masa ini
  • Era yang bertahan dengan tag <br> dan semangat ini menjadi titik awal bagi seluruh evolusi web setelahnya

Stack LAMP dan Web 2.0

"Everything was PHP and MySQL"

  • Bahkan setelah pecahnya gelembung dot-com pada 2000, web terus tumbuh, dan periode ini menjadi titik balik ketika hambatan masuk bagi orang yang ingin membuat sesuatu turun drastis
  • Terobosan terbesar pada era web statis adalah PHP(1995)
    • Dari era ketika harus menulis ratusan baris dalam C atau Perl untuk CGI, pengalaman bisa membaca parameter URL hanya dengan satu baris $_GET['name'] adalah perubahan yang menentukan
    • Berjalan cukup dengan simpan lalu refresh, tanpa kompilasi, manajemen memori, atau pesan error yang sulit dipahami
    • XAMPP(2002) memungkinkan instalasi Apache·MySQL·PHP sekaligus, sehingga sangat menyederhanakan pembangunan lingkungan pengembangan lokal
    • PHP adalah yang pertama benar-benar menyelesaikan masalah penggunaan ulang layout di era web statis
      • Dengan satu baris include 'header.php', header dan footer bersama bisa dikelola
      • Pengalaman mengubah seluruh halaman dengan satu kali edit menimbulkan antusiasme besar
    • Terlepas dari kekurangan bahasanya, kekuatan PHP ada pada aksesibilitasnya
      • HTML dan logic bercampur, penamaan fungsi tidak konsisten, dan API keamanan seadanya
      • Namun orang bisa mempelajarinya dalam akhir pekan dan membuat layanan nyata
      • Dengan shared hosting($5/bulan) serta cPanel(1996) dan phpMyAdmin(1998) yang disediakan secara default, hambatan untuk masuk ke ranah online menjadi yang terendah sepanjang sejarah
  • Basis data yang praktis selalu satu paket dengan PHP adalah MySQL(1995)
    • Hampir semua tutorial·hosting·CMS disusun dengan asumsi MySQL
    • Secara fungsional sudah cukup, tetapi pemrosesan teks internasional penuh penderitaan
    • Encoding default-nya adalah latin1, dan untuk memakai UTF-8 dengan benar
      • pengaturan database, encoding koneksi, dan deklarasi charset HTML semuanya harus cocok
    • Masalah “ä alih-alih ä” menjadi trauma simbolis dari era ini
  • WordPress(2003) mengubah sifat web itu sendiri
    • Tanpa perlu bisa coding, orang bisa langsung menerbitkan setelah instalasi 5 menit
    • Situs bisa dijalankan hanya dengan memilih tema dan menulis postingan
    • Secara nyata mewujudkan demokratisasi pembuatan situs web
    • Bagi pengguna nonteknis, WordPress adalah pembebasan
      • Blogger, pemilik usaha kecil, seniman, hingga restoran, semuanya jadi bisa memiliki situs web
      • Identitas baru bernama "blogger" pun muncul
      • Antarmuka admin WordPress menyebar hingga dipahami sebagai “editor situs web” itu sendiri
    • Bagi developer, WordPress menjadi alat yang nyaris serbaguna
      • Blog, portofolio, situs perusahaan, komunitas, hingga e-commerce, semuanya WordPress
      • Dengan WooCommerce(2011), bahkan e-commerce pun ikut diserap
      • Sebagai harga dari implementasi cepat, utang teknis menumpuk lewat ledakan plugin dan kustomisasi tema
  • Peristiwa yang secara mendasar mendefinisikan ulang kemungkinan web adalah peluncuran Gmail(2004)
    • Pada masa ketika Hotmail dan Yahoo Mail hanya menyediakan beberapa MB ruang penyimpanan
    • 1GB ruang penyimpanan gratis adalah angka yang mengejutkan
    • Pesan “jangan hapus, carilah” menawarkan cara penggunaan yang baru
    • Inovasi sejati Gmail bukanlah ruang penyimpanan, melainkan pengalaman
      • Antarmuka yang memungkinkan membaca·menulis·berpindah email tanpa refresh halaman
      • Pemanfaatan penuh komunikasi asinkron berbasis AJAX(XMLHttpRequest)
      • Membuktikan bahwa web bukan sekadar dokumen, tetapi bisa menjadi aplikasi
  • Google Maps(2005) membawa kemungkinan ini selangkah lebih jauh
    • Memindahkan peta dengan klik dan drag
    • Interaksi natural dengan tile yang dimuat di latar belakang
    • Pada titik ini, istilah Web 2.0 mulai benar-benar mengakar
    • UI tanpa refresh, sudut membulat, gradasi, dan bayangan menjadi bahasa dasar web
  • Perubahan penting juga berlanjut di ranah media dan sosial
    • Di ranah video, YouTube(2005) mengubah peta persaingan
      • Mengakhiri neraka plugin seperti RealPlayer·QuickTime·Windows Media Player
      • Meski berbasis Flash, ia memberikan pengalaman “klik lalu langsung putar”
      • Video tidak lagi menjadi masalah teknis, melainkan sarana ekspresi
    • Twitter(2006) menghadirkan cara komunikasi baru lewat microblogging 140 karakter
    • Facebook(2006) dibuka untuk pengguna umum, mendorong jejaring sosial menjadi arus utama
    • Web bertransformasi dari media konsumsi menjadi platform partisipatif
      • Terbentuk struktur di mana siapa pun bisa menjadi penerbit sekaligus kreator
  • Terlepas dari semua perubahan ini, JavaScript tetap menyakitkan
    • Debugging tanpa akhir akibat perbedaan implementasi DOM·event·AJAX antar-browser dan masalah kompatibilitas IE6
    • jQuery(2006) praktis mengakhiri kekacauan ini
      • $('#el').hide() bekerja sama di semua browser
      • $.ajax() menyederhanakan komunikasi asinkron
      • Bagi banyak developer, jQuery nyaris identik dengan JavaScript itu sendiri
        • Pada saat yang sama, ia juga berperan sebagai lapisan penyangga yang membuat orang tidak perlu memahami langsung cara kerja browser
    • Masalah-masalah era ini baru belakangan disadari sebagai masalah
      • SQL Injection dan XSS merajalela bahkan di level tutorial
      • Kode yang langsung menyambungkan input pengguna ke query adalah hal umum
  • Untuk version control, Subversion(2000) adalah arus utama
    • Commit terasa berat dan branch cenderung dihindari
    • Nama folder seperti final_final_REAL adalah hal sehari-hari
  • Tidak adanya standardisasi lingkungan eksekusi
    • Lokal memakai Windows + XAMPP
    • Server memakai Linux + versi PHP yang berbeda
    • “works on my machine” terus berulang
  • Konsep package manager juga belum ada
    • JS dikelola manual di folder /js setelah mengunduh ZIP
    • Library PHP berbasis salin file
  • Struktur tim dan proses pengembangan sangat informal
    • Hampir tidak ada peran PM·EM
    • Tidak ada code review
    • Upload via FTP lalu langsung diterapkan ke produksi
    • Saat ada gangguan, perbaikan dadakan dilakukan langsung di server produksi
  • Meski begitu, energi era ini sangat kuat
    • Dengan PHP dan hosting murah, siapa pun bisa melakukan deployment
    • Muncul rasa bahwa AJAX bisa dipakai untuk membuat “aplikasi sungguhan”
    • Dengan platform sosial, siapa pun bisa memiliki audiens
  • Inilah masa ketika profesionalisasi dan penataan pengembangan web baru mulai muncul
    • Ruby on Rails(2004) dengan “Convention over Configuration” menandai era berikutnya yang lebih terstruktur
  • Para developer di masa ini membangun web dengan stack LAMP, plugin jQuery, dan juga,
    • dalam rasa antisipasi bahwa "mereka akan membuat layanan besar berikutnya"

Perang framework

"Rails changed everything, then everyone copied it"

  • Akhir 2000-an (late 2000s) ketika skala aplikasi web membesar, skrip PHP lama dan struktur yang berpusat pada pengerjaan manual mencapai batasnya

  • Sebagai solusi pada masa itu, pendekatan pengembangan yang berpusat pada framework mulai naik daun, dan yang menentukan arah arus ini adalah Ruby on Rails(2004)

    • Pengaruh nyata RoR benar-benar terasa mulai sekitar 2007–2008
    • Dengan filosofi "Convention over Configuration", framework yang menentukan struktur file, penamaan, dan cara penghubungan
    • Developer cukup mengikuti aturan, dan ini dipandang bukan sebagai pembatasan melainkan kebebasan yang memberi kecepatan

  • Rails lalu menghadirkan sekaligus konsep-konsep yang kemudian menjadi tata bahasa dasar pengembangan web

    • Migration untuk mengelola perubahan database sebagai kode
    • ORM yang sangat mengurangi ketergantungan pada SQL
    • Alur pengembangan dengan testing yang disertakan secara default
    • Standardisasi praktis struktur MVC(Model–View–Controller)
    • MVC memang konsep yang berasal dari Smalltalk era 1970-an, tetapi melalui Rails ia mengukuh sebagai bentuk dasar pengembangan web
    • Setelah kesuksesan Rails, hampir semua ekosistem bahasa mengadopsi rumus ini
      • Django(2005) di Python, dan Laravel(2011) di PHP memantapkan struktur ala Rails
      • CakePHP(2005) dan CodeIgniter(2006) juga berkembang di arus yang sama
    • Peningkatan produktivitasnya bukanlah berlebihan
      • Cakupan yang bisa dibuat developer individu dalam satu akhir pekan dulu setara dengan pekerjaan tingkat tim
      • Di lingkungan startup, ini menjadi alat yang optimal untuk eksperimen cepat dan iterasi
    • Dalam praktiknya, sejumlah layanan ikonik pun tumbuh di atas Rails
      • Basecamp(2004), Twitter(2006), GitHub(2008), Shopify(2006), Airbnb(2008)
      • Rails segera dipandang sebagai simbol kecepatan startup

  • Framework memang meningkatkan produktivitas, tetapi deployment masih menjadi bottleneck

    • Pada era PHP, deployment umumnya dilakukan lewat upload FTP, dengan struktur yang bisa merusak layanan hanya karena satu kesalahan
    • Bahkan dalam kondisi yang lebih baik pun, pekerjaan seperti SSH + SVN pull + restart Apache masih ditangani secara manual
    • Mulai dari memisahkan direktori rilis hingga mengganti symbolic link, seluruh proses bersifat custom dan rapuh

  • Yang mengubah masalah ini secara mendasar adalah Heroku(2007), yang mulai menyebar luas sekitar 2009–2010

    • Memberikan pengalaman deployment selesai hanya dengan satu baris git push heroku main
    • Konfigurasi server, restart web server, dan scaling ditangani oleh platform
    • Heroku kemudian secara efektif memantapkan konsep yang disebut PaaS(Platform as a Service)
      • Developer pun bergeser ke peran yang fokus pada kode, bukan infrastruktur
      • Dengan memopulerkan prinsip Twelve-Factor App(2011), Heroku menyebarkan pola pikir yang ramah cloud seperti proses stateless, konfigurasi berbasis environment variable, dan streaming log

  • Pada periode yang sama, perubahan besar dalam cara kolaborasi juga berlangsung

    • Git(2005) memperkenalkan model version control terdistribusi yang memungkinkan commit, branch, dan merge secara bebas di lokal, dan karena biaya branch nyaris nol, eksperimen dan rollback menjadi pekerjaan sehari-hari
    • Subversion(2000) yang sebelumnya dominan punya struktur terpusat, branch yang berat, dan merge yang menakutkan, sehingga banyak tim bergantung pada pengembangan berbasis trunk
    • Git adalah inovasi di level alat, tetapi GitHub(2008) memantapkannya sebagai budaya dengan menggabungkan penelusuran repositori publik, pengembangan berbasis fork, dan kolaborasi berpusat pada Pull Request
    • GitHub menstandardisasi budaya code review
      • Sebelum PR di-merge, seseorang harus melihat kode tersebut
      • Arus ini lalu menyebar ke pengembangan internal perusahaan
      • Berakhirnya era ketika kode langsung masuk ke production
    • Cara berkontribusi ke open source pun berubah dari mengirim patch ke mailing list menjadi mengirim PR dengan klik tombol, sehingga hambatan partisipasi turun drastis

  • Pada paruh akhir periode ini, muncul juga perubahan yang mengguncang identitas web

    • Dengan hadirnya iPhone(2007) dan App Store(2008), aplikasi native melejit pesat
    • Web mobile saat itu sangat buruk. Pengalaman melihat situs desktop yang diperkecil secara paksa disertai scroll horizontal dan zoom in-out berulang
      • Sebagian membangun situs mobile terpisah seperti m.example.com, tetapi batasannya jelas
    • Aplikasi native terasa cepat, mendukung offline, menyediakan push notification, dan dengan slogan "There’s an app for that" tampak seperti masa depan
    • Developer web mulai mengalami krisis identitas: apakah harus tetap di web? Haruskah belajar Objective-C? Apakah web akan hilang?

  • Sebagai jawaban atas kebingungan ini, muncullah Responsive Web Design(2010)

    • Ethan Marcotte(2010) menunjukkan cara menyesuaikan layout menurut ukuran layar dengan memanfaatkan CSS media query, sekaligus mengajukan arah penyatuan mobile dan desktop dalam satu codebase
    • Pada awalnya penyebarannya lambat karena alat yang belum matang dan beban kerja tambahan, tetapi arah yang harus ditempuh web menjadi jelas

  • Bootstrap(2011) menjadi pemicu yang membuat web responsif benar-benar dipakai di lapangan

    • Berawal dari tool internal Twitter, Bootstrap menyediakan grid system, tipografi dasar, dan style form sekaligus, sehingga developer tanpa desainer pun bisa langsung memakai UI yang siap guna
    • Akibatnya web mulai terlihat makin mirip satu sama lain, tetapi bagi banyak developer, Bootstrap menjadi pengalaman pertama mereka dengan component library dan design system
    • Arus ini kemudian berlanjut ke penyebaran design system yang lebih terstruktur seperti Material Design(2014)

  • Infrastruktur juga berubah cepat pada periode yang sama

    • Dari model membeli atau menyewa server fisik lebih dulu, arsitektur bergeser ke model berpusat pada virtual server(VPS), sehingga sumber daya server bisa dibuat saat diperlukan
    • AWS(2006) memang hadir lebih dulu, tetapi kompleks dan berorientasi enterprise sehingga terasa membebani developer individu
    • DigitalOcean(2011) menurunkan hambatan akses infrastruktur secara besar lewat droplet $5, UI intuitif, dan pengalaman membuat server yang cepat, sehingga developer individu pun mendapat fleksibilitas yang mirip perusahaan besar

  • Masalah penyimpanan file pada dasarnya diselesaikan oleh Amazon S3(2006)

    • Menyediakan model sederhana berupa storage yang bisa diskalakan tanpa bergantung pada jumlah server, dan langsung mengembalikan URL setelah upload
    • Masalah upload pengguna, backup, dan pengelolaan file di lingkungan multi-server bisa dirapikan sekaligus

  • Node.js(2009) memberi guncangan lain bagi developer web

    • Dengan basis engine V8 milik Chrome, JavaScript kini bisa dijalankan di server; bagi developer frontend ini tampak sebagai opsi menarik, sementara developer backend menyambutnya dengan skeptis
    • Model I/O non-blocking menunjukkan kekuatan pada aplikasi real-time, dan hampir semua tutorial akhirnya bermuara pada contoh aplikasi chat
    • Pada masa ini, Node masih lebih dekat sebagai objek rasa penasaran ketimbang arus utama production; layanan nyata tetap berpusat pada Rails, Django, dan PHP, dan ekosistem npm juga masih di tahap awal
    • Namun, pengaruh sejati Node kemudian lebih dulu tampak bukan di server, melainkan pada build tool dan fondasi eksekusi lingkungan pengembangan

  • Di ranah database, arus NoSQL mulai menguat

    • MongoDB(2009) menarik perhatian dengan model data berbasis dokumen, fleksibilitas skema, dan struktur yang ramah JSON
    • Ia unggul dalam prototyping cepat, skalabilitas, dan kecocokan dengan stack JavaScript, tetapi tidak cocok untuk semua layanan
    • Tidak sedikit kasus ketika ia dipilih karena alasan "mungkin suatu hari akan perlu scale", tetapi pada tahap ribuan pengguna justru mulai terasa batasan transaksinya

  • Ekosistem startup pada periode ini memasuki fase pertumbuhan penuh

    • Dengan deklarasi Marc Andreessen(2011), "Software is eating the world", dan meluasnya metodologi Lean Startup(2011), siklus MVP → pengukuran → iterasi pun mengukuh

  • Seiring kematangan alat, daya saing tim kecil mulai benar-benar bekerja

  • Proses pengembangan juga ikut berubah

    • Agile Manifesto (2001) dan Scrum menjadi populer, sehingga stand-up, sprint, dan retrospektif diperkenalkan nyaris sebagai standar
    • Banyak tim juga bermunculan dengan hanya menyisakan formalitas tanpa prinsipnya
    • Code review dan pengujian otomatis bergeser dari sekadar anjuran menjadi ekspektasi dasar, dan sistem CI menjalankan pengujian pada setiap commit, mempercepat profesionalisasi dan spesialisasi pengembangan perangkat lunak

  • Namun, peran-peran yang kini dianggap wajar saat itu masih belum mapan

    • Pada 2012, tim tanpa engineering manager, product manager, atau pengelolaan backlog maupun tiket yang sistematis adalah hal yang umum
    • Tim kecil dan struktur organisasi yang datar adalah hal yang lazim, dan “senior developer” dengan pengalaman 3 tahun juga bukan hal yang jarang

  • Sekitar 2013, web menjadi sesuatu yang sepenuhnya berbeda

    • Framework yang kuat, deployment yang mudah, kolaborasi kode sosial, dukungan mobile, infrastruktur murah, dan meluasnya JavaScript secara penuh terjadi secara bersamaan
    • Setelah melewati krisis mobile, web justru menjadi lebih kuat, dan siap memasuki tahap berikutnya: era ketika JavaScript menguasai segalanya

Renaisans JavaScript

"Everything is a SPA now"

  • Sekitar 2013, web sudah membuktikan lewat contoh seperti Gmail dan Google Maps bahwa ia mampu menangani “aplikasi sungguhan”, tetapi pendekatan jQuery + server rendering yang ada mulai menabrak batasnya :contentReference[oaicite:0]{index=0}
  • Masalah intinya adalah manajemen state
    • Dalam struktur di mana server membuat HTML lalu jQuery menambahkan interaktivitas, menjaga data dan UI tetap konsisten di banyak tempat menjadi semakin sulit
    • Saat state yang sama harus tercermin di banyak UI seperti komentar, penghitung, dan badge notifikasi, kode pun saling terlilit dan berubah menjadi struktur spaghetti
  • Kesimpulan yang muncul secara umum adalah pindahkan seluruh rendering ke klien
    • Server diperkecil perannya menjadi API yang mengembalikan JSON
    • Struktur SPA (Single Page Application), di mana JavaScript di browser mengelola seluruh UI, mulai naik daun
  • Framework SPA awal muncul pada periode ini
    • Backbone.js (2010) menyediakan struktur minimum dengan konsep model dan view
    • Angular (2010) mencoba pendekatan ala enterprise dengan memperkenalkan two-way data binding dan dependency injection
    • Ember.js (2011) menawarkan aturan yang kuat dengan tujuan menjadi “Rails untuk JavaScript”, mencakup routing, data, dan template sekaligus
    • Framework-framework ini merupakan kemajuan, tetapi sama-sama belum sepenuhnya menyelesaikan masalah kompleksitas sinkronisasi DOM dan data
      • Khususnya, two-way binding membuat alur pembaruan sulit dilacak dan meningkatkan biaya debugging
  • Titik baliknya adalah kemunculan React (2013)
    • Saat Facebook merilisnya sebagai open source, sintaks JSX menimbulkan penolakan karena terlihat seperti membalik konsep separation of concerns
    • Namun React menawarkan cara berpikir baru: bukan memanipulasi DOM secara langsung, melainkan mendeskripsikan hasil UI secara deklaratif berdasarkan state
    • Inti React adalah model deklaratif dan Virtual DOM
      • Saat state berubah, React menghitung lalu menerapkan hanya perubahan DOM minimum yang diperlukan
      • Developer bisa fokus pada pengelolaan state tanpa perlu memikirkan manipulasi DOM
    • Konsep komponen juga sangat menentukan
      • UI disusun dengan menggabungkan unit-unit kecil seperti Button, UserAvatar, dan CommentList
      • Setiap komponen bisa dipikirkan secara independen dan dapat digunakan kembali
    • React menyebar perlahan lalu menjadi arus utama sekitar 2015
      • Vue.js (2014) muncul sebagai alternatif dengan konsep serupa tetapi sintaks yang lebih akrab
      • Perang framework memasuki fase baru
  • Penyebaran SPA berarti lonjakan eksplosif dalam jumlah JavaScript
    • Masalahnya, JavaScript yang ingin ditulis developer berbeda dengan JavaScript yang dipahami browser
  • ES6 / ES2015 (2015) menghadirkan perbaikan besar pada bahasa, seperti arrow function, class, module, dan promise
    • Callback hell dan pola var self = this mulai menghilang, dan JavaScript akhirnya terasa seperti bahasa modern
  • Namun dukungan browser tertinggal, sehingga tidak mungkin langsung mendistribusikannya apa adanya
  • Babel (2014) menyelesaikan masalah ini sebagai transpiler yang mengubah JavaScript modern menjadi ES5
    • Sebagai konsekuensinya, tahap build menjadi elemen wajib dalam pengembangan JavaScript
    • Era ketika cukup mengubah file lalu refresh pun berakhir
  • Dalam proses ini, Node.js (2009) menguasai semua mesin developer bukan sebagai server, melainkan sebagai lingkungan menjalankan alat pengembangan
    • Meski backend tidak memakai Node, instalasi Node tetap wajib karena alat build bergantung padanya
  • Rantai alat build juga berevolusi cepat
    • Grunt (2012) mengelola tahapan build yang rumit lewat file konfigurasi sebagai task runner
    • Gulp (2013) mencoba menyederhanakannya dengan pipeline berbasis kode, tetapi tetap kompleks
  • Perubahan yang menentukan datang dari Webpack (2014)
    • Bukan sekadar task runner, tetapi module bundler yang memahami graph dependensi
    • JavaScript, CSS, gambar, hingga font diperlakukan sebagai modul
    • Memperkenalkan konsep seperti code splitting dan hot module replacement
    • Harga dari kekuatannya adalah konfigurasi yang terkenal buruk
      • Konfigurasi Webpack menjadi meme, dan di tiap tim selalu ada “satu orang yang paham ini”
      • Jika orang itu pergi, konfigurasi tersebut tersisa sebagai artefak yang menakutkan untuk disentuh
  • Pada saat yang sama, ekosistem npm tumbuh sangat pesat
    • Dari pendekatan mengunduh library secara langsung, beralih ke model yang berpusat pada npm install
    • moment, lodash, bahkan utilitas super kecil seperti left-pad pun dipaketkan
    • Insiden left-pad (2016) memperlihatkan rapuhnya ekosistem ini
      • Hanya karena paket 11 baris dihapus, build ribuan proyek gagal pada saat yang sama
      • Bahkan React dan Babel ikut tidak bisa dipasang
      • npm menenangkan situasi dengan memulihkan paket tersebut secara paksa, sesuatu yang belum pernah dilakukan sebelumnya
    • Kenyamanan tetap bertahan, tetapi semua orang jadi sadar akan realitas dependency hell
  • Tahun 2016, kompleksitas mencapai puncaknya
    • Tulisan satire “How it feels to learn JavaScript in 2016” menyebar luas
    • Rasa lelah makin meluas karena untuk membuat halaman web sederhana saja dibutuhkan banyak alat seperti React, Webpack, Babel, dan Redux
    • Kecepatan perubahan ekosistem terlalu tinggi, sehingga pengetahuan yang baru dipelajari cepat menjadi usang
    • Meski begitu, hasilnya jelas
      • Aplikasi web interaktif pada level yang sebelumnya mustahil kini bisa dibuat
      • Kompleksitas diterima sebagai biaya dari ambisi
  • Sementara itu, Docker (2013) mulai menyelesaikan masalah yang sama sekali berbeda
    • Masalah “works on my machine” ditangani dengan container
    • Lingkungan eksekusi didefinisikan lewat Dockerfile dan bisa dijalankan sama persis di mana saja
    • Pada awalnya adopsi tidak mudah karena masalah performa di Mac dan kebingungan soal networking
      • Docker Compose, Docker Swarm, lalu Kubernetes (2014) muncul dan memicu perang orkestrasi
      • Sekitar 2017, setidaknya satu hal sudah jelas: container adalah masa depan
  • Bersamaan dengan itu, tren microservices ikut menyebar
    • Menawarkan keunggulan berupa pemisahan layanan dan deployment independen
    • Namun sebagai gantinya muncul kompleksitas baru seperti service discovery, load balancing, dan distributed tracing
    • Banyak tim belakangan menyadari bahwa mereka menukar kompleksitas monolith dengan kompleksitas sistem terdistribusi
  • Pada periode ini, kualitas aplikasi web meningkat secara nyata
    • Slack (2013) menggantikan email dengan alat kolaborasi yang cepat dan bisa dicari
    • Figma (2016) merambah wilayah aplikasi desktop lewat alat desain kolaboratif berbasis browser
    • Bersama Notion (2016) dan lainnya, ini membuktikan bahwa web mampu mewujudkan software setingkat desktop
    • Contoh-contoh ini menjadi dasar pembenaran bagi kompleksitas React, Webpack, dan rantai build
  • Struktur organisasi juga bergerak ke tahap yang lebih matang
    • Sekitar 2016, product manager dan engineering manager mulai mapan sebagai peran standar
    • Struktur tim datar pada masa awal perlahan berubah menjadi organisasi yang berpusat pada proses
    • Scrum dan ritual agile menyebar luas, dan tergantung tim bisa menjadi alat maupun sekadar formalitas
  • Tahun 2017, ekosistem perlahan memasuki fase stabil
    • React praktis menjadi pemenang
    • ES6 menjadi sintaks dasar
    • Webpack dan Docker diterima sebagai standar, meski menyakitkan
  • Tahap berikutnya sebenarnya sudah mulai terlihat
    • Kebangkitan TypeScript
    • Meta-framework seperti Next.js
    • Pengalaman deployment yang lebih sederhana
  • Namun ada satu prasyarat
    • Hanya developer yang berhasil melewati kekacauan Renaisans JavaScript inilah yang bisa melangkah ke tahap berikutnya

Era TypeScript

"Types are good, actually"

  • Setelah Renaissance JavaScript, saat maraknya tool mulai mereda dan ekosistem memasuki fase kedewasaan, TypeScript menempati posisi sebagai titik balik
  • TypeScript (2012) memperkenalkan static typing ke JavaScript, tetapi pada awalnya lama diabaikan karena bertentangan dengan filosofi bahasa dinamis dan menambah beban tahap build
    • Seiring skala aplikasi membesar, keterbatasan dynamic typing makin terlihat jelas
      • Biaya melacak call site meningkat setelah perubahan function signature
      • Masalah keterbacaan kode karena sulit memahami bentuk objek
      • Kasus typo sederhana berulang kali berujung pada gangguan production
    • Mulai 2017–2018, adopsi TypeScript menyebar dengan cepat
      • Menjamin stabilitas refactoring melalui autocomplete dan static analysis
      • Interface berperan sebagai dokumentasi yang dipaksakan dan tetap sinkron dengan kode
    • Penerimaan dari framework utama menjadi titik balik
      • Angular mengadopsi strategi TypeScript-first
      • Type definition React makin matang, dan penulisan ulang Vue 3 berbasis TypeScript membuatnya dipandang sebagai standar de facto
      • Sekitar 2020, proyek baru dengan JavaScript murni hampir tidak lagi dipilih
    • TypeScript sangat meningkatkan aksesibilitas codebase
      • Anggota baru bisa memahami domain model hanya dengan membaca type definition
      • Ketergantungan pada pengetahuan implisit berkurang sehingga biaya ekspansi tim menjadi lebih ringan
  • Kombinasinya dengan VS Code (2015) mengubah pengalaman pengembangan secara menentukan
    • Menyediakan intelligent autocomplete, tampilan error inline, dan refactoring yang andal
    • Pengaruh Sublime Text dan Atom perlahan menurun
  • Lapisan abstraksi lain terbentuk di atas React
    • Sebagai UI library, React tidak memiliki solusi bawaan untuk routing, data fetching, dan SSR
  • Next.js mengisi kekosongan ini sebagai meta-framework yang menyediakan file-based routing, server-side rendering, API route, dan automatic code splitting secara default
    • Berbagai framework tandingan seperti Nuxt, Remix, SvelteKit, dan Gatsby pun muncul
    • Di ekosistem React, Next.js menjadi pilihan default de facto
  • Penyebaran meta-framework sangat mengurangi kelelahan akibat fragmentasi tooling dari era sebelumnya
    • Proses merakit sendiri konfigurasi webpack dan Babel diserap ke dalam default bawaan
  • Lingkungan deployment juga menjadi jauh lebih sederhana
    • Vercel dan Netlify menyediakan deployment otomatis dan lingkungan preview hanya dengan menghubungkan GitHub
    • Desainer, PM, dan QA bisa memeriksa perubahan di lingkungan nyata sebelum merge
  • Pengaruh Heroku melemah, dan PaaS generasi baru seperti Railway dan Render mulai naik daun
  • Konsep Serverless menyebar dengan AWS Lambda (2014) sebagai pusatnya
    • Menyediakan penagihan berbasis penggunaan dan auto-scaling
    • Namun bukan solusi universal karena cold start, manajemen state, dan keterbatasan debugging
    • Cloudflare Workers memperluasnya lewat model eksekusi edge
  • Di ranah CSS juga terjadi transisi yang tenang
    • Setelah Sass dan Less, lalu CSS-in-JS, Tailwind CSS (2017) akhirnya diadopsi luas
    • Pendekatan berbasis utility class
      • menghilangkan beban penamaan class
      • mengurangi masalah cascade dan specificity
      • pada akhirnya membantu mempertahankan stylesheet yang lebih kecil
  • GraphQL (2015) mendapat perhatian sebagai solusi kuat untuk aplikasi yang menangani struktur data kompleks
    • Menawarkan keunggulan berupa query data yang presisi, schema berbasis type, dan ekosistem tool
    • Namun untuk CRUD sederhana, ia menjadi pilihan yang berlebihan karena kompleksitas layer server dan sulitnya caching
    • Sebagian tim tetap memakai REST atau memilih alternatif yang lebih sederhana seperti tRPC
  • Persaingan orkestrasi container berakhir sekitar 2018 dengan kemenangan Kubernetes
    • Sangat kuat, tetapi disertai biaya belajar tinggi dan kompleksitas operasional
    • Bagi banyak tim ini adalah solusi yang berlebihan, dan menjadi latar kebangkitan kembali PaaS
  • COVID (2020) memperluas permintaan pengembangan web secara drastis
    • Kerja jarak jauh, e-commerce, dan alat kolaborasi menjadi kebutuhan wajib
    • Hal ini memicu ledakan permintaan developer dan pertumbuhan pesat perusahaan tool pengembangan
  • Dalam lingkungan remote, pentingnya kolaborasi asinkron dan dokumentasi meningkat
    • Code review, penjelasan PR, dan kualitas dokumentasi internal menjadi elemen inti
  • Kematangan juga terjadi di level organisasi
    • Sistem level engineer menjadi mapan
    • Jalur IC memperoleh legitimasi
    • Peran PM, EM, dan tech lead makin terpisah jelas
  • Developer Experience (DX) mulai dipandang sebagai sasaran investasi tersendiri
    • Tim platform internal, CI yang cepat, dan onboarding yang lebih baik muncul sebagai faktor inti produktivitas
  • Sekitar 2022, pengembangan web mencapai kondisi yang rumit tetapi tetap bisa dikelola
    • TypeScript menjadi default
    • Ekosistem berpusat pada Next.js
    • Otomatisasi deployment dan sistem tool yang matang
  • Lalu semuanya berubah: sebuah perusahaan bernama OpenAI merilis sesuatu yang disebut ChatGPT

Momen AI

"Wait, I can just ask it to write the code?"

  • Dengan peluncuran ChatGPT (2022), muncul pengalaman baru di mana cukup dengan mengetik pertanyaan, kita bisa mendapatkan penjelasan, kode, dan hasil debugging, dan aturan pengembangan pun berubah
    • Dari penjelasan fisika kuantum hingga debugging Python, ia bisa melakukan banyak hal, dan meski tidak sempurna, fakta bahwa hasilnya cukup berguna untuk dipakai terasa mengejutkan
    • Developer langsung mulai bereksperimen, dan menulis komponen React, menganalisis penyebab error, serta mengubah kode antarbahasa menjadi mungkin dalam hitungan detik tanpa harus mencari dokumentasi atau menjelajahi forum
  • GitHub Copilot (2022) menghadirkan generasi kode dalam bentuk autocomplete di editor, dan menyebarkan pengalaman autocomplete superkuat yang dapat mengusulkan implementasi hanya dari komentar
    • Meta-skill baru untuk cepat menilai, menerima, mengubah, atau menolak saran AI muncul sebagai kemampuan inti developer
  • Tugas seperti boilerplate berulang, penulisan test, dan penanganan edge case menjadi jauh lebih cepat, sehingga pengembangan tanpa memutus flow menjadi mungkin
  • Cursor (2023) adalah IDE yang mengintegrasikan AI bukan sebagai fitur, melainkan sebagai prasyarat dasar; developer dapat memilih kode lalu meminta refactoring, mengubah banyak file berdasarkan penjelasan bahasa alami, dan berdialog dengan codebase
  • Perubahan ini menggoyahkan makna senioritas, tetapi dalam praktiknya justru makin menegaskan pentingnya kemampuan memutuskan apa yang akan dibuat, serta menilai requirement, constraint, dan efek samping
    • AI bisa menulis kode, tetapi tidak bisa mendefinisikan masalah dan memilih arah yang benar
  • Secara ekstrem ada dua reaksi kutub, yaitu “akhir dari pemrograman” dan “tren tak berguna”, tetapi hasil nyatanya adalah amplifikasi produktivitas developer yang memakai AI
  • Hambatan masuk untuk proyek personal dan side project turun drastis, sehingga area yang dulu tak berani dicoba seperti ML, game, atau framework baru kini bisa didekati lewat pembelajaran berbasis percakapan
  • Arus ini bekerja sebagai tahap yang mempercepat arah lama web, yaitu demokratisasi kreasi
    • Fokus bergeser dari mengetahui cara menulis kode menjadi mengetahui apa yang ingin dibuat
  • Non-developer pun ikut membuat prototype, dan PM, desainer, serta pakar domain langsung membuat tool sendiri, sehingga batas antara teknis dan nonteknis menjadi kabur
  • Jumlah indie hacker dan solo builder meningkat, dan lingkungan di mana satu orang pun bisa membuat produk yang nyata menjadi realitas
  • Pada saat yang sama, React Server Components, htmx, standar CSS dan JavaScript yang membaik, serta tool seperti Bun memperkuat arus untuk “menggunakan platform itu sendiri”
  • Setelah ledakan perekrutan besar pada 2022–2023 diikuti restrukturisasi, pasar sempat goyah, tetapi AI tidak menggantikan developer, dan kemampuan memanfaatkan AI menjadi ekspektasi dasar
  • Pada titik tahun 2025, pengembangan web berada dalam kondisi tercepat dalam sejarah dari ide hingga deployment, dan
    • di lingkungan gabungan cloud, framework, dan AI, individu menjadi kreator yang lebih kuat daripada sebelumnya
  • Janji web yang dimulai dari tag <br>, yaitu prinsip bahwa “siapa pun bisa membuat dan berbagi”, terus berlanjut dalam bentuk yang lebih kuat di era AI
  • Sekarang adalah masa yang benar-benar bagus untuk mengembangkan web

Bacaan terkait

Belum ada komentar.

Belum ada komentar.