Analisis Kinerja Framework Frontend Next.js, Vue.js, dan Angular.js dalam Sistem Deteksi dan Visualisasi Objek pada Pertandingan Bola Basket

Yahya Idris Abdurrahman, Dr.Eng. Ir. Ganjar Alfian, S.T., M.Eng.

2025 | Tugas Akhir | D4 Teknologi Perangkat Lunak

Teknologi deteksi objek pada olahraga bola basket memiliki peran penting dalam membantu pelatih dan analis dalam mengevaluasi performa pemain serta strategi tim. Kebutuhan akan data statistik yang akurat dan dapat ditampilkan secara real time dari video pertandingan mendorong pemanfaatan sistem analisis berbasis deteksi objek otomatis. Penelitian ini bertujuan untuk membandingkan kinerja dan efisiensi penggunaan memori dari tiga framework frontend populer, yaitu Next.js, Vue.js, dan Angular.js, dalam pengembangan aplikasi web untuk visualisasi hasil deteksi objek dan data pertandingan bola basket. Pengujian dilakukan menggunakan alat bantu Lighthouse dan Memory Profiler pada Chrome DevTools untuk memperoleh data kuantitatif mengenai performa dan konsumsi memori. Hasil penelitian menunjukkan bahwa Next.js memberikan performa terbaik dengan rata-rata skor 99 poin pada mode desktop dan 79 poin pada mode mobile, diikuti oleh Vue.js dengan 93.8 poin pada desktop dan 50.2 poin pada mobile, serta Angular.js dengan 88.6 poin pada desktop dan 52.6 poin pada mobile. Dari sisi efisiensi memori, Next.js mencatat penggunaan terendah sebesar 10.4 MB, lebih rendah dibandingkan Vue.js sebesar 12.61 MB dan Angular.js sebesar 23.82 MB. Berdasarkan hasil tersebut, dapat disimpulkan bahwa Next.js merupakan framework paling optimal untuk pengembangan sistem visualisasi analisis olahraga berbasis video yang efisien, responsif, dan mendukung kebutuhan real time data processing.

Object detection technology in basketball plays a crucial role in assisting coaches and analysts in evaluating player performance and team strategies. The increasing demand for accurate and real time statistical insights from match videos has driven the integration of automated object detection into sports analytics systems. This study aims to compare the performance and memory efficiency of three popular frontend frameworks Next.js, Vue.js, and Angular.js in developing a web based application that visualizes basketball match data and object detection results. The research was conducted using performance and memory testing tools, namely Lighthouse and Memory Profiler from Chrome DevTools. The results indicate that Next.js obtained the highest performance with average scores of 99 points on desktop and 79 points on mobile, followed by Vue.js with 93.8 and 50.2 points, and Angular.js with 88.6 and 52.6 points, respectively. In terms of memory efficiency, Next.js showed the lowest average usage of 10.4 MB compared to Vue.js with 12.61 MB and Angular.js with 23.82 MB. These findings suggest that Next.js provides the most efficient and responsive frontend solution for real time video based sports analytics applications, serving as a reference for future system development in similar contexts.

Kata Kunci : Deteksi Objek, Next.js, Vue.js, Angular.js, Frontend, Bola Basket