[E-ISSN 2656-0321] [Vol 16 No 1] [ Januari 2022]

## STUDI PERBANDINGAN VUE COMPONENT
LIBRARY/FRAMEWORK : VUETIFY, BUEFY,

## BOOTSTRAPVUE MENGGUNAKAN GTMETRIX
Andi Bahtiar Semma a,1*
IAIN Salatiga andisemma@iainsalatiga.ac.id

## ARTICLE INFO

## ABSTRACT
web application css framework vueJs component library Developing  a  web  application  from  scratch  is  relatively  hard  as  it requires writing a large amount of code. Maintaining the code when it  comes  to  evolve  becomes  quite  tedious.  Therefore,  using  a framework will simplify the process.  Using a CSS framework will lift developers’s web designing process as it does the hard work for developers, especially Component framework as it provides a large range  of  components  and  attributes.  However,  when  building  a simple web application, developers usually do not need a full-fledged framework  as  it  will  come  with  a  downside  on  performance  and bundle  size.  In  this  article  we  will  discuss  three  popular  vue component  libraries/frameworks  and  test  its  performance  using GTmetrix  so  this  can  become  a  variable  of  consideration  when choosing components framework.

## 1. Pendahuluan
Jaringan interkoneksi antar komputer secara global atau biasa kita sebut dengan internet pertama kali dikenalkan di Indonesia sekitar tahun 90 an. Jaringan internet memunculkan paradigma baru dalam berkomunikasi. Evolusi dari aplikasi web sangat signifikan, perkembangan aplikasi web pun semakin tidak  terbendung.  Aplikasi  web  telah  merubah  cara  manusia  dalam  mencari  informasi,  melakukan pekerjaan, berbelanja barang maupun jasa , berinteraksi dengan teman dan handai taulan, mengisi waktu luang bahkan dalam mencari pasangan. Hal ini juga memaksa perusahaan untuk memikirkan kembali bagaimana mereka dalam berbisnis, berinteraksi dengan konsumen dan supplier dan dalam bekerjasama dengan perusahaan lain. Perkembangan aplikasi web juga mempengaruhi cara berpolitik, bernegara dan beragama.  Semakin  tingginya  adopsi  smartphone  dewasa  ini  juga  menjadi  pemicu  berkembangnya aplikasi web. Saat ini kita memasuki era dimana perkembangan pesat terjadi pada smartphone, gadget, peralatan  elektronik  rumah  tangga.  Jutaaan  perangkat  terhubung  ke  jaringan  internet  dan  dapat berkomunikasi dan berbagi data satu sama lain. Aplikasi web jenis baru semakin bermunculan, seperti augmented reality, aplikasi yang dapat dikontrol melalui gestur dan suara, bahkan mungkin kedepannya akan  ada  aplikasi  yang  dapat  dioperasikan  melalui  gelombang  otak.  Pengembangan  aplikasi  web berubah menjadi proses yang kompleks dimana melibatkan berbagai bahasa pemrograman, framework, dan paradigma sehingga sangat sulit jika satu orang pengembang dapat menguasai semua hal tersebut. Selain itu dalam pengembangan aplikasi web terkadang dibenturkan dengan tenggat waktu yang sangat mendesak [1].
Ketika kita membahas tentang desain web, mungkin hal pertama yang terlintas dibenak kita adalah framework  seperti  Bootstrap,  Materialize,  Foundation.  Hal  itu  sangat  wajar  karena  ketiganya memberikan banyak komponen siap pakai yg dapat langsung digunakan. Dalam pengembangan aplikasi web tanpa framework ( from scratch ) bukanlah pekerjaan yang mudah sebab membutuhkan waktu yang lama  dan  melibatkan  penulisan  kode  yang  sangat  banyak.  Pemeliharaan  menjadi  lebih  sulit  ketika aplikasi web tersebut berkembang menjadi semakin kompleks. Coding from Scratch atau membuat dari
[E-ISSN 2656-0321] [Vol 16 No 1] [ Januari 2022]
nol amatlah menyulitkan sehingga penggunaan framework dapat membantu dalam penulisan kode yang lebih sedikit, dan pemakaian reusable component yang sering digunakan [2].
Akan  tetapi  dalam  pengambangan  aplikasi  web  framework  yang  ringan  juga  dibutuhkan  ketika membuat aplikasi web sederhana. Komprehensif framework seperti Bootstrap dapat digantikan dengan framework yang lebih ringan sehingga mendapatkan performa website yang baik. Dalam artikel ini saya akan  membahas  mengenai  performa  framework  component  base  yang  penggunaan  nya  sangat membantu dalam pengembangan aplikasi web sehingga didapat framework mana yang paling cepat.
Test  usability  yang  otomatis  biasanya  digunakan  dalam  menguji  performa  suatu  website. performanya sendiri dibagi dalam beberapa kategori seperti bandwidth, response time, page size dan load time . ada beberapa tools yang dapat digunakan dalam pengujian suatu website seperti Pingdom, GTmetrix, Qualidator, website Grader, Pagespeed insight, Site Analyzer, WebPage Analyzer,  dll [3]. GTmetrix  merupakan  alat  test  performa  website  desktop  maupun  mobile  yang  populer.  Gtmetrix memiliki antarmuka grafis yang modern yang memudahkan penggunanya. tampilan laporannya begitu detail sekaligus memberikan rekomendasi bagaimana cara untuk meningkatkan performa website yang di uji. selain itu GTmetrix juga dapat melakukan test menggunakan beberapa platform browser seperti Chrome/Firefox  dan  dapat  disetel  untuk  beberapa  perangkat  dan  kecepatan  internet  yang  berbeda (2G/3G/4G) [4].
Beberapa  penelitian  terdahulu  mengkaji  performa  website  menggunakan  tools  yang  sama  yaitu GTmetrix. Akan tetapi pengujian difokuskan pada performa website secara keseluruhan dan memiliki kelompok uji yang serumpun. seperti penelitian yang dilakukan oleh Kaur. S dalam jurnal nya yang berjudul  “ An  Empirical  Performance  Evaluation  of  Universities  Website ”  membahas  mengenai performa website universitas[3]. penelitian yang dilakukan oleh Manuaba. IBK dalam jurnalnya yang berjudul  “ Performance  Comparison  of  Text  Based  Game  Prototypes  Using  GTmetrix ”  membahas mengenai  performa  website  game  berbasis  text[4].  Penelitian  lain  yang  dilakukan  oleh  Susanto.  A dalam jurnalnya yang berjudul “Analisis Performa Website ISI Surakarta dan Universitas Diponegoro Menggunakan Automated Software Testing GTmetrix” juga membahas tentang perbandingan performa website  universitas[5].  Secara  umum  test  performa  dilakukan  kepada  performa  website  secara keseluruhan yang mempunyai rumpun tertentu. sedangkan dalam penelitian ini test performa dilakukan untuk membandingkan Component libraries yang digunakan pada website.

## 2. Metodologi Penelitian
Penelitian ini menggunakan metode kuantitatif[6] yakni :
a.  Sasaran   dari   penelitian   yakni   cenderung bersifat   tetap   sehingga   dapat   diprediksi, fragmental, serta berdimensi tunggal.
b.  Variabel dikaji dan diukur dengan alat yang baku dan tidak bersifat subjektif.
Ciri dari penelitian kuantitatif yakni :
a.  Proses  penelitian  mengikuti  prosedur  yang telah direncanakan.
b.  Subjek,    data,   sumber    data,   serta   alat   yang digunakan  sesuai  dengan  perencanaan yang telah dilakukan dan diukur menggunakan sistem penilaian performa otomatis GTmetrix.
VueJs  merupakan  sebuah  kerangka  kerja  progresif  guna  mengembangkan  antar  muka.  Berbeda dengan  kerangka  kerja  monolitik,  Vue  didesain  dari  awal  agar  dapat  diimplementasikan  secara bertahap. Fungsi utama Vue adalah fokus pada tampilan, mudah diadopsi dan diintegrasikan dengan projek yang sudah ada maupun kerangka kerja lain. Selain itu Vue juga dapat menjadi pondasi utama dalam pengmebnagan Single-Page Applications (SPA) dan dapat dikombinasikan dengan tooling yang modern dan support libraries [7].
Single  page  application  (SPA)  yakni menggunakan  satu  halaman  web  saja  sebagai  tampilan  dari aplikasinya, sehingga dapat mengurangi beban kerja dari server dan browser serta menjadikan kinerja
[E-ISSN 2656-0321] [Vol 16 No 1] [ Januari 2022]
aplikasi web nampak bersifat aplikasi desktop dengan proses Rendering terhadap semua data data yang sudah dimasukkan yang kemudian diterjemahkan dalam sebuah bentuk output [8].
Vuetify merupakan  sebuah  library  user interface  dari front  end  framework  yang memiliki  desain antarmuka  yang  baik  yaitu  vue.js[9].  Vuetify  menyediakan  komponen  yang  siap  digunakan  dalam pengembangan  aplikasi  web  sehingga  mampu  memberikan  pengalaman  pengguna  yang  baik  dan konsisten  serta    mempercepat  proses  pengambangan  sistem  informasi  berbasis  web.  Vuetify mengadopsi Material Design sebagai pondasinya.
Buefy merupakan salah satu component front end framework yang memiliki desain antarmuka yang. hampir  sama  dengan  Vuetify,  Buefy  menyediakan  komponen  yang  siap  digunakan  dalam pengembangan  aplikasi  web  sehingga  mampu  memberikan  pengalaman  pengguna  yang  baik  dan konsisten serta  mempercepat proses pengambangan sistem informasi berbasis web. Buefy mengadopsi Bulma CSS framework sebagai pondasinya dan memaksimalkan penggunaan flexbox . Bulma sendiri merupakan CSS framework berbasis flexbox yang ringan dan dapat dikonfigurasi. Flexbox merupakan spesifikasi baru dalam dunia CSS yang memiliki browser support yang baik. BUlma memudahkan kita dalam  menggunakan  flexbox  dan  menangani  semua  pekerjaan  sulit  dalam  penggunaan  flexbox, sehingga kita tidak perlu mempelajari flexbox itu sendiri. Akan tetapi pengetahuan tentang CSS masih dibutuhkan karena merupakan salah satu hal yang fundamental dalam pengembangan aplikasi web [10].
BootstrapVue adalah sebuah component library yang menyediakan komponen tampilan siap pakai. Bootstrap sendiri adalah CSS framework open-source yang dikembangkan oleh teknisi twitter Jacob Thornton and mark Otto guna meningkatkan code reusability . Bootstrap sangat fleksibel, elegan, mudah dipakai serta dapat dengan mudah di kembangkan.
Dalam  penelitian  ini  dilakukan  experimen  menggunakan  tiga component  library yaitu  Vuetify, Buefy  dan  BootstrapVue. Uji  coba  performa akan  dilakukan terhadap  website resmi masing-masing framework menggunakan GTmetrix.

## 3. Hasil dan Pembahasan
Pengujian dilakukan dengan memasukkan alamat website resmi masing-masing framework. setelah itu GTmetrix menghasilkan data untuk dianalisis dengan hasil sebagai berikut:

## a. Buefy
Gambar 1. Speed Visualization Buefy
Buefy  mendapat  TTFB  (Time  to  First  Byte)  atau  waktu  terkoneksi  pertama  kali  sebesar  191ms. Untuk First Contentful Paint atau waktu yang dibutuhkan untuk memunculkan konten pertama sebesar 850ms.  Untuk  Largest  Contentful  Paint  atau  waktu  yang  dibutuhkan  untuk  menampilkan  konten terbesar  kepada  website  sebesar  1500ms.  Untuk  Time  to  Interactive    atau  waktu  yang  dibutuhkan website tersebut untuk dapat melakukan interaksi sebesar 850ms. Dan untuk Fully Loaded Time atau waktu yang dibutuhkan untuk semua konten ditampilkan sebesar 2800ms.
[Vol 16 No 1] [ Januari 2022]
Gambar 2. Buefy GTmetrix resume
Jika dilihat dari resume diatas Buefy mendapat GTmetrix Grade A dengan performance score 94% dan total Blocking Time sebesar 0ms.

## b. Vuetify

## Gambar 3. Speed Visualization Vuetify
Vuetify  mendapat  TTFB  (Time  to  First  Byte)  atau  waktu  terkoneksi  pertama  kali  sebesar  29ms. Untuk First Contentful Paint atau waktu yang dibutuhkan untuk memunculkan konten pertama sebesar 276ms.  Untuk  Largest  Contentful  Paint  atau  waktu  yang  dibutuhkan  untuk  menampilkan  konten terbesar  kepada  website  sebesar  1300ms.  Untuk  Time  to  Interactive    atau  waktu  yang  dibutuhkan website tersebut untuk dapat melakukan interaksi sebesar 1100ms. Dan untuk Fully Loaded Time atau waktu yang dibutuhkan untuk semua konten ditampilkan sebesar 1500ms.
[E-ISSN 2656-0321] [Vol 16 No 1] [ Januari 2022]
Gambar 4. Vuetify GTmetrix resume
Jika dilihat dari resume diatas Vuetify mendapat GTmetrix Grade B dengan performance score 77% selisih 17% dari yang terbaik dan total Blocking Time sebesar 321ms selisih 321ms jika dibandingkan dengan yang terbaik yaitu Buefy.
c. BootstrapVue

## Gambar 5. Speed Visualization BootstrapVue
BootstrapVue  mendapat  TTFB  (Time  to  First  Byte)  atau  waktu  terkoneksi  pertama  kali  sebesar 40ms. Untuk First Contentful Paint atau waktu yang dibutuhkan untuk memunculkan konten pertama sebesar 509ms. Untuk Largest Contentful Paint atau waktu yang dibutuhkan untuk menampilkan konten terbesar kepada website sebesar 609ms. Untuk Time to Interactive  atau waktu yang dibutuhkan website tersebut untuk dapat melakukan interaksi sebesar 785ms. Dan untuk Fully Loaded Time atau waktu yang dibutuhkan untuk semua konten ditampilkan sebesar 1300ms.
[E-ISSN 2656-0321] [Vol 16 No 1] [ Januari 2022]
Gambar 6. BootstrapVue GTmetrix resume
Jika dilihat dari resume diatas Vuetify mendapat GTmetrix Grade A dengan performance score 93% selisih 1% dari yang terbaik dan total Blocking Time sebesar 226ms selisih 226ms jika dibandingkan dengan yang terbaik yaitu Buefy.
Tabel 1. Detail Performance

## 4. Kesimpulan
Dari hasil pembahasan dapat disimpulkan bahwa Buefy mempunyai performa yang terbaik, akan tetapi BootstrapVue juga mempunyai performa yang sangat baik hanya selisih 1% untuk performance score nya. BootstrapVue terlihat lebih rendah performanya pada Total Blocking Time yang dapat dipengaruhi banyak  hal.  Akan  tetapi  untuk  First  Contentful  Paint  dan  LArgest  Contentful  Paint  memiliki  skor terbaik.  Saran  pada  penelitian  ini  adalah  dapat  ditambahkan  beberapa  parameter  pengujian  dan  test dilakukan pada aplikasi web yang dibangun penuh dengan masing-masing framework dengan layout dan komponen yang sama sehingga didapat hasil yang lebih akurat.
[E-ISSN 2656-0321] [Vol 16 No 1] [ Januari 2022]

## Daftar Pustaka
[1]  V. Schafer, “From the history of Internet to Internet and Web histories,” 2020.
[2]  A. Shenoy dan A. Prabhu, CSS Framework Alternatives: Explore Five Lightweight Alternatives to Bootstrap and Foundation with Project Examples . Apress, 2018.
[3]  S. Kaur, K. Kaur, dan P. Kaur, “An empirical performance evaluation of universities website,” Int. J. Comput. Appl. , vol. 146, no. 15, hlm. 10–16, 2016.
[4]  I. B. K. Manuaba, “Performance Comparison of Text Based Game Prototypes Using GTmetrix,” J. Games Game Art Gamification , vol. 6, no. 1, hlm. 1–6, 2021.
[5]  W. Lestari dan A. Susanto, “Analisis Performa Website ISI Surakarta dan Universitas Diponegoro Menggunakan Automated Software Testing GTmetrix,” vol , vol. 2, hlm. 1–8, 2017.
[6]  N. Sudjana, Penelitian dan Penilaian Pendidikan, Sinar Baru Algesindo . Bandung, 2001.
[7]  A. Kyriakidis dan K. Maniatis, The Majesty of Vue. js . Packt Publishing Ltd, 2016.
[8]  P. L. L. Belluano, “Pengembangan Single Page Application Pada Sistem Informasi Akademik,” Ilk. J. Ilm. , vol. 10, no. 1, hlm. 38–43, 2018.
[9]  I. G. S. Rahayuda dan N. P. L. Santiari, “Evaluasi Desain Antarmuka Sistem Informasi Bencana Menggunakan Aturan Theo Mandel,” J. Teknol. Inf. Dan Ilmu Komput. , vol. 8, no. 3, hlm. 579– 586, 2021.
[10] J. Thomas, O. Potiekhin, M. Lauhakari, A. Shah, dan D. Berning, Creating Interfaces with Bulma . Bleeding Edge Press Santa Rosa, 2018.