Analiza wydajności narzędzi do tworzenia warstwy klienta aplikacji internetowych na przykładzie Angular, React i Vue

• Autorzy: Bogusz Damian , Ciszewski Paweł , Pańczyk Beata

Identyfikatory

DOI

10.35784/jcsi.6299

Warianty tytułu

EN

Performance analysis of web application client layer development tools us-ing Angular, React and Vue as examples

• Języki publikacji: PL

Abstrakty

PL

W artykule przedstawiono analizę porównawczą narzędzi do tworzenia warstwy klienta aplikacji internetowych. Wybrano do niej narzędzia Angular 17.1.0, React 18.2.0 i Vue 3.3.4. Proces badawczy przeprowadzono z wykorzystaniem aplikacji testowej “Benchmark”, zaimplementowanej z użyciem każdej z technologii. Przygotowana została ona jako tester wydajności, realizujący testy złożone z operacji manipulujących tabelą danych, celem pomiaru czasu ich wykonania. Wyniki przeprowadzonych testów stały się podstawą do analizy porównawczej. W efekcie badania, najwydajniej-szym narzędziem w największej liczbie testów został Angular. Nieznacznie mniejsza wydajność zaobserwowana została przy Vue, a najmniej wydajną aplikacją okazała się ta, przygotowana z użyciem React.

EN

The article presents a comparative analysis of tools for developing the client layer of web applications. The tools chosen for it were Angular 17.1.0, React 18.2.0 and Vue 3.3.4. The research process was carried out using the “Benchmark” test application, implemented with each technology. It was prepared as a performance tester, implementing tests consisting of operations that manipulate a table of data, in order to measure their execution time. The results of the performed tests became the basis for further analysis. As a result of the study, Angular became the most efficient tool in the largest number of tests. Slightly lower performance was observed with Vue, and the least efficient application turned out to be the one prepared with React.

Słowa kluczowe

PL

Angular; React; Vue; analiza porównawcza

EN

Angular; React; Vue; comparative analysis

• Wydawca: Wydawnictwo Politechniki Lubelskiej
• Czasopismo: Journal of Computer Sciences Institute
• Rocznik: 2024
• Tom: Vol. 32
• Strony: 223--230
• Opis fizyczny: Bibliogr. 12 poz., rys., tab.

Twórcy

autor

Bogusz Damian

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

autor

Ciszewski Paweł

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

autor

Pańczyk Beata

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

Bibliografia

• 1. Stack Overflow Insights - Stack Overflow Annual Developer Survey, https://insights.stackoverflow.com/survey, [04.03.2024].
• 2. R. Ollila, N. Mäkitalo, T. Mikkonen, Modern Web Frameworks: A Comparison of Rendering Performance, Journal of Web Engineering 21 (2022) 789-814, https://doi.org/10.13052/jwe1540-9589.21311.
• 3. J. Cincović, M. Punt, Comparison: Angular vs. React vs. Vue. Which framework is the best choice?, ICIST 2020 Proceedings (2020) 250-255.
• 4. K. Bielak, B. Borek, M. Plechawska-Wójcik, Web application performance analysis using Angular, React and Vue.js frameworks, Journal of Computer Sciences Institute 23 (2022) 77-83, https://doi.org/10.35784/jcsi.2827.
• 5. Y. Xing, J. Huang, Y. Lai, Research and Analysis of the Front-end Frameworks and Libraries in E-Business Development, Proceedings of the 2019 11th International Conference on Computer and Automation Engineering (ICCAE 2019), Association for Computing Machinery (2019) 68-72, https://doi.org/10.1145/3313991.3314021.
• 6. Github Website, https://github.com, [12.03.2024].
• 7. Angular Documentation, https://angular.io/docs, [12.03.2024].
• 8. React Documentation, Writing Markup with JSX, https://react.dev/learn/writing-markup-with-jsx, [12.03.2024].
• 9. React API Reference, https://react.dev/reference/react, [12.03.2024].
• 10. Vue.js Guide, The Progressive Framework, https://vuejs.org/guide/introduction.html#the-progressive-framework, [12.03.2024].
• 11. Chrome DevTools Documentation, Chrome DevTools, https://developer.chrome.com/docs/devtools?hl=pl, [12.03.2024].
• 12. Firefox DevTools Documentation, Firefox DevTools Contributor Docs, https://firefox-source-docs.mozilla.org/devtools/, [12.03.2024].

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).