Inilah Alasan Mengapa Sangat Dianjurkannya Mempelajari Single Page Application

Inilah Alasan Mengapa Sangat Dianjurkannya Mempelajari Single Page Application


SPA atau single page application, ramai diperbincangkan beberapa tahun terakhir dan juga sudah banyak yang telah menggunakannya pada web maupun aplikasi berbasis web. Beberapa framework yang mampu menghasilkan konsep SPA ini diantaranya seperti vue, emberjs, react, angular, meteor, dan banyak lagi sebetulnya, cuma yang saya sebutkan barusan itu yang betul-betul cukup populer. Kelebihan dan kekurangan dimiliki SPA framework. Namun bukan itu pembahasan utamanya pada artikel kali ini.

Kali ini kita akan berbicara mengenai "Alasan mengapa harus mempelajari single page application, khususnya web developer / web programmer"

Dahulu kala programming web masih konvensional, belum terlalu banyak perkembangan juga perluasan teknologi, di mana php mysql dan server scripting sejenisnya masih menjadi tulang punggung yang mendominasi per-website-an terbukti dari dukungan PHP hadir untuk hampir 100% penyedia hosting baik di luar maupun dalam negeri. Namun belakangan kebutuhan tidak sekedar membuild halaman website, karena berkaitan juga dengan visitor website, dimana visitor website yg bertambah sama dengan tambahan request pekerjaan untuk web server, yang mana hal tersebut tentunya mempengaruhi kinerja server.

Jadi seperti biasa, ini semua berkaitan dengan kebutuhan, bukan suatu keharusan. Sehingga dari sinilah dibutuhkan teknologi web alternatif, tidak sekedar alternatif karena betul betul harus bisa diandalkan.

Cikal Bakal SPA

Teknologi web development sedikit banyak telah berubah tekniknyansemenjak ditemukan dan diimplentasikannya AJAX. Banyak vendor mencari solusi agar Web bekerja lebih cepat namun juga tetap bisa menghemat resource server yg berarti juga mengurangi cost yg keluar. Setahu saya sebelum munculnya Teknologi SPA ini ada beberapa vendor yg mengeluarkan prototipe yg menurut saya nantinya menjadi kerangka cikal bakal dari SPA. Mengapa begitu? Karena saya telah menggunakannya dalam proses develop Kaffah.biz

Waktu itu prototipenya masih berupa plugin jquery, yakni jquery bbq. Yang mana fungsi utamanya adalah mengkonversi url hash ke dalam request ajax load.

Perbandingan menggunakan JQuery Ajax dan Multi Page

Jadi begini kurang lebih jika Anda sebelumnya pernah membuat Web menggunakan teknik Multi Page dengan menggunakan php, misal ada 3 link didalamnya yakni halaman komunitas, halaman login, dan halaman artikel. Ketika misalkan user dri halaman beranda masuk ke dalam halaman artikel maka akan ada request generate html ke Web server, yg mana request ini akan terasa sekali perpindahan halamannya. Karena ada loading time dan refresh Page. Refresh Page ini berarti memuat ulang kembali file file js dan css nya. Begitulah yg terjadi dalam teknologi Web konvensional yg sampai saat ini masih tetap mendominasi dunia perwebsitean.

Nah berbeda dengan ketika Anda menggunakan jquery bbq plugin, jadi misalkan saat ini anda berada di halaman yg berisi artikel-artikel lalu Anda ingin melihat detilnya dengan mengklik salah satu artikelnya untuk melihat detil dari artikel tersebut jquery bbq menghandlenya sebagai request hash url yg mana hash url tersebut akan ditangkap dan developer menampilkan halaman detil artikel berdasarkan hash urlnya, lebih tepatnya sih menyisipkan halaman lain ke dalam halaman utama. Sama halnya ketika anda menggunakan teknik ajax untuk meload halaman lain ke dalam halaman utama.

Nah SPA tidak sekedar jquery bbq semata dan tentunya memiliki banyak sekali kehebatan tambahan lainnya. Yang jelas dalam SPA tidak ada lagi refresh Page, tidak ada perpindahan halaman melainkan halaman lain di sisipkan ke dalam halaman utama dari SPA itu sendiri. Dan banyak lagi fitur lain seperti MVC pattern yang memungkinkan file-file html tidak jadi berantakan, sehingga menjadi indah di lihat, karena begitu rapi.

Anda bisa melihat demo SPA dengan mengakses Blogger atau Gmail atau Yahoo Mail atau Facebook, ya itulah hasil dari SPA. Teknologinya sudah ada sejak lama namun public developer baru bisa merasakan hebatnya beberapa tahun terakhir.

Teknik SPA ini bekerja dengan cepat sekali tentunya, karena tidak ada lagi generate html oleh Web server, hanya yg diperlukan saja yakni data berupa JSON.

Singkatnya sih Anda yg sebelumnya telah menggunakan teknik ajax untuk meload sebagian data untuk disisipkan ke dalam halaman Web akan semakin merasa Wow karena tidak lagi sekedar data yang diambil dari database tapi keseluruhan tampilan di load menggunakan teknik ini. Walaupun sebetulnya Ajax nya sendiri yg berperan untuk mengambil data, sedangkan untuk menyisipkan halaman ada lagi yg berperan.

Keuntungan Menggunakan SPA

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

  1. Sangat cepat jika dibandingkan dengan multi page web apps. Karena perpindahan halaman itu tidak lagi dihandle oleh server. Karena tentunya semakin sedikit request ke server maka akan menghasilkan performa yang jauh lebih baik.
  2. Tidak lagi setup di sisi server, karena SPA hanya memiliki satu buah index.html, beberapa css dan beberapa javascript. Namun tentunya kita tetap membutuhkan konfigurasi server jika ingin mengoptimasi performa dari SPA itu sendiri.
  3. Proses debug sangat mudah dilakukan cukup menggunakan browser saja, karena jika terjadi error cukup refresh saja browsernya sehingga tampil error di bagian console.
  4. Multiplatform Code, artinya kode yang telah dibuat dapat berjalan diberbagai macam platform. Dengan javascript kita dapat membuat website, desktop, android, iOS, Windows phone.

 

Kekurangan Menggunakan SPA

  1. Sangat bergantung pada javascript. User mematikan javascript = aplikasi tidak dapat dijalankan.
    isu Kompabilitas Browser. Tidak semua browser menggunakan standart yang sama untuk menjalankan javascript.
  2. Sehingga kadang terjadi conflict dimana suatu aplikasi SPA tidak dapat dijalankan dibrowser tertentu. Atau terkadang tidak mulus jalannya SPA di satu browser dan browser lainnya. Namun hal itu telah di minimalisir dengan adanya BABEL yang akan menstranspile kode javascript ke level dimana banyak browser telah mensupportnya.

 

Baiklah pembahasan saya cukupkan sampai disini ...

Kedepannya kita akan belajar 2 framework SPA yakni Angular dan React.

Semoga artikel ini bermanfaat dan membuat Anda semakin tertarik lebih jauh dalam mendalami Single Page Application.

Artikel Terkait :