-
Firma
-
e-Commerce
-
e-Commerce
- E-Commerce B2C
- Platformy B2B
- Narzędzia PIM
- Marketplace
-
Narzędzia wspierające e-Commerce
- Integracja z ERP
- Narzędzia PIM
- Marketplace
- System OMS
- Systemy CRM
- Silniki wyszukiwania produktów
- Platformy DAM
- Platforma WMS
- Usługi kurierskie
- Systemy płatności
- Zarządzanie cenami
- Silniki rekomendacji produktów
- Programy lojalnościowe
- Kampanie marketingowe
- Marketing Automation
- Social media
- Narzędzia Live Chat
- Web Push
- Systemy PLM
- Rozwiązania Enterprise
- Technologie
- Cross-border Solutions
- Top Developer e-Commerce
- Kompleksowa obsługa sklepów
- Wiedza eCommerce - publikacje
- Raport: Narzędzia i wtyczki eCommerce 2022
- Dlaczego my
-
e-Commerce
-
Konsulting
-
Konsulting
- Analiza danych i Business Intelligence
- Analiza przedwdrożeniowa
- Analiza rynku i konkurencji
- Aplikacje MVP / POC
- Badania użyteczności i testy A/B
- Makiety UX/UI
- Marketing Automation
- Optymalizacja wydajności
- Redesign
- Rozwiązania chmurowe
- Scoping Session
- Strategia rozwoju technologicznego
- Wsparcie techniczne SLA
-
Konsulting
-
Technologie Internetowe
-
Technologie Internetowe
- Dlaczego my
-
Technologie Internetowe
-
Rozwiązania IT
-
Rozwiązania IT
- Platforma Low-code
- Intranet i komunikacja wewnętrzna
- Wsparcie pracy zdalnej
- System workflow EOD
- Portal pracowniczy
- Obsługa reklamacji
- Obieg Faktur
- Elektroniczne paski płacowe
- System Helpdesk
- Zamówienia i zapotrzebowania
- e-PITy
- Outsourcing IT
- eBOK - obsługa Klienta online
- Urlopy i delegacje
- Systemy i aplikacje dedykowane
- Software House
- Stosowane technologie
- Top Custom Software Developer
- Poradnik - INTRANET: Skuteczna komunikacja wewnętrzna w organizacji rozproszonej
- Dlaczego my
-
Rozwiązania IT
- Realizacje
- Kariera
- Kontakt
Ostatnie kilka lat w obszarze technologii frontendowych naznaczone były popularnością Vue, Reacta czy Angulara. W przestrzeni frameworkowej pojawił się jednak nowy gracz, który budzi coraz większe zainteresowanie – Svelte.
Choć wielu z nas zdaje sobie sprawę, że nowości w środowisku frontendu pojawiają się i niejednokrotnie szybko znikają, to jednak co jakiś czas rodzi się rozwiązanie, które zostaje na dłużej – być może Svelte będzie takim właśnie narzędziem, stąd też poświęćmy mu chwilę uwagi.
„Nowy framework frontendowy”. Słysząc to twierdzenie w głowie wielu programistów pojawia się pytanie: Co nowego można zaproponować, aby ułatwić tworzenie oprogramowania? Świat IT jest dynamicznym środowiskiem i nowości pojawiają się niemal na każdym kroku. Mimo to, w kółko słyszymy o komponentach i reaktywności, aktualnie przełomem wchodzą również rozwiązania oparte na hook’ach.
Jednak wszystkie dostępne na rynku frameworki wyróżnia jedna, wspólna cecha - są one dodane do kodu źródłowego napisanego oprogramowania. W tym przypadku wyjątek od reguły stanowi właśnie wspomniana nowość – Svelte.
Czym jest i co wyróżnia Svelte?
Framework istnieje na rynku już od 2016 roku, i od tamtej pory jego popularność stale wzrasta. Opublikowana jednak w ubiegłym roku jego 3 wersja znacznie bardziej podniosła wskaźniki zainteresowania. Zastanówmy się dlaczego.
Trend popularności wśród użytkowników github. Źródło: https://www.npmtrends.com/svelte
Analizując powyższy wykres widzimy znaczącą zmianę trendu zainteresowania programistów niemal dokładnie w momencie publikacji nowej wersji. Zauważyć można również, że nawet przed pojawieniem się 3 wersji, już na przestrzeni nieco ponad 3 lat zbudował on całkiem niezłą społeczność użytkowników. Oczywiście jest ona dużo mniejsza niż chociażby React’a czy też VueJS’a – należy jednak pamiętać, że frameworki te występują na rynku już od 2013 roku, a zatem 3 lata dłużej niż wspomniany Svelte.
Bazując na danych dostępnych z npmtrends.com można zestawić ilość pobrań danego frameworka, dla każdego równo 3 lata od swojej premiery, co przedstawia poniższa tabela.
Vue | Svelte | React |
8 518 | 69 476 | 244 995 |
Jednoznacznie widać, że Svelte będąc na tym samym etapie rozwoju jak niegdyś Vue i React wypada całkiem nieźle. Oczywiście różnica między React’em jest znacząca. Trzeba jednak pamiętać, że za tą technologią stroi ogromna korporacja jaką jest Facebook. Dodatkowo, coroczna ankieta prowadzona przez State of JS i kierowana do programistów z całego świata dostarcza nam również dużo interesujących danych.
Zestawienie opinii na temat badanych technologii. Źródło: https://2019.stateofjs.com/front-end-frameworks/
W badaniu tym wzięło udział 21 717 respondentów z całego świata. Biorąc na celownik zestawienie opinii na temat badanych technologii zauważamy, że Svelte ma najniższy odsetek osób, które użyły go co najmniej raz i nie chcą go używać w przyszłości. Ma także największe zainteresowanie osób, które chciałyby się go nauczyć. Co istotne - najwięcej osób na moment badania jeszcze w ogóle o nim nie słyszało. Taki rozkład danych może bezpośrednio przełożyć się na popularność Svelte w przyszłości.
Ciekawym jest również fakt, że niemal identyczny trend 3 lata temu posiadał VueJS, który obecnie jest drugim najchętniej wybieranym frameworkiem JS’owym. A jak możemy zauważyć, również w wyniku badania State of JS, na wykresie podsumowującym zainteresowanie konkretnymi frameworkami już w 2019 roku Svelte wysunął się na prowadzenie.
Ranking zainteresowania technologiami frontendu. Źródło: https://2019.stateofjs.com/front-end-frameworks/
Jak widać, Svelte staje się na tyle popularnym frameworkiem, że zostaje objęty w rankingach najbardziej popularnych frameworków JavaScript’owych. Co zatem jest w nim takiego szczególnego, czego jego konkurenci nie mają? Czy faktycznie stanie się jednym z prekursorów w swojej dziedzinie?
Na powyżej postawione pytanie w rzeczywistości trudno dać jednoznaczną odpowiedź. Swoją opinię można oprzeć jedynie na danych statystycznych. Pomocne może okazać się również pewne wyczucie rynku środowiska frontendowego.
Svelte – inny niż wszyscy
Można powiedzieć, że Svelte jest alternatywą do wiodących framworków frontendowych. Podobnie jak React czy Vue może być on używany to tworzenia całych aplikacji, jak również jedynie niestandardowych elementów będących częścią już istniejących rozwiązań. W Svelte postawiono jednak na jeden ważny aspekt, a mianowicie prostotę pisanego kodu.
Wersja 3 przyniosła dużo zmian związanych z upraszczaniem mechanizmów frameworka, dzięki czemu kod aplikacji implementuje się szybciej i przede wszystkim jest go mniej, co ze strony programisty wiąże się z łatwiejszym zarządzaniem kodem oraz mniejszą ilością bugów.
Na tle pozostałych frameworków wyróżnia się również tym, że nie jest on dołączany do finalnego kodu źródłowego. Jego twórca, Rich Harris, który pracował między innymi przy tworzeniu narzędzia Babel, najwidoczniej przeniósł swoje doświadczenie związane z kompilowaniem kodu JavaScript’owego.
Svelte podczas procesu budowania produkcyjnego zachowuje się jak kompilator. Transkoduje zapisy specyficzne dla niego na czysty JavaScript. Wykorzystując natywne rozwiązania JS’a zmienia nieco kod źródłowy tak, aby mógł on działać samodzielnie bez zbędnych zewnętrznych narzędzi. Wynikiem kompilacji jest więc natywny JavaScript bez dodatkowego obciążenia jakim jest kod frameworka. Co daje taki zabieg? Odpowiedź sama nasuwa się na myśl - szybkość działania.
Svelte – szybszy niż wszyscy
Wszelkie narzędzia testujące szybkość strony wskazują jednoznacznie - strony napisane w Svelte są dużo szybsze. A jeśli nasz skrypt jest szybki możemy liczyć na wysoki ranking w PageSpeed Insights od Google. Z punktu widzenia SEO jest to znaczący punkt na korzyść Svelte.
Dodatkowym atutem jest to, że twórca przewidział wymagania związane z SEO i dostarcza narzędzie (Sapper), dzięki któremu możliwe jest uruchomienie projektu w trybie Server Side Rendering, a przez to zapewnienie jeszcze lepszej widoczności i indeksacji przez wyszukiwarki.
Sprawdzam!
Postanowiłem zatem zbadać rzeczywistą wydajność rozwiązań opartych o dany framework Svelte, React, Vue. Na potrzeby artykułu stworzyłem trzy niemalże identyczne projekty, różniące się jedynie semantyką specyficzną dla danego frameworka. Następnie każdy z nich uruchomiłem w identycznych warunkach, to znaczy na tym samym serwerze, z taką samą konfiguracją bez obciążenia zewnętrznego. Dzięki temu możliwa była obserwacja różnic w prędkości odpowiedzi, wydajności, a także wielkości plików. Zadaniem każdej aplikacji było wyrenderowanie określonej ilości liczb z ciągu Fibonacci’ego.
Jako pierwszą badaniu poddałem prędkość renderowania pierwszych pięćdziesięciu liczb ciągu. Wyniki wyglądają się następująco:
Svelte | Rendering time required: 10.2ms JS Heap: [1.4MB - 1.4MB] |
React 16.13.1 | Rendering time required: 12.0ms JS Heap: [1.8MB - 1.9MB] |
Vue 3 | Rendering time required: 16.1ms JS Heap: [1.7MB - 1.7MB] |
Devtools Chrome z pomiaru wydajności testu nr. 1 dla Svelte
Devtools Chrome z pomiaru wydajności testu nr. 1 dla React
Devtools Chrome z pomiaru wydajności testu nr. 1 dla Vue 3
Patrząc na powyższe wyniki, jednoznacznie widać, że Svelte wyprzedza konkurencję. Jest to „tylko” 1,8 ms porównując z aplikacją React i aż o 5,1 ms w porównaniu z aplikacją Vue.
Kolejny test opierał się o narzędzie Lighthouse i mierzył wydajność stron. Poniżej przedstawione wyniki jasno określają zwycięzcę testów, czyli Svelte.
Devtools Chrome Lighthouse z pomiaru wydajności testu nr. 2 dla Svelte
Devtools Chrome Lighthouse z pomiaru wydajności testu nr. 2 dla React
Devtools Chrome Lighthouse z pomiaru wydajności testu nr. 2 dla Vue
Na zakończenie porównałem wielkość plików poszczególnych aplikacji. Na załączonych poniżej grafikach zauważyć można, że zarówno React, jak i Vue, poza wyeksportowanym kodem źródłowym dla projektu dołącza kod źródłowy frameworku. Svelte jest tego pozbawiony, dzięki czemu waży zaledwie 5kb – aplikacja React osiągnęła ponad 130kb, a Vue ponad 80kb.
Devtools Chrome Network wielkość pobranego pliku produkcyjnego dla projektu Svelte
Devtools Chrome Network wielkość pobranego pliku produkcyjnego dla projektu React
Devtools Chrome Network wielkość pobranego pliku produkcyjnego dla projektu Vue
Podsumowując
Svelte jest narzędziem, które pozwala inaczej podejść do programowania. Jest defacto pierwszym frameworkiem – kompilatorem. Pisząc w nim otrzymujemy czysty kod wynikowy, który zawiera dokładnie to, co napisał programista i właśnie na tej płaszczyźnie jest on prekursorem.
Jednak to czy zostanie z nami na dłużej w dużej mierze zależeć będzie od stabilizacji frameworka. Radykalne zmiany w tym aspekcie mogą spowodować duże zachwianie w popularności. Niepewna przyszłość rozwoju danych rozwiązań zniechęca bowiem do ich wyboru.
Twórcy Svelte zapewniają pełną stabilność jego rozwoju. Z pewnością, rozbudowywany będzie właśnie proces kompilacji. Domyślać się można, że z kolejnymi wersjami Svelte zostanie wyposażony w automatyczne testy jednostkowe. Nie będzie zatem potrzeby pisania własnych testów, skoro kod programisty zostanie poddany testom w czasie kompilacji.
Svelte wyznacza nowy kierunek dla przyszłych rozwiązań. Prostota czy szybkość działania są jego mocną stroną. Na pewno warto przyjrzeć się chociaż przez chwilę temu frameworkowi i poświęcić mu trochę uwagi, gdyż na przestrzeni 2-3 lat Svelte może być jednym z głównych graczy na rynku JavaScript’owym.
Autor
Damian Glazer, Fronted Developer, Ideo Agency.
Publikacja: DEV.to, 10.11.2020 r.
Może zainteresują Cię także
Bądź tam, gdzie jest Twój Klient. Wdrożenie PWA w sklepie BRW.pl
Analiza przedwdrożeniowa, a powodzenie projektu
Klienci o nas
Wybrane serwisy produktowe
Kontakt
Używamy plików cookie
Używamy plików cookie i innych technologii śledzenia, aby poprawić jakość przeglądania naszej witryny, wyświetlać spersonalizowane treści i reklamy, analizować ruch w naszej witrynie i wiedzieć, skąd pochodzą nasi użytkownicy.
Możesz zmienić swoje ustawienia i odrzucić niektóre rodzaje plików cookie, które mają być przechowywane na twoim komputerze podczas przeglądania naszej strony. Możesz również usunąć wszystkie pliki cookie już zapisane na komputerze, ale pamiętaj, że usunięcie plików cookie może uniemożliwić korzystanie z części naszej strony internetowej.
Używamy plików cookie
Używamy plików cookie i innych technologii śledzenia, aby poprawić jakość przeglądania naszej witryny, wyświetlać spersonalizowane treści i reklamy, analizować ruch w naszej witrynie i wiedzieć, skąd pochodzą nasi użytkownicy.
Możesz zmienić swoje ustawienia i odrzucić niektóre rodzaje plików cookie, które mają być przechowywane na twoim komputerze podczas przeglądania naszej strony. Możesz również usunąć wszystkie pliki cookie już zapisane na komputerze, ale pamiętaj, że usunięcie plików cookie może uniemożliwić korzystanie z części naszej strony internetowej.
Niezbędne
Te pliki cookie są niezbędne do świadczenia usług dostępnych za pośrednictwem naszej strony internetowej i umożliwienia korzystania z niektórych funkcji naszej strony internetowej.
Bez tych plików cookie nie możemy zapewnić usług na naszej stronie internetowej.
Funkcjonalne
Te pliki cookie służą do bardziej spersonalizowanego korzystania z naszej strony internetowej i do zapamiętywania wyborów dokonywanych podczas korzystania z naszej strony internetowej. Umożliwiają przechowywanie danych związanych z zabezpieczeniami, takimi jak funkcja uwierzytelniania, zapobieganie oszustwom i innymi mechanizmami ochrony użytkowników.
Na przykład możemy używać funkcjonalnych plików cookie do zapamiętywania preferencji językowych lub zapamiętywania danych logowania.
Śledzenie i wydajność
Te pliki cookie służą do zbierania informacji w celu analizy ruchu na naszej stronie internetowej i sposobu, w jaki użytkownicy korzystają z naszej strony internetowej.
Na przykład te pliki cookie mogą śledzić takie rzeczy, jak czas spędzony na stronie lub odwiedzane strony, co pomaga nam zrozumieć, w jaki sposób możemy ulepszyć naszą witrynę internetową.
Informacje zebrane przez te pliki nie identyfikują żadnego konkretnego użytkownika.
Targeting i reklama
Te pliki cookie służą do wyświetlania reklam, które mogą Cię zainteresować na podstawie Twoich zwyczajów przeglądania.
Pliki te tworzone przez naszych dostawców treści i/lub reklam, mogą łączyć informacje zebrane z naszej strony z innymi informacjami, które gromadzili niezależnie w związku z działaniami przeglądarki internetowej w ich sieci witryn.
Jeśli zdecydujesz się usunąć lub wyłączyć te pliki cookie, reklamy nadal będą wyświetlane, ale mogą one nie być odpowiednie dla Ciebie.
Twoja prywatność jest dla nas ważna
Pliki cookie to bardzo małe pliki tekstowe, które są tworzone i przechowywane na komputerze użytkownika podczas odwiedzania strony internetowej. Używamy plików cookie do różnych celów, w tym do ulepszania obsługi online na naszej stronie internetowej (na przykład, aby zapamiętać dane logowania do konta).
W przypadku jakichkolwiek pytań dotyczących naszej polityki dotyczącej plików cookie i Twoich wyborów, skontaktuj się z nami.
Aby dowiedzieć się więcej, odwiedź naszą Politykę prywatności