lifelong learner — urip iku urup, currently working on accenture.

Mengenal Single page application(SPA)

2
Degananda.com -

1. Getting started

1.1 Single page application (SPA)

SPA merupakan singkatan dari single page application yang berarti user tidak akan berpindah halaman dengan melakukan request kepada server setiap kali terjadi perpindahan halaman. User hanya akan melakukan load terhadap satu halaman dari server kemudian mekanisme routing yang biasannya dihandle oleh server kini dibebankan pada client. Sistem SPA seperti ini memiliki UX yang sangat baik karena secara performa lebih cepat dibandingkan dengan non-SPA yang mana user harus merequest ke server untuk perpindahan halaman. SPA sangat memanfaatkan utilitas browser karena menggunakan javascript untuk frontendnya. Sementara untuk berkomunikasi terhadap backend tetap menggunakan http request terhadap suatu API/Web services.

Saat ini terdapat berbagai macam framework SPA dari beragam vendor. Misalkan facebook memiliki library(bukan framework karena hanya mengakomodasi view) bernama react yang biasannya akan dikolaborasikan dengan redux(flux architecture). Kemudian google dengan framework angular yang saat ini telah memasuki versi ke 4.x. Melalui dua framework tersebut(meski ada framework lainnya, namun kedua itulah yang paling populer saat ini) kita dapat membangun aplikasi SPA.

Dewasa ini, penggunaan single page application(SPA) masih belum booming(widespread) di internet. Ini dibuktikan dengan jumlah website yang menggunakan SPA masih sedikit. Namun, dipredisikan SPA akan menjadi standar aplikasi webnya mengingat adannya konsep progressive web application(PWA) yang berbasiskan pada website SPA. PWA sendiri dapat menghadirkan performa aplikasi website hampir sama dengan aplikasi native mobile dengan kecepatan hingga 120 fps (klaim google). Penggunaan SPA selama ini dimanfaatkan untuk membangun suatu dashboard yang mana dalam satu halaman user dapat mendapatkan berbagai insight(informasi) mengenai berbagai macam proses bisnis dan navigasi dilakukan penuh dihalaman tersebut tanpa berpindah ke halaman lainnya.

Haruskah kita membangun aplikasi selalu dengan menggunakan konsep SPA ? jawabannya adalah tidak karena itu semua tergantung dari kebutuhan bisnis serta kondisi lainnya. SPA dan mekanisme konvensional (multipage application) memiliki keuntungan dan kerugiannya masing-masing.

1.1.2 Single page application vs Multipage application

Sebelum kita dapat menentukan konsep (SPA atau Multipage) pembangunan Aplikasi maka harus terlebih dahulu membanginkan kedua teknologi pembangunan website ini.

Single page application merupakan aplikasi yang menggunakan utilitas penuh di browser yang tidak membutuhkan reload atau pergantian halaman dengan cara merequest ke server. Sedangkan Multipage application membutuhkan request ke server dan server mereturn berupa html ke browser. Artinnya setiap perpindahan halaman pada multipage application membutuhkan request dari client ke server. Single page application biasannya melakukan request ke server selain mendapatkan initial file (js/html/css) juga mendapatkan data berupan JSON(Javascript object notation) yang berfungsi sebagai data untuk komponenyan

Contoh website yang menggunakan SPA antara lain gmail, facebook, github, techinasia dan lain sebagainnya. Untuk multipage web application contohnya adalah wikipedia, kaskus, bukalapak dan lain-lain. Mekanisme yang berjalan pada SPA layaknya kita menggunakan browser secara native dimana secara penuh memanfaatkan perpindahan halaman , data binding, form, dan lain sebagainnya dengan menggunakan javascript. Tidak ada waiting time atau waktu menunggu saat terjadi perpindahan halaman. Hal seperti ini memberikan UX(User experience) yang sangat luar biasa kepada user.

1.1.3 Keuntungan SPA

Berikut ini adalah beberapa keuntungan yang didapatkan oleh aplikasi-aplikasi web yang menggunakan konsep single page application.

  1. Relatif lebih “cepat” jika dibandingkan dengan multipage web application. Karena perpindahan halaman tidak perlu melakukan request kepada server. Less request better performance. Terlebih terdapat konsep “virtual DOM” dimana perubahan pada DOM hanya terjadi pada elemen yang berbubah. Sedangkan pada multipage DOM akan diperbarui secara menyeluruh karena perpindahan halaman harus melakukan request kepada server dan server memberikan respon berupa html.
  2. Tidak perlu mensetup “server”. SPA hanya memiliki satu buah index.html, beberapa css dan beberapa javascript. Sehingga kita cukup drag index.html terebut untuk menjalankan aplikasi SPA. Namun tentunnya ini sangat basic. Kita tetap membutuhkan server jika ingin mengoptimasi performa dari SPA itu sendiri.
  3. Proses debug sangat mudah cukup dengan menggunakan browser (console). Jika terjadi error cukup refresh pada browser maka akan tampil errornya di console tidak perlu melalui proses compile. Pada SPA compile akan dilakukan diahir saat seluruh aplikasi telah selesai dikerjakan(build) dengan menggunakan webpack dan babel(untuk transpile) untuk menghasilkan index.html , file-file css serta file-file javascript yang telah digabungkan menjadi satu.
  4. Satu kode untuk berbagai macam platform. Dengan javascript kita dapat membuat website, desktop, android, iOS, Windows phone. Terdapat beberapa framework untuk membangun mobile apps dengan javascript antara lain react native dan ionic(berbasiskan angular)

Itulah ke empat keuntungan dari SPA. Terahir karena SPA berjalan dibrowser maka proses caching akan berjalan lebih efisien karena aplikasi berjalan penuh dibrowser.

1.1.4 Kerugian SPA

Namun, tidak ada gading yang tidak retak. SPA memiliki berbagai kerugian atau kekurangan yang harus kita cermati dan pertimbangkan yaitu,

  1. SEO (Search engine optimization). Untuk saat ini aplikasi SPA sangat susah bersaing untuk mendapatkan SEO yang baik jika dibandingkan dengan multipage application. Meski telah terdapat tools yang dapat mengoptimasi SEO dari SPA. Contohnya pada angular terdapat angular universal (yang akan kita pelajari dichapter-chapter berikutnya). Selain render pada client dengan angular universal maka halaman juga dapat dirender di sisi server untuk keperluan SEO.
  2. Memiliki waktu inisiasi yang lambat jika dibandingkan dengan multipage web application. Client harus mendownload framework yang digunakan saat inisiasi awal. Sementara pada multipage application framework berada di sisi server sehingga user hanya menerima htmlnya Namun setelah proses inisiasi SPA lebih cepat dibandingkan multipage application.
  3. Sangat bergantung pada javascript. User mematikan javascript = aplikasi tidak dapat dijalankan.
  4. Browser compatible issue. Bergantung pada versi javascript di suatu browser. Tidak semua browser menggunakan standart yang sama untuk menjalankan javascript. Sehingga kadang terjadi conflict dimana suatu aplikasi SPA tidak dapat dijalankan dibrowser tertentu. Namun hal itu telah di minimalisir dengan adannya babel yang akan menstranspile kode javascript ke level dimana banyak browser kompatibel.

1.1.3 SPA in Action

Terdapat cukup banyak website yang menggunakan SPA di internet namun tentunnya jumlahnya tidak sebanding dengan aplikasi konvensional(multipage). Jika anda penasaran bagaimana SPA anda dapat mengunjungi contoh aplikasi kami yang dibangun dengan menggunakan SPA. Silahkan membuka browser dan menavigasikan ke url berikut : http://demo.degananda.com/angular/chapter-8/. Anda dapat melihat suatu form yang berfungsi untuk menambahkan “note” atau catatan. Aplikasi tersebut berfungsi untuk melakukan pengelolaan(create , read, update dan delete) catatan dengan temporary storage / local storage(singleton).

Untuk mendemokan SPA cobalah anda buat satu buah data (isinnya bebas). Lalu setelah data terinput (masuk ke local storage) cobalah untuk menuju halaman untuk mengubah data catatan tersebut. Disitu akan terlihat bahwa perpindahan halaman tidak melakukan “reload” a.k.a melakukan request ke server. Inilah salah satu kemampuan single page application.

Kemudian coblah melaukan inspect element pada url diatas maka anda hanya akan melihat file html yang sederhana dan memanggil beberapa file css serta javascript. Seluruh proses data binding, routing , form, dan lain sebagainnya akan dihandle oleh javascript.

  • Umar Syarif

    Keren..!!

  • sinta purnamasari

    Wah, canggih ya SPA.