SEMINAR NASIONAL CORISINDO ◼ 33

Implementasi Framework Angular untuk Meningkatkan

Performa Aplikasi Web Modern
Tony Wijaya
Jurusan Sistem Informasi STMIK Pontianak
Jl. Merdeka No. 372 Pontianak, Kalimantan Barat
E-mail: [Link]@[Link]

Abstrak

Aplikasi web modern dirancang dengan framework front-end yang memiliki performa tinggi.
Salah satu framework tersebut adalah Angular. Keunggulan menggunakan framework ini dalam
merancang aplikasi web adalah di sisi performa dan privasinya. Karena belum banyak penelitian yang
membandingkan performa framework ini terhadap framework lainnya, maka pada penelitian ini akan
dibuktikan secara ilmiah. Dengan framework Angular, aplikasi web yang kita rancang akan semakin tinggi
performanya dan data di dalam aplikasi web tersebut sulit dideteksi oleh mesin pencari seperti Google.
Penelitian ini dilakukan dengan metode Agile dengan pendekatan Extreme Programming. Pengujian
dilakukan dengan metode black box untuk membuktikan efisiensi antara penerapan framework Angular
dan tanpa framework. Hasil dari penelitian ini membuktikan bahwa performa framework Angular sangat
signifikan apabila dibandingkan dengan framework lainnya.
Kata kunci : Aplikasi web modern, framework Angular.

Abstract

Modern web applications are using high performance front-end frameworks. One of those
frameworks is Angular. The virtues of using this framework are the performance and the privacy. Due to
lack of other research that compare this framework with other alternatives, this research will be interesting
because it will prove the performance scientifically. With Angular, our web application will have
significantly higher performance and the content will be protected from search engines like Google. This
research uses Agile Methodology with Extreme Programming approach. Black box testing is used to prove
that Angular framework can be more efficient than without one. This research proves that Angular
framework gives significant improvement in performance compared to other frameworks.

Keywords: Modern web application, Angular framework.

1. Pendahuluan
Penelitian terdahulu mengenai AngularJS dan CodeIgniter [1] menjadi inspirasi dalam aplikasi
forum menjadi inpsirasi ditulisnya penelitian ini. Hanya saja pada penelitian tersebut tidak dibahas secara
teknis mengenai cara mengembangkan aplikasi web dengan AngularJS. Maka dalam penelitian ini, akan
lebih dibahas mengenai hal teknis yang tidak dilingkupi oleh penelitian terdahulu. Penelitian lainnya
bahkan memanfaatkan framework Angular untuk membuat e-commerce dengan Progressive Web
Application [2]. Ini membuktikan ketangguhan framework Angular untuk mengembangkan sebuah aplikasi
web yang modern.
Kelemahan dari aplikasi web konvensional terdapat pada lifecycle-nya yang relative singkat. Hal
yang berbeda terjadi pada aplikasi web modern. Interaksi antara peramban dan server dalam menampilkan
halaman web hanya terjadi pada pemuatan pertama kali saja. Selanjutnya, apabila pemakai meng-klik link
apapun, maka tidak terjadi lagi interaksi antara peramban dan server. Hal ini menyebabkan peningkatan
performa yang luar biasa pada aplikasi web modern. Lifecycle sebuah web menjadi jauh lebih panjang dan
tidak membutuhkan banyak interaksi dengan server. Performanya bahkan hamper menyamai performa
aplikasi desktop. Dengan lifecycle seperti ini, maka server tidak akan terbebani dengan jumlah client yang
banyak, karena semua permintaan sudah ditangani oleh peramban itu sendiri. Dengan kata lain, aplikasi
web modern memindahkan sebagian besar porsi aplikasi ke client sehingga menjadi desentralisasi.
Framework Angular memanipulasi DOM dengan TypeScript [3]. TypeScript merupakan superset
dari JavaScript. DOM merupakan komponen dari peramban yang menampilkan antarmuka ke pemakai.
Aplikasi web modern dapat memanipulasi DOM secara dinamis sehingga halaman web tampak dinamis

STMIK PONTIANAK – 07 AGUSTUS 2023

SEMINAR NASIONAL CORISINDO ◼ 34

tanpa berpindah halaman. Dengan framework Angular, maka DOM akan dapat dimanipulasi dengan mudah
dan tanpa friksi dengan library JavaScript lainnya. Framework Angular dapat menghindari hal seperti ini
terjadi karena Angular menggunakan Shadow DOM [4].
TypeScript merupakan bahasa yang dikembangkan dan dirawat oleh Microsoft [5]. JavaScript saja
tidak cukup digunakan pada framework Angular karena JavaScript tidak mendukung banyak tipe variabel.
Variabel yang umum dipakai di JavaScript hanya var (kepanjangan dari variant). Ini sulit apabila akan
dipakai untuk project yang besar dengan kompleksitas yang tinggi pula. Kehadiran TypeScript menghapus
semua kesulitan tersebut. Hal ini dikarenakan TypeScript mendukung sangat banyak tipe data layaknya
sebuah bahasa pemrograman seperti Java dan C++.
Objek penelitian ini adalah aplikasi prototype mahasiswa. Aplikasi web Angular ini digunakan
oleh dosen untuk mata kuliah “Pemrograman Mobile Web” di STMIK Pontianak. Aplikasi ini berisi modul-
modul seperti : Mahasiswa, Cuaca, Forex dan Wilayah Indonesia.
Modul yang akan dibahas adalah modul Mahasiswa yang berisi data mahasiswa STMIK
Pontianak. Data ini diinput oleh masing-masing mahasiswa yang telah mengambil mata kuliah
Pemrograman Mobile Web, Pemrograman Android dan Service-Oriented Architecture. Penelitian ini akan
membahas bagaimana:
• Siklus hidup aplikasi web dengan framework Angular,
• Mengcoding dengan bahasa pemrograman TypeScript
• Mengelola project dengan Visual Studio Code
• Keamanan dengan framework Angular
• Manajemen komponen dalam framework Angular
Penelitian ini ingin membuktikan bahwa implementasi framework Angular mampu meningkatkan
performa aplikasi web dibanding ketika aplikasi web tersebut menggunakan bahasa pemrograman PHP
secara native tanpa bantuan framework di sisi client, yang mana manajemen library JavaSrcript juga
dilakukan secara manual tanpa bantuan showdown DOM seperti pada framework Angular.

2. Metode Penelitian
Penelitian ini dilakukan dengan pendekatan kualitatif [6]. Objek penelitian adalah modul aplikasi
Mahasiswa yang digunakan pada saat perkuliahan di STMIK Pontianak. Instrumen penelitian yang
digunakan dalam penelitian ini adalah:
• Peramban Google Chrome versi 101.0.4951.67 beserta Developer Tools yang sudah tertanam di dalam
peramban tersebut
• Postman versi 9.0.3 untuk menguji web API
• Web API “[Link] yang merupakan web API
untuk melayani request dari aplikasi Mahasiswa.
• Aplikasi web Mahasiswa yang dibangun dengan menggunakan framework Angular.
Kesimpulan dibuat berdasarkan interpretasi data oleh peneliti. Bentuk penelitian adalah penelitian
eksperimen dengan objek yaitu aplikasi web Mahasiswa.
Metode perancangan perangkat lunak yang digunakan adalah metode Agile [7]. Prinsip dasar
Agile tertuang dalam Agile Manifesto for Software Development [8]. Selain itu, metode ini juga dapat
merespon dengan cepat terhadap perubahan daripada hanya mengikuti rancangan UML yang dibuat. Hal
ini relevan karena penelitian ini dilakukan dengan bentuk eksperimen.
Pendekatan perancangan perangkat lunak yang digunakan adalah Extreme Programming. Extreme
Programming merupakan disiplin dari pengembangan perangkat lunak yang berdasar pada nilai-nilai
kesederhanaan, komunikasi, umpan balik, dan keberanian [9]. XP melibatkan semua anggota tim dalam
setiap pekerjaannya: pair programming (coding bersama) dan semua pekerjaan lainnya secara bersama-
sama. Jadi setiap anggota tim terlibat dalam semua aktifitas dan tidak ada pembagian tugas. Semua memiliki
tanggung jawab yang sama, teknik menulis program yang sama, dan lain sebagainya. Hal ini sangat cocok
diterapkan dalam penelitian ini karena coding dalam penelitian ini dilakukan oleh 1 orang saja. Karena
dalam XP, setiap anggota tim juga melakukan semua pekerjaan tanpa ada pembagian tugas.
Aplikasi web Mahasiswa dibangun di atas framework Angular dengan theme dari Admin LTE
versi 3 [10] menggunakan bahasa pemrograman TypeScript dan dikode dengan bantuan IDE Visual Studio
Code [11]. Server basis data STMIK Pontianak ada di cloud yang berupa Virtual Private Server (VPS) dan
menggunakan sistem operasi Ubuntu 20.04 LTS (Long Time Support) [12]. Basis data yang digunakan
adalah MariaDB 10.3.30 yang merupakan basis data yang bersifat open source [13]. MariaDB digunakan

STMIK PONTIANAK – 07 AGUSTUS 2023

SEMINAR NASIONAL CORISINDO ◼ 35

karena sangat mendukung dengan sistem operasi yang digunakan yaitu Ubuntu sehingga menghasilkan
performa yang sangat tinggi.
3. Hasil dan Pembahasan
Ketika pemakai berhasil melakukan sign in, maka framework Angular akan memindahkan
pemakai ke halaman Dashboard. Perpindahan ini tidak melibatkan server sama sekali. Artinya, proses
perpindahan tersebut murni dilakukan oleh JavaScript / TypeScript yang merupakan bahasa pemrograman
dalam framework Angular. Framework Angular memiliki mekanisme routing di sisi client, yang dalam hal
ini adalah peramban, dalam memindahkan laman web dari halaman yang satu ke halaman yang lainnya.
Hal ini juga terjadi ketika pemakai meng-klik link “Mahasiswa” pada sidebar. Laman akan berpindah dari
Dashboard ke Mahasiswa, tanpa menyentuh sisi server sama sekali.

Gambar 1. Laman “Mahasiswa”.

Proses perpindahan laman atau yang disebut dengan istilah routing, diatur pada sebuah file yang
bernama [Link]. File ini ditulis dalam bahasa pemrograman TypeScript, yang merupakan
bahasa JavaScript yang diberi fitur tipe data [5]. Listing program untuk file [Link] dapat
dilihat pada gambar berikut :

Gambar 2. Listing Program [Link].

File tersebut berfungsi sebagai terminal bagi setiap request yang masuk dari komputer client. File
ini akan mengarahkan server untuk memproses ke laman mana sesuai masukan dari client. Dengan

STMIK PONTIANAK – 07 AGUSTUS 2023

SEMINAR NASIONAL CORISINDO ◼ 36

demikian framework Angular akan segera membersihkan laman yang ada saat ini dan digantikan dengan
laman web baru dari komponen MahsiswaComponent. Proses ini 100% dilakukan pada peramban sehingga
tidak terjadi hilangnya siklus hidup aplikasi web Mahasiswa.
Pengujian peningkatan perfoma ini dilakukan dengan memberikan 2 jenis link pada sidebar :
• Link yang menggunakan router dari framework Angular
• Link standar HTML yang tidak menggunakan routing dari Angular
Pengujian ini dilakukan untuk memperhatikan 2 hal. Yang pertama adalah berapa waktu yang
dibutuhkan untuk menampilkan halaman Mahasiswa. Yang kedua adalah berapa besar data yang ditransfer
dari server ke client untuk menampilkan halaman Mahasiswa. Tools yang digunakan untuk melakukan
pengukuran adalah dengan Developer Tools dengan mengaktifkan fitur “disable cache” untuk memastikan
peramban tidak mengambil data apapun dari cache atau penyimpanan sementara. Hal ini untuk memastikan
data yang diunduh dari server benar-benar murni sehingga lebih akurat.
Hasil dari pengujian halaman Mahasiswa yang tanpa menggunakan routing dari Angular dapat
dilihat pada gambar 7. Gambar tersebut dengan jelas memperllihatkan bahwa halaman Mahasiswa yang
tanpa memanfaatkan routing dari framework Angular membutuhkan waktu 2.20 detik dan peramban
mengunduh total data dari server sebesar 6.3 MB.
Sementara hasil dari pengujian halaman Mahasiswa yang menggunakan routing framework
Angular ternyata 0 detik sehingga Developer Tools tidak menampilkan data tersebut. Tidak ada kesalahan
yang terdapat pada Developer Tools karena tidak menampilkan data tersebut. Hal ini disebabkan karena
memang waktu yang dibutuhkan untuk menampilkan laman Mahasiswa dengan framework Angular adalah
relatif tidak ada atau mendekati nol detik!
Dari perbandingan total data yang diunduh dari server mengalami peningkatan efisiensi sekitar
hampir 15,000 %. Sedangkan perbandingan total waktu yang dibutuhkan antara menampilkan laman
Mahasiswa tanpa routing Angular dengan framework Angular mengalami peningkatan efisiensi yang
sangat signifikan pula, yaitu mendekati ∞ (tidak terhingga). Hal ini membuktikan bahwa implementasi
framework Angular sangat membantu meningkatan efisiensi aplikasi web kita secara signifikan.

Gambar 3. Pengukuran Halaman Mahasiswa Tanpa Routing Angular.

Gambar 4. Pengukuran Halaman Mahasiswa Menggunakan Routing Angular.

STMIK PONTIANAK – 07 AGUSTUS 2023

SEMINAR NASIONAL CORISINDO ◼ 37

Tabel 1. Rangkuman Hasil Pengujian Laman Mahasiswa.

Keterangan Tanpa Routing Routing Framework Efisiensi

Angular Angular

Total data yang diunduh dari server 6.3 MB 43.1 KB 14,967.98%

Total waktu untuk menampilkan 2.2 detik Mendekati 0 detik Medekati ∞
laman Mahasiswa
4. Kesimpulan
Berdasarkan hasil dan pembahasan, maka dapat diambil kesimpulan bahwa implementasi
framework Angular pada aplikasi web Mahasiswa STMIK Pontianak berhasil meningkatkan performa
aplikasi secara sangat signifikan apabila dibandingkan aplikasi web biasa tanpa framework di sisi front end.
Peningkatan performa ini juga didukung dengan berkurangnya jumlah data yang harus ditransfer dari sisi
server ke client. Para developer aplikasi web dapat memanfaatkan hasil penelitian ini sebagai bahan
pertimbangan dalam pemilihan teknologi, apabila mereka akan mengerjakan proyek rekayasa perangkat
lunak yang baru. Dengan menerapkan framework front end seperti Angular, aplikasi web yang dibangun
akan memiliki performa yang sangat baik. Diharapkan penelitian ini dapat dikembangkan lebih lanjut lagi
dengan membahas sisi keamanannya.

Daftar Pustaka

[1] S. B. Parera dan A. Liem, “Aplikasi Forum Online dengan Web Service tentang Pengenalan Bahasa
Pemrograman,” Voice of Informatics, vol. 6, no. 2, pp. 13-22, 2017.
[2] Z. Tahir, A. A. Ilham, M. Niswar, A. dan A. A. Fauzy, “Progressive Web Apps Development and
Analysis with Angular Framework and Service Worker for E-Commerce System,” 2021 IEEE
International Conference on Computing (ICOCO), 2021.
[3] G. Białecki dan B. Pańczyk, “Performance analysis of Svelte and Angular applications,” Journal
Computer Sciences Institute, vol. 19, pp. 139-143, 4 May 2021.
[4] X. Guo, Y. Huang, J. Ye, S. Yin, M. Li dan Z. Li, “ShadowFPE: New Encrypted Web Application
Solution Based on Shadow DOM,” Mobile Networks & Application, vol. 26, pp. 1733-1746, 22
February 2020.
[5] Microsoft, “TypeScript : JavaScript with Syntax for Types,” Microsoft, 2022. [Online]. Available:
[Link] [Diakses 5 May 2022].
[6] W. Purhantara, Metode Penelitian Kualitatif untuk Bisnis, Yogyakarta: Graha Ilmu, 2010.
[7] A. A. Albarqi, “The Proposed L-Scrumban Methodology to Improve the Efficiency of Agile
Software Development,” I.J. Information Engineering and Electronic Business, vol. 3, p. 13, 2018.
[8] M. Beedle, A. v. Bennekum, A. Cockburn, W. Cunningham, M. Fowler, J. Highsmith, A. Hunt, R.
Jeffries, J. Kern, B. Marick, R. C. Martin, K. Schwaber, J. Sutherland dan D. Thomas, “Signatories:
The Agile Manifesto,” 2001. [Online]. Available: [Link] [Diakses 8 September
2018].
[9] L. Lindstrom dan R. Jeffries, “Extreme Programming and Agile Software Development
Methodologies,” Information Systems Management, pp. 41-52, 2004.
[10] “Free Bootstrap Admin Template,” AdminLTE, 2022. [Online]. Available: [Link]
[Diakses 20 Mei 2022].
[11] Microsoft, “Visual Studio Code - Code Editing, Redefined,” Microsoft, 2021. [Online]. Available:
[Link] [Diakses 6 Agustus 2021].
[12] “The leading operating system for PCs, IoT devices, servers and the cloud,” Ubuntu, [Online].
Available: [Link] [Diakses 15 09 2019].
[13] “Supporting continuity and open collaboration,” MariaDB, 2019. [Online]. Available:
[Link] [Diakses 15 09 2019].

STMIK PONTIANAK – 07 AGUSTUS 2023