Comparative Analysis Study of Front-End JavaScript Frameworks Performance Using Lighthouse Tool
Main Article Content
Abstract
JavaScript is one of the most widely known and widely used programs. The most common determining factor when choosing the proper framework for a job. Through a comparative analysis of several JavaScript frameworks like React, Angular, Vue, Svelte, and SolidJS, this research aimed at understanding how web applications perform. As part of this research and to compare JavaScript Framework, system development used SDLC Waterfall for each framework to build Weather App. According to the performance testing results, The FCP value of the five frameworks has a score of fewer than 1,8 seconds. The SI value of the five frameworks is less than 3.4 seconds. The LCP value of the five frameworks is less than 4 seconds. The TTI value of the five frameworks is less than 3.8 seconds The TTI value of the five frameworks is less than 3.8 seconds. Based on the results of the analysis and testing conducted in this research using Google Lighthouse, Vue delivers the best performance when implementing the Weather App.
Downloads
Download data is not yet available.
Article Details
How to Cite
Siahaan, M. . and Vincent Octarian Vianto (2022) “Comparative Analysis Study of Front-End JavaScript Frameworks Performance Using Lighthouse Tool”, Jurnal Mantik, 6(3), pp. 2462-2468. doi: 10.35335/mantik.v6i3.3131.
References
Armaini, I., Dar, M. H., & Bangun, B. (2022). Evaluation of Labuhanbatu Regency Government Website based on Performance Variables. Sinkron, 7(2), 760–766. https://doi.org/10.33395/sinkron.v7i2.11404
Baida, R., Andriienko, M., & Plechawska-Wójcik, M. (2020). Analiza porównawcza wydajno?ci frameworków Angular oraz Vue.js. 14, 59–64.
Bia?ecki, G., & Pa?czyk, B. (2021). Performance analysis of Svelte and Angular applications. Journal of Computer Sciences Institute, 19(April), 139–143. https://doi.org/10.35784/jcsi.2633
Carniato, R. (2020). A Solid RealWorld Demo Comparison of JavaScript Framework Performance. Level Up Coding. https://levelup.gitconnected.com/a-solid-realworld-demo-comparison-8c3363448fd8
Gupta, A., & Bartos, R. (2022). User Experience Evaluation of HTTP/3 in Real-World Deployment Scenarios. Proceedings of the 25th Conference on Innovation in Clouds, Internet and Networks, ICIN 2022, 17–23. https://doi.org/10.1109/ICIN53892.2022.9758130
Levlin, M. (2021). DOM benchmark comparison of the front-end JavaScript frameworks React, Angular, Vue, and Svelte.
Malavolta, I., Chinnappan, K., Jasmontas, L., Gupta, S., & Soltany, K. A. K. (2020). Evaluating the impact of caching on the energy consumption and performance of progressive web apps. Proceedings - 2020 IEEE/ACM 7th International Conference on Mobile Software Engineering and Systems, MOBILESoft 2020, 109–119. https://doi.org/10.1145/3387905.3388593
Mokhtari, H., Saberi, M. K., Amiri, M. R., Vakilimofrad, H., & Moradi, Z. (2022). Evaluating the Speed and Performance of the Websites of Hospitals and Specialty and Super-specialty Clinics of Hamadan University of Medical Sciences by GTmetrix. E-LIS.
Nugraha, W., Syarif, M., & Dharmawan, W. S. (2018). Penerapan Metode Sdlc Waterfall Dalam Sistem Informasi Inventori Barang Berbasis Desktop. JUSIM (Jurnal Sistem Informasi Musirawas), 3(1), 22–28. https://doi.org/10.32767/jusim.v3i1.246
Ollila, R., Mäkitalo, N., & Mikkonen, T. (2022). Modern Web Frameworks: A Comparison of Rendering Performance. Journal of Web Engineering. https://doi.org/10.13052/jwe1540-9589.21311
Patra, T. K. (2022). Comparison of JavaScript Frameworks: React.js and Vue.js. 7(9), 7–11. http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
Persson, M. (2020). JavaScript DOM Manipulation Performance?: Comparing Vanilla JavaScript and Leading JavaScript Front-end Frameworks. Independen, 40. http://bth.diva-portal.org/smash/get/diva2:1436661/FULLTEXT01.pdf%0Ahttp://urn.kb.se/resolve?urn=urn:nbn:se:bth-19531
Pradeep, S., & Sharma, Y. K. (2019). A Pragmatic Evaluation of Stress and Performance Testing Technologies for Web Based Applications. Proceedings - 2019 Amity International Conference on Artificial Intelligence, AICAI 2019, 399–403. https://doi.org/10.1109/AICAI.2019.8701327
Riady, J., Palit, H. N., Andjarwirawan, J., & Petra. (2019). Aplikasi E-Learning Berbasis Progressive Web App Pada Apologetika Indonesia. Jurnal Infra Petra, 1–5.
Riet, J. Van. (2020). Study on Mobile Web Performance. IEEE International, ii.
Ritonga, R. M., Munthe, I. R., & Purnama, I. (2022). Design an Information System Pendawa Bulucina (RAM) Web-Based Using The Waterfall Method. Jurnal Mantik, 6(36), 383–389. http://www.iocscience.org/ejournal/index.php/mantik/article/view/2211
Sherin, S., Iqbal, M. Z., Khan, M. U., & Jilani, A. A. (2021). Comparing coverage criteria for dynamic web application: An empirical evaluation. Computer Standards and Interfaces, 73(December 2019), 103467. https://doi.org/10.1016/j.csi.2020.103467
Sumedrea, S., Maican, C. I., Chi?u, I. B., Nichifor, E., Tec?u, A. S., Lix?ndroiu, R. C., & Br?tucu, G. (2022). Sustainable Digital Communication in Higher Education—A Checklist for Page Loading Speed Optimisation. Sustainability (Switzerland), 14(16). https://doi.org/10.3390/su141610135
Tjhoernandes, A., Susetyo, Y. A., Kristen, U., & Wacana, S. (2022). Penerapan MAC Address sebagai Autentikasi Aplikasi menggunakan JavascriptBindings Chromium Embedded Framework Python di PT. Jurnal Inovtek Polbeng, 7(1), 26–36.
Yason, S., Sudirman, & Yunus, A. (2022). Analisis Performa Website Sclean Menggunakan Pingdom Tools Dan Page Speed Insights. KHARISMA Tech, 17(1), 113–124. https://doi.org/10.55645/kharismatech.v17i1.213
Baida, R., Andriienko, M., & Plechawska-Wójcik, M. (2020). Analiza porównawcza wydajno?ci frameworków Angular oraz Vue.js. 14, 59–64.
Bia?ecki, G., & Pa?czyk, B. (2021). Performance analysis of Svelte and Angular applications. Journal of Computer Sciences Institute, 19(April), 139–143. https://doi.org/10.35784/jcsi.2633
Carniato, R. (2020). A Solid RealWorld Demo Comparison of JavaScript Framework Performance. Level Up Coding. https://levelup.gitconnected.com/a-solid-realworld-demo-comparison-8c3363448fd8
Gupta, A., & Bartos, R. (2022). User Experience Evaluation of HTTP/3 in Real-World Deployment Scenarios. Proceedings of the 25th Conference on Innovation in Clouds, Internet and Networks, ICIN 2022, 17–23. https://doi.org/10.1109/ICIN53892.2022.9758130
Levlin, M. (2021). DOM benchmark comparison of the front-end JavaScript frameworks React, Angular, Vue, and Svelte.
Malavolta, I., Chinnappan, K., Jasmontas, L., Gupta, S., & Soltany, K. A. K. (2020). Evaluating the impact of caching on the energy consumption and performance of progressive web apps. Proceedings - 2020 IEEE/ACM 7th International Conference on Mobile Software Engineering and Systems, MOBILESoft 2020, 109–119. https://doi.org/10.1145/3387905.3388593
Mokhtari, H., Saberi, M. K., Amiri, M. R., Vakilimofrad, H., & Moradi, Z. (2022). Evaluating the Speed and Performance of the Websites of Hospitals and Specialty and Super-specialty Clinics of Hamadan University of Medical Sciences by GTmetrix. E-LIS.
Nugraha, W., Syarif, M., & Dharmawan, W. S. (2018). Penerapan Metode Sdlc Waterfall Dalam Sistem Informasi Inventori Barang Berbasis Desktop. JUSIM (Jurnal Sistem Informasi Musirawas), 3(1), 22–28. https://doi.org/10.32767/jusim.v3i1.246
Ollila, R., Mäkitalo, N., & Mikkonen, T. (2022). Modern Web Frameworks: A Comparison of Rendering Performance. Journal of Web Engineering. https://doi.org/10.13052/jwe1540-9589.21311
Patra, T. K. (2022). Comparison of JavaScript Frameworks: React.js and Vue.js. 7(9), 7–11. http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks
Persson, M. (2020). JavaScript DOM Manipulation Performance?: Comparing Vanilla JavaScript and Leading JavaScript Front-end Frameworks. Independen, 40. http://bth.diva-portal.org/smash/get/diva2:1436661/FULLTEXT01.pdf%0Ahttp://urn.kb.se/resolve?urn=urn:nbn:se:bth-19531
Pradeep, S., & Sharma, Y. K. (2019). A Pragmatic Evaluation of Stress and Performance Testing Technologies for Web Based Applications. Proceedings - 2019 Amity International Conference on Artificial Intelligence, AICAI 2019, 399–403. https://doi.org/10.1109/AICAI.2019.8701327
Riady, J., Palit, H. N., Andjarwirawan, J., & Petra. (2019). Aplikasi E-Learning Berbasis Progressive Web App Pada Apologetika Indonesia. Jurnal Infra Petra, 1–5.
Riet, J. Van. (2020). Study on Mobile Web Performance. IEEE International, ii.
Ritonga, R. M., Munthe, I. R., & Purnama, I. (2022). Design an Information System Pendawa Bulucina (RAM) Web-Based Using The Waterfall Method. Jurnal Mantik, 6(36), 383–389. http://www.iocscience.org/ejournal/index.php/mantik/article/view/2211
Sherin, S., Iqbal, M. Z., Khan, M. U., & Jilani, A. A. (2021). Comparing coverage criteria for dynamic web application: An empirical evaluation. Computer Standards and Interfaces, 73(December 2019), 103467. https://doi.org/10.1016/j.csi.2020.103467
Sumedrea, S., Maican, C. I., Chi?u, I. B., Nichifor, E., Tec?u, A. S., Lix?ndroiu, R. C., & Br?tucu, G. (2022). Sustainable Digital Communication in Higher Education—A Checklist for Page Loading Speed Optimisation. Sustainability (Switzerland), 14(16). https://doi.org/10.3390/su141610135
Tjhoernandes, A., Susetyo, Y. A., Kristen, U., & Wacana, S. (2022). Penerapan MAC Address sebagai Autentikasi Aplikasi menggunakan JavascriptBindings Chromium Embedded Framework Python di PT. Jurnal Inovtek Polbeng, 7(1), 26–36.
Yason, S., Sudirman, & Yunus, A. (2022). Analisis Performa Website Sclean Menggunakan Pingdom Tools Dan Page Speed Insights. KHARISMA Tech, 17(1), 113–124. https://doi.org/10.55645/kharismatech.v17i1.213
Copyright and Licensing
This work is licensed under a Creative Commons Attribution-NonCommercial 4.0 International License.