Performance optimization of web applications using Qwik

• Autorzy: Lipiński Adam , Pańczyk Beata

Identyfikatory

DOI

10.35784/jcsi.3672

Warianty tytułu

PL

Optymalizacja wydajności aplikacji internetowych z wykorzystaniem Qwik

• Języki publikacji: EN

Abstrakty

EN

This article analyzes the performance of three frameworks - React.js, Next.js and Qwik - that offer different methods of rendering application views. The purpose of the study was to show whether the new Qwik framework allows for better application load times compared to the other frameworks. The study was conducted using 3 applications representing the same research content, referring to cases occurring in production environments. In order to assess the performance, the Google Lighthouse tool was used, thanks to which it was proved that it is impossible to unequivocally say that Qwik allows for better optimization of the application compared to other frameworks.

PL

W niniejszym artykule przeprowadzono analizę wydajnościową trzech szkieletów programistycznych - React.js, Next.js oraz Qwik - oferujących różne metody renderowania widoków aplikacji.Celem badania było wykazanie, czy nowy szkielet Qwik pozwala na uzyskanie lepszych wyników czasów ładowania aplikacji, w porównaniu z pozostałymi szkieletami. Badanie przeprowadzono z wykorzystaniem 3 aplikacji reprezentujących tę samą treść badawczą, nawiązującą do przypadków występujących w środowiskach produkcyjnych. W celu oceny wydajności wykorzystano narzędzie Google Lighthouse, dzięki czemu dowiedziono, że nie da się jednoznacznie stwierdzić, aby Qwik pozwalał na lepszą optymalizację aplikacji w porównaniu z pozostałymi szkieletami.

Słowa kluczowe

EN

optimization; React; Next; Qwik

PL

optymalizacja; React; Next; Qwik

• Wydawca: Wydawnictwo Politechniki Lubelskiej
• Czasopismo: Journal of Computer Sciences Institute
• Rocznik: 2023
• Tom: Vol. 28
• Strony: 197--203
• Opis fizyczny: Bibliogr. 22 poz., fig., tab.

Twórcy

autor

Lipiński Adam

• Department of Computer Science, Lublin University of Technology (Poland)

autor

Pańczyk Beata

• Department of Computer Science - Lublin University of Technology (Poland)

• https://orcid.org/0000-0001-8908-8501

Bibliografia

• 1. Presentation by M. Hevery on “Qwik + Partytown: How to remove 99% of JavaScript from main thread” at WeAreDevelopers World Congress 2022, https://www.youtube.com/watch?v=0dC11DMR3fU, [13.06.2023].
• 2. C. M. Novac, O. C. Novac, R. M. Sferle, M. I. Gordan, G. Bujdosó, C. M. Dindelegan, Comparative study of some applications made in the Vue.js and React.js frameworks, 16th International Conference on Engineering of Modern Electric Systems (EMES), (2021) 1-4, https://doi.org/10.1109/EMES52337.2021.9484149.DOI: https://doi.org/10.1109/EMES52337.2021.9484149
• 3. Z. Dinku, React.js vs. Next.js, Metropolia University of Applied Sciences, (2022), https://www.theseus.fi/bitstream/handle/10024/750122/Dinku_Zerihun.pdf.
• 4. A. Świątkowski, K. Ścibior, Comparative analysis of React, Next and Gatsby programming frameworks for creating SPA applications, Journal of Computer Sciences Institute, 24 (2022) 224-227, https://doi.org/10.35784/jcsi.2972.DOI: https://doi.org/10.35784/jcsi.2972
• 5. T. Fadhilah Iskandar, M. Lubis, T. Fabrianti Kusumasari, A. Ridho Lubis, Comparison between client-side and server-side rendering in the web development, IOP Conference Series: Materials Science and Engineering, 801 (2020) 1-6, https://doi.org/10.1088/1757-899X/801/1/012136.DOI: https://doi.org/10.1088/1757-899X/801/1/012136
• 6. M. Hakim, Speed index and critical path rendering performance for isomorphic single page applications, Proceedings of the 16th Winona Computer Science Undergraduate Research Seminar, (2016) 41-46, https://cs.winona.edu/cs-website/current_students/Projects/CSConference/2016conference.pdf.
• 7. N. K. SG, P. K. Madugundu, J. Bose, S. C. S. Mogali, A Hybrid Web Rendering Framework on Cloud, 2016 IEEE International Conference on Web Services (ICWS), IEEE, (2016) 602-608, https://doi.org/10.1109/ICWS.2016.83.DOI: https://doi.org/10.1109/ICWS.2016.83
• 8. F. Pavić, L. Brkić, Methods of Improving and Optimizing React Web-applications, 44th International Convention on Information, Communication and Electronic Technology (MIPRO), (2021) 1753-1758, https://doi.org/10.23919/MIPRO52101.2021.9596762.DOI: https://doi.org/10.23919/MIPRO52101.2021.9596762
• 9. J. Väyrynen, Ensuring Availability of a Server-Side Rendered React Application: A Case Study, Aalto University, (2019), http://urn.fi/URN:NBN:fi:aalto-201905122998.
• 10. M. Aladwani, An empirical test of the link between website quality and forward enterprise integration with web consumers, Business Process Management Journal, Emerald Publishing, 12 (2) (2006) 178-190, https://doi.org/10.1108/14637150610657521.DOI: https://doi.org/10.1108/14637150610657521
• 11. M. Aladwani, P. C. Palvia, Developing and validating an instrument for measuring user-perceived web quality, Information & Management, Elsevier, 39 (6) (2002) 467-476, https://doi.org/10.1016/S0378-7206(01)00113-6.DOI: https://doi.org/10.1016/S0378-7206(01)00113-6
• 12. F. Almeida, J. Monteiro, The role of responsive design in web development, Webology, Webology Center, 14 (2) (2017) 48-651, http://www.webology.org/2017/v14n2/a157.pdf.
• 13. G. Richards, A. Gal, B. Eich, J. Vitek, Automated construction of JavaScript benchmarks, ACM SIGPLAN, 46 (10) (2011) 677-693, https://doi.org/10.1145/2076021.2048119.DOI: https://doi.org/10.1145/2076021.2048119
• 14. H. Findel, J. Navon, A Test Environment for Web Single Page Applications (SPA), In Proceedings of the 11th International Conference on Web Information Systems and Technologies - WEBIST, (2015) 47-54, https://doi.org/10.5220/0005428000470054.DOI: https://doi.org/10.5220/0005428000470054
• 15. H. Golestani, S. Mahlke, S. Narayanasamy, Characterization of Unnecessary Computations in Web Applications, IEEE International Symposium on Performance Analysis of Systems and Software, (2019) 11-21, https://doi.org/10.1109/ISPASS.2019.00010.DOI: https://doi.org/10.1109/ISPASS.2019.00010
• 16. K. Kiyokawa, Q. Jin, A Front-End Framework Selection Assistance System with Customizable Quantification Indicators Based on Analysis of Repository and Community Data, Big-Data-Analytics in Astronomy, Science, and Engineering, Lecture Notes in Computer Science, Springer, 13167 (2022) 41-55, https://doi.org/10.1007/978-3-030-96600-3_4.DOI: https://doi.org/10.1007/978-3-030-96600-3_4
• 17. M. Kaluža, K. Troskot, B. Vukelić, Comparison of Front-End frameworks for web applications development, Journal of the Polytechnic of Rijeka, 6 (1) (2018) 261-282, https://doi.org/10.31784/zvr.6.1.19.DOI: https://doi.org/10.31784/zvr.6.1.19
• 18. L. Borzemski, M. Kędras, Measured vs. Perceived Web Performance, Information Systems Architecture and Technology: Proceedings of 40th Anniversary International Conference on Information Systems Architecture and Technology – ISAT 2019, ISAT 2019, Advances in Intelligent Systems and Computing, Springer, 1050 (2019) 285-301, https://doi.org/10.1007/978-3-030-30440-9_27.DOI: https://doi.org/10.1007/978-3-030-30440-9_27
• 19. J. Miller, A. Osmani, Rendering on the Web, Google Developers, web.dev, (2019), https://web.dev/rendering-on-the-web/, [20.03.2023].
• 20. R. Carniato, Resumable JavaScript with Qwik, DEV Community, (2022), https://dev.to/this-is-learning/resumable-javascript-with-qwik-2i29, [20.03.2023].
• 21. How the Performance score is weighted - Lighthouse 10, https://developer.chrome.com/docs/lighthouse/performance/performance-scoring/#lighthouse-10, [25.04.2023].
• 22. Next.js Documentation - Image Component and Image Optimization, https://nextjs.org/docs/basic-features/image-optimization, [25.04.2023].

Uwagi

Opracowanie rekordu ze środków MNiSW, umowa nr POPUL/SP/0154/2024/02 w ramach programu "Społeczna odpowiedzialność nauki II" - moduł: Popularyzacja nauki (2025).