People Innovation Excellence
 
Feature Image

Teknologi Single Page Application (SPA)

Secara teori, single page application merupakan aplikasi yang bekerja di dalam browser yang tidak membutuhkan reload page saat digunakan. Dengan kata lain, pengguna  atau user tidak akan berpindah halaman dengan melakukan request kepada server setiap kali terjadi interaksi pada aplikasi. Yang membedakan SPA dengan non-SPA adalah single page application hanya akan melakukan load terhadap satu halaman dari server kemudian mekanisme routing yang biasanya di-handle oleh server kini dibebankan pada client. Akibatnya, website yang menggunakan SPA memiliki performa yang lebih cepat tanpa harus load halaman secara terus menerus.

Source: https://msdn.microsoft.com/en-us/magazine/dn463786.aspx

Adapun 2 keuntungan utama yang didapat ketika menerapkan single page application yaitu mengurangi penggunaan bandwidth jaringan dan proses navigasi yang lebih cepat. Bandwidth jaringan berkurang dikarenakan SPA ini banyak didukung dengan library JavaScript. Sedangkan proses navigasi yang lebih cepat dikarenakan data yang diterima dari server berupa JSON (JavaScript Object Notation) sehingga bisa di-render secara asynchronous dengan menggunakan JavaScript. Salah satu framework JavaScript yang memakai konsep SPA adalah framework Vue.js.

Vue.js adalah sebuah framework berbasis JavaScript yang berguna untuk membuat sebuah front end application. Vue.js memiliki kemiripan sintak dengan framework Angular.js yang sudah lebih dahulu diperkenalkan dan digunakan oleh publik, sehingga tidak terlalu sulit jika ingin melakukan migrasi dari Angular.js ke Vue.js. Dengan taglineProgressive JavaScript Framework”, Vue.js dapat memudahkan dalam membuat sebuah website yang membutuhkan banyak interaksi seperti single page application yang sudah dibahas di atas. Dibandingkan dengan framework Angular.js yang sudah mendahuluinya, Vue.js lebih mudah untuk dipelajari dan diimplementasikan.

Jika Angular.js menggunakan sistem controller, Vue.js menggunakan pendekatan DOM (Document Object Model) yaitu dengan menggunakan id, name atau class dari suatu component HTML (Hypertext Markup Language). Vue.js juga memiliki component routing yaitu vue-router.

Vue.js memiliki sistem reactive data binding yang berfungsi agar data dan DOM tetap terkait. Biasanya jika menggunakan jQuery, dalam memanipulasi DOM dilakukan secara manual. Dengan adanya proses binding, DOM akan bersinkronisasi dengan data, dan apabila setiap kali terjadi perubahan data, DOM akan memperbaruinya. Hal ini memudahkan developer dalam melakukan penulisan code.

Berikut adalah gambar dari proses sinkronisasi DOM dan data Vue.js

Source: https://012.vuejs.org/guide/

Berikut adalah gambar dari life cycle Vue.js :

Source: https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks

Keuntungan menggunakan Vue.js adalah:

  • Mudah dipelajari dan diimplementasikan dibanding framework lainnya
  • Memiliki banyak fitur dan kegunaan
  • Performa yang lebih baik dibanding framework lainnya
  • Mudah untuk dilakukan maintain
  • Kode mudah di test

Sumber:

  • https://msdn.microsoft.com/en-us/magazine/dn463786.aspx
  • https://medium.com/@NeotericEU/single-page-application-vs-multiple-page-application-2591588efe58
  • https://vuejs.org/

Penulis:

Jonathan Gunawan – 1901479354
Ivan Gunawan -1901466055

Supervisor : Hanry Ham


Published at : Updated
Written By
Hanry Ham, S.Kom., M.Eng
Subject Content Coordinator Software Development | School of Computer Science
Leave Your Footprint

    Periksa Browser Anda

    Check Your Browser

    Situs ini tidak lagi mendukung penggunaan browser dengan teknologi tertinggal.

    Apabila Anda melihat pesan ini, berarti Anda masih menggunakan browser Internet Explorer seri 8 / 7 / 6 / ...

    Sebagai informasi, browser yang anda gunakan ini tidaklah aman dan tidak dapat menampilkan teknologi CSS terakhir yang dapat membuat sebuah situs tampil lebih baik. Bahkan Microsoft sebagai pembuatnya, telah merekomendasikan agar menggunakan browser yang lebih modern.

    Untuk tampilan yang lebih baik, gunakan salah satu browser berikut. Download dan Install, seluruhnya gratis untuk digunakan.

    We're Moving Forward.

    This Site Is No Longer Supporting Out-of Date Browser.

    If you are viewing this message, it means that you are currently using Internet Explorer 8 / 7 / 6 / below to access this site. FYI, it is unsafe and unable to render the latest CSS improvements. Even Microsoft, its creator, wants you to install more modern browser.

    Best viewed with one of these browser instead. It is totally free.

    1. Google Chrome
    2. Mozilla Firefox
    3. Opera
    4. Internet Explorer 9
    Close