Analiza wydajnościowa aplikacji Svelte i Angular

• Autorzy: Białecki Gabriel , Pańczyk Beata

Identyfikatory

DOI

10.35784/jcsi.2633

Warianty tytułu

EN

Performance analysis of Svelte and Angular applications

• Języki publikacji: PL

Abstrakty

PL

Celem artykułu jest sprawdzenie, czy nowsze rozwiązanie tworzenia części klienckiej aplikacji internetowej oparte na Svelte jest bardziej efektywne w porównaniu do standardowego podejścia stosowanego w Angular. W artykule przed-stawiono porównanie czasów renderowania się komponentów strony na przykładzie dwóch aplikacji testowych przygotowanych w obu szkieletach programistycznych. Do przeprowadzenia testów wydajnościowych przygotowano scenariusze, w których zbadano czasy dodawania i usuwania różnej liczby komponentów strony. Testy aplikacji były wykonane przy pomocy pakietu Selenium Webdriver. Wyniki badań wskazały jednoznacznie na fakt, że nowe podejście do manipulacji DOM (Svelte v. 3.0), jest bardziej wydajne niż korzystanie ze standardowego rozwiązania stosowanego w aplikacjach Angular (v.10.2).

EN

The aim of this article is to check if the Svelte-based client part of a web application is more effective than the standard Angular approach. The article presents a comparison of page components rendering times on the basis of two test applications prepared in both frameworks. For the performance tests, scenarios were prepared in which the times of adding and removing a different number of page components were examined. Application tests were performed using the Selenium Webdriver package. The research results clearly showed that the new approach used for DOM manipulation (Svelte v.3.0) is more efficient than the standard solution used in Angular applications (v.10.2).

Słowa kluczowe

PL

Svelte; Angular; wydajność; front-end

EN

Svelte; Angular; performance; front-end

• Wydawca: Wydawnictwo Politechniki Lubelskiej
• Czasopismo: Journal of Computer Sciences Institute
• Rocznik: 2021
• Tom: Vol. 19
• Strony: 139--143
• Opis fizyczny: Bibliogr. 10 poz., rys., tab.

Twórcy

autor

Białecki Gabriel

• Department of Computer Science, Lublin University of Technology, Nadbystrzycka 36B, 20-618 Lublin, Poland

autor

Pańczyk Beata

• Department of Computer Science, Lublin University of Technology, Nadbystrzycka 36B, 20-618 Lublin, Poland

Bibliografia

• [1] N. Joshi, obraz real i virtual DOM, https://medium.com/@nami996joshi/real-dom-448076454705, [13.04.2021].
• [2] Dokumentacja Angular, https://angular.io/docs, [13.04.2021].
• [3] O. Therox, Svelte i TypeScript, https://svelte.dev/blog/svelte-and-typescript, [10.03.2021].
• [4] Dokumentacja Svelte, https://svelte.dev/docs, [13.04.2021].
• [5] S. Kołodziejczak, Svelte – wszystko, co powinieneś wiedzieć o nowej wersji tego narzędzia, https://geek.justjoin.it/svelte-frontend, [13.04.2021].
• [6] A. Haseeb, Real and Virtual DOM, https://medium.com/@ahaseeb12251998/virtual-dom-vs-real-dom-angular-vs-react-framework-vs-libraries-spas-vs-mpa-s-946fceb70955, [13.04.2021].
• [7] T. Tolliday, Getting Acquainted With Svelte, the New Framework on the Block, 2020, https://css-tricks.com/getting-acquainted-with-svelte-the-new-framework-on-the-block/, [13.04.2021].
• [8] D. Glazer, Svelte – „nowy” framework frontendowy!, https://www.ideo.pl/firma/o-nas/nasze-publikacje/svelte-3-nowosci,150.html, [13.04.2021]
• [9] J. Schae, A RealWorld Comparison of Front-End Frameworks with Benchmarks, 2020, https://medium.com/dailyjs/a-realworld-comparison-of-front-end-frameworks-2020-4e50655fe4c1/, [13.04.2021].
• [10] Narzędzie Chrome Dev Tools na GitHub https://github.com/ChromeDevTools/devtools-frontend/blob/80c102878fd97a7a696572054007d40560dcdd21/front_end/sdk/NetworkManager.js#L252-L274, [04.03.2021].

Uwagi

Opracowanie rekordu ze środków MNiSW, umowa Nr 461252 w ramach programu "Społeczna odpowiedzialność nauki" - moduł: Popularyzacja nauki i promocja sportu (2021).