Belajar Angular - Sejarah, Latar Belakang & Mengapa Membutuhkan Angular

#Pendahuluan

Di episode 0 kalian sudah menyiapkan environment dan menginstall Angular CLI. Sebelum menulis kode, penting untuk memahami kenapa Angular ada dan masalah apa yang dia pecahkan. Sejarah framework ini menjelaskan banyak keputusan desain yang masih terasa sampai sekarang.

Episode 1 membahas tiga hal besar: evolusi Angular dari AngularJS ke versi modern, masalah yang diselesaikannya dibanding pendekatan tradisional berbasis manipulasi DOM manual, serta posisinya di antara framework lain seperti React, Vue, dan Svelte.

#Evolusi Angular

#Dari AngularJS ke Angular Modern

AngularJS lahir pada 2010, dikembangkan oleh Google sebagai framework berbasis JavaScript dengan two-way data binding dan dependency injection. Model ini populer, tetapi lambat dan sulit di-scale karena mekanisme digest cycle-nya. Pada 2016, Google merombak total menjadi Angular 2: ditulis ulang dengan TypeScript, berbasis komponen, memakai RxJS, dan dirancang untuk mobile-first.

Setelah Angular 2, rilis mengikuti versioning semantik — melewati Angular 3 untuk menyelaraskan dengan versi Angular Router. Terobosan penting: Angular 9 menghadirkan kompiler Ivy, Angular 14 memperkenalkan standalone components secara preview, Angular 16 menambahkan signals, Angular 17 menghadirkan kontrol flow @if, @for, dan @defer, sedangkan Angular 19 menjadikan standalone components dan SSR sebagai default.

npm view @angular/core time --json

Output npm view @angular/core time --json menampilkan daftar versi beserta tanggal rilisnya. Pola rilis Angular kini teratur: versi minor baru setiap dua minggu dan versi mayor baru setiap enam bulan, dengan dukungan aktif dan LTS untuk versi mayor genap.

Dengan ritme rilis yang teratur, kalian bisa merencanakan upgrade setiap dua minor version atau satu mayor. Setiap rilis membawa perbaikan performa dan fitur baru; tim yang menunda terlalu lama akan menghadapi lompatan upgrade yang mahal sekaligus berisiko kehilangan dukungan keamanan.

#Peran Angular di Enterprise dan Aplikasi Skala Besar

Angular dipakai di banyak produk Google seperti Google Cloud Console, serta perusahaan besar untuk aplikasi internal, dashboard, dan portal. Alasannya: konsistensi, tooling lengkap, dan tim besar bisa bekerja dengan pola yang sama. Ketika kalian bekerja di perusahaan dengan codebase jutaan baris, struktur yang di-enforce framework ini menjadi nilai jual utama.

Ekosistem juga menjadi pertimbangan besar: dokumentasi resmi yang lengkap, Angular CLI yang matang, Angular DevTools untuk debugging, serta komunitas aktif di forum dan meetup. Dukungan LTS yang teratur membuat perusahaan merasa aman berinvestasi di platform ini dalam jangka panjang.

Untuk tim besar, Angular mengurangi keputusan yang berulang. Routing, forms, HTTP, i18n, dan testing sudah tersedia dalam satu paket, sehingga standar kualitas bisa di-enforce lewat pola bawaan — bukan hasil negosiasi antar developer di setiap code review.

#Masalah yang Diselesaikan Angular

#Struktur Aplikasi yang Konsisten dan Opinionated

Sebelum framework modern, aplikasi JavaScript sering ditulis dengan jQuery: memanipulasi DOM secara manual, meletakkan logika di sembarang tempat, dan mencampur markup dengan data. Semakin besar aplikasinya, semakin kacau dan sulit dites.

Angular menawarkan struktur yang opinionated: folder project terstandar, komponen yang jelas, dependency injection, dan CLI yang meng-generate boilerplate. Semua pengembang mengikuti pola yang sama sehingga onboarding anggota tim baru jauh lebih cepat.

ng new struktur-app --style=scss --ssr=false
tree src/app

Keluaran tree src/app akan menampilkan struktur dasar yang sudah di-generate CLI, termasuk komponen root. Pola seperti ini yang membuat codebase berskala besar tetap bisa dikelola.

Struktur yang konsisten juga mempermudah perpindahan developer antar project: begitu memahami pola satu aplikasi Angular, kalian langsung memahami yang lain. Ini menghemat waktu onboarding dan mengurangi kesalahan yang berasal dari gaya kode yang berbeda-beda.

#Dependency Injection Built-in dan Module System

Pendekatan tradisional sering membuat objek secara manual dengan operator new, sehingga testing menjadi sulit karena dependency saling menempel. Angular membawa dependency injection built-in: service dideklarasikan sebagai provider, lalu di-inject ke komponen atau service lain tanpa membuatnya secara manual. Ini memudahkan penggantian implementasi dan penulisan test.

AngularJS sempat populer dengan two-way data binding, tetapi digest cycle-nya dinilai lambat untuk aplikasi besar. Angular modern mengatasi ini dengan change detection yang lebih efisien, kompiler Ivy yang menghasilkan bundle lebih kecil, dan arsitektur berbasis komponen yang lebih mudah dirawat.

#Perbandingan dengan Framework Lain

#React, Vue, dan Svelte

• React adalah library view yang membangun UI lewat JSX dan membutuhkan keputusan sendiri untuk routing, state management, dan testing.
• Vue adalah framework progresif yang memakai template atau JSX, dengan kurva belajar landai dan ekosistem yang menyatu.
• Svelte adalah compiler yang menghilangkan virtual DOM dan menghasilkan bundle kecil, cocok untuk aplikasi yang sangat ringan.
• Angular adalah framework lengkap yang membawa solusi untuk hampir semua kebutuhan — routing, forms, HTTP, dan i18n — dalam satu paket.

Perbedaan mendasar bukan soal siapa yang "terbaik", melainkan trade-off di antara keduanya. Komponen yang sama di Angular ditulis seperti ini:

Komponen counter di Angular

import { Component, signal } from '@angular/core';
 
@Component({
  selector: 'app-counter',
  standalone: true,
  template: `
    <button (click)="count.update((c) => c + 1)">
      Klik {{ count() }}
    </button>
  `,
})
export class CounterComponent {
  readonly count = signal(0);
}

Perhatikan template yang berisi HTML langsung dan signal untuk state. Meski sintaksnya berbeda dengan JSX, konsep dasarnya sama: komponen, state, dan event.

#Kapan Memakai Angular

Angular paling cocok untuk aplikasi enterprise berskala besar, tim yang besar, dan kebutuhan fitur lengkap dalam satu framework. Untuk halaman statis atau prototipe sangat kecil, framework lain yang lebih ringan bisa jadi pilihan. Namun menguasai Angular membuka peluang besar di industri karena banyak perusahaan memakainya untuk produk inti mereka.

Pilihan kembali pada trade-off: React memberi kebebasan dan ekosistem yang luas, Vue menawarkan kesederhanaan progresif, Svelte unggul pada ukuran bundle, dan Angular menang pada konsistensi serta kelengkapan fitur untuk skala enterprise.

Bagi kalian yang baru mengenal frontend, Angular sekaligus mengajarkan fondasi penting: TypeScript, komponen, dependency injection, observables, dan testing. Keterampilan ini portable — tetap berguna walau nanti kalian mencoba framework lain, karena konsep dasarnya sama di mana pun.

Kesimpulannya, tidak ada satu framework yang benar untuk semua situasi. Yang penting adalah memahami trade-off masing-masing dan menguasai fondasi web yang permanen: HTML, CSS, JavaScript, dan pola arsitektur yang sehat.

#Penutup

Inti yang harus dibawa pulang:

• AngularJS (2010) diganti total oleh Angular modern (2016) berbasis TypeScript.
• Versi mayor Angular rilis setiap enam bulan; Ivy, standalone, dan signals adalah titik balik terbesar.
• Angular menyelesaikan masalah struktur, konsistensi, dan dependency management di aplikasi besar.
• Dibanding React, Vue, dan Svelte, Angular adalah framework lengkap dengan solusi built-in.
• Angular unggul di skenario enterprise dengan tim besar dan codebase yang kompleks.
• Pilih framework berdasarkan kebutuhan, bukan tren semata.

Di episode 2 selanjutnya kita akan membahas konsep dasar dan arsitektur utama Angular — kompilasi AOT dan JIT, change detection dengan zone.js, serta peran module, component, directive, dan service dalam alur kerja aplikasi. Ini fondasi konseptual yang akan dipakai sepanjang series.