IF Notes

Single Page Application (SPA)

7 min read

Back to IF3110 Pengembangan Aplikasi Berbasis Web

Topic

Questions/Cues

  • Apa itu SPA?

  • Apa tujuan utama SPA?

  • Beda SPA vs Tradisional?

  • Contoh SPA populer?

  • Apa keuntungan SPA?

  • Apa kerugian SPA?

  • Pendekatan Teknis: Hashes?

  • Pendekatan Teknis: History API?

  • Pendekatan Teknis: AJAX?

  • Pendekatan Teknis: WebSockets?

  • Pendekatan Teknis: Lainnya?

Reference Points

  • Slides IF3110-09b-SPA.pdf

Definisi Single Page Application (SPA)

SPA adalah aplikasi web atau situs web yang berinteraksi dengan pengguna dengan cara menulis ulang halaman web saat ini secara dinamis menggunakan data baru dari server.

Ini berbeda dengan metode standar browser yang memuat seluruh halaman baru setiap kali ada permintaan (misalnya, mengklik tautan).

Tujuan Utama:

Menciptakan transisi yang lebih cepat antar tampilan, sehingga membuat situs web terasa lebih responsif dan mirip dengan aplikasi native (aplikasi desktop atau seluler).

SPA vs. Aplikasi Web Tradisional

Aplikasi Tradisional (Multi-Page Application):

  • Model: Setiap interaksi pengguna (misalnya, klik) memicu permintaan baru ke server.

  • Respon: Server merespons dengan mengirimkan seluruh halaman HTML baru.

  • Efek: Browser melakukan refresh halaman penuh (halaman berkedip putih sesaat) untuk memuat konten baru.

  • Analogi: Seperti membolak-balik halaman buku fisik. Setiap klik adalah membalik ke halaman baru yang utuh.

Single Page Application (SPA):

  • Model: Sebagian besar sumber daya (HTML, CSS, JavaScript) dimuat satu kali di awal.

  • Respon: Saat pengguna berinteraksi, SPA tidak meminta halaman HTML baru. Sebaliknya, ia meminta data (biasanya dalam format JSON) dari server di latar belakang (menggunakan AJAX/Fetch).

  • Efek: JavaScript di sisi klien menggunakan data tersebut untuk memperbarui bagian-bagian tertentu dari halaman yang ada secara dinamis (dynamic rewrite). Tidak ada refresh halaman penuh.

  • Analogi: Seperti buku ajaib. Anda tetap di halaman yang sama, dan saat Anda ingin melihat sesuatu yang baru, teks di halaman itu secara ajaib menulis ulang dirinya sendiri untuk menampilkan konten baru.

Contoh SPA Populer

Banyak situs web besar yang kita gunakan sehari-hari adalah SPA:

  • Google Workspace (GSuite): Gmail, Maps, Drive, Calendar. (Perhatikan di Gmail, saat Anda mengklik email, hanya panel email yang berubah, bukan seluruh halaman).

  • Media Sosial: Facebook, Twitter, Instagram.

  • Lainnya: Whatsapp Web, GitHub.

Keuntungan (Advantages) SPA

  1. Cepat & Responsif: Sebagian besar sumber daya (HTML, CSS, Skrip) hanya dimuat sekali. Transisi antar “halaman” terasa instan karena hanya data kecil yang perlu diambil dari server.

  2. Pengembangan Efisien: Seringkali ada pemisahan yang jelas antara frontend (SPA) dan backend (API). Tim backend hanya perlu menyediakan API, yang kemudian dapat digunakan oleh tim frontend (web) dan tim mobile (iOS/Android) secara bersamaan (reusable backend code).

  3. Debugging: Pengembang dapat dengan mudah memantau operasi jaringan (permintaan data JSON) dan menyelidiki elemen halaman menggunakan developer tools browser.

  4. Caching & Offline: SPA dapat dengan efisien menyimpan data (caching) di penyimpanan lokal browser. Ini memungkinkannya untuk tetap berfungsi (meskipun terbatas) bahkan saat pengguna sedang offline.

Kerugian (Disadvantages) SPA

  1. SEO (Search Engine Optimization): Ini adalah tantangan terbesar. Crawler mesin pencari (seperti Googlebot) secara historis kesulitan “melihat” konten yang dimuat secara dinamis oleh JavaScript. Mereka mungkin hanya melihat halaman HTML awal yang kosong. Ini memerlukan “trik” khusus seperti Server-Side Rendering (SSR) untuk mengatasinya.

  2. Pemuatan Awal Lambat: Karena semua framework JavaScript, CSS, dan HTML inti harus diunduh dan dieksekusi saat pertama kali pengguna mengunjungi situs, pemuatan awal bisa terasa berat dan lambat.

  3. Membutuhkan JavaScript: Jika pengguna karena alasan tertentu menonaktifkan JavaScript di browser mereka, SPA tidak akan berfungsi sama sekali.

  4. Keamanan: Lebih rentan terhadap serangan Cross-Site Scripting (XSS). Karena SPA sangat bergantung pada skrip sisi klien yang memanipulasi data, jika data yang dimasukkan pengguna tidak divalidasi atau “dibersihkan” (sanitized) dengan benar, penyerang bisa menyuntikkan skrip berbahaya.

  5. Memory Leaks: Jika tidak dikelola dengan baik, aplikasi JavaScript yang berjalan lama di satu halaman dapat mengalami memory leaks (kebocoran memori), yang menghabiskan sumber daya sistem pengguna dan membuat aplikasi lambat seiring waktu.

Pendekatan Teknis Implementasi SPA

Document Hashes (URI Fragments):

  • Cara Kerja: Menggunakan tanda pagar (#) di URL (misal: example.com/#/profile).

  • Detail: Bagian setelah # (yaitu fragment) tidak dikirim ke server oleh browser. JavaScript di sisi klien dapat “mendengarkan” perubahan pada hash ini (via event onhashchange) dan kemudian memuat konten yang sesuai secara dinamis. Ini adalah cara lama untuk membuat routing di sisi klien.

History API:

  • Cara Kerja: Pendekatan yang lebih baru dan ramah SEO. Menggunakan fitur browser History API (seperti pushState() dan replaceState()).

  • Detail: Ini memungkinkan JavaScript untuk mengubah URL yang ditampilkan di bilah alamat browser tanpa memuat ulang halaman. URL terlihat “bersih” (misal: example.com/profile). Ini juga memungkinkan tombol back dan forward browser berfungsi seperti yang diharapkan.

AJAX (Asynchronous JavaScript and XML):

  • Cara Kerja: Ini adalah teknologi inti yang memungkinkan SPA.

  • Detail: Memungkinkan JavaScript untuk membuat permintaan data ke server di latar belakang (asinkron) tanpa menghentikan interaksi pengguna. Meskipun namanya XML, saat ini hampir selalu menggunakan JSON (JavaScript Object Notation) untuk transfer data. Menggunakan XMLHttpRequest (lebih tua) atau Fetch API (lebih baru).

WebSockets:

  • Cara Kerja: Teknologi komunikasi real-time dua arah (bidirectional).

  • Detail: Membuka koneksi yang persisten antara klien dan server. Berbeda dengan AJAX (di mana klien harus meminta data), WebSockets memungkinkan server juga dapat mendorong (push) data ke klien secara instan. Sangat berguna untuk aplikasi obrolan, notifikasi live, atau data feed yang terus diperbarui.

Teknologi Lainnya:

  • Server-Sent Events (SSE): Mirip WebSockets tetapi hanya satu arah (server-ke-klien). Efisien jika klien hanya perlu menerima pembaruan dari server.

  • Browser Plugins: (Contoh: Silverlight, Flash, Java Applets). Ini adalah teknologi usang (legacy) dan tidak lagi digunakan untuk pengembangan web modern.

Summary

Single Page Application (SPA) adalah pendekatan pengembangan web modern di mana aplikasi dimuat satu kali dan konten halaman diperbarui secara dinamis tanpa refresh halaman penuh, memberikan pengalaman pengguna yang cepat dan mulus seperti aplikasi native. Berbeda dengan aplikasi tradisional yang memerlukan pemuatan halaman baru untuk setiap interaksi, SPA menggunakan teknologi client-side seperti AJAX (untuk mengambil data) dan History API (untuk mengelola URL) guna mengubah tampilan secara dinamis. Meskipun SPA menawarkan keuntungan besar dalam kecepatan, caching, dan penggunaan kembali kode backend, SPA juga menghadapi tantangan teknis signifikan, terutama dalam hal SEO (Search Engine Optimization), waktu muat awal yang lambat, dan peningkatan risiko keamanan seperti XSS.

Graph View

Backlinks