25.04.20227 min

Wojciech Baranowski Copywriter

Blazor kontra Angular - porównanie frameworków

Poznaj wyniki decydującego starcia pomiędzy Blazorem i Angularem, czyli dwóch frameworków typu open-source do budowy nowoczesnych aplikacji internetowych.

Blazor kontra Angular - porównanie frameworków

Codziennie rośnie liczba różnych frameworków dostępnych dla programistów na całym świecie. Już sam ten fakt sprawia, że decyzja o wyborze jednego z nich jest o wiele trudniejsza.

Pytanie więc brzmi: kto wygra tę bitwę? Blazor czy Angular? I czy w ogóle możliwe jest uczciwe i bezstronne porównanie tych frameworków? Czytaj dalej i wspólnie poszukajmy odpowiedzi.


Angular

Czym jest?

Oparty na języku TypeScript (w przeciwieństwie do swojego przestarzałego poprzednika AngularJS, który był frameworkiem JavaScriptu), Angular to jeden z najpopularniejszych frameworków internetowych typu open-source dostępnych na rynku.

Za pomocą tego frameworku programiści mogą tworzyć interaktywne interfejsy użytkownika, aplikacje jednostronicowe, PWA, aplikacje internetowe dla przedsiębiorstw i wiele innych.

Jak jednak powstał Angular? Cóż, nie jest to w sumie jakaś skomplikowana historia. Na początku AngularJS wydawał się wystarczający dla wszystkich projektów. Z czasem jednak zaczął on wymagać coraz więcej poprawek, takich jak nowe standardy JavaScriptu, brak perspektyw na przyszłość i jeszcze więcej innych ograniczeń.

Było ich tak dużo, że w 2014 roku Google stwierdził, że nadszedł czas na zmiany. To właśnie wtedy framework AngularJS został przepisany i przekształcony w to, co obecnie znamy jako Angular (wsparcie dla AngularJS zakończyło się 31 grudnia 2021 roku).


Zalety

Chociaż Angular jest uwielbiany przez wszystkich za całokształt, to tak jak wszystko inne na tym świecie, ma swoje wady i zalety. Bez dalszego zastanawiania się zobaczmy, o co chodzi!


Stałe wsparcie

Ponieważ Angular jest frameworkiem Google’a, wszyscy możemy być pewni, że aktualizacje będą pojawiały się w odpowiednim czasie i będą kontynuowane w przyszłości. Przyszłość Angulara rysuje się w jasnych barwach, a wsparcie dla niego z pewnością nie zostanie wstrzymane w najbliższym czasie.

I nie chodzi tylko o Google. Angular ma oddaną społeczność programistów, którzy również go wspierają i aktywnie uczestniczą w rozwoju tego frameworku, czy to w postaci wtyczek, narzędzi, czy innych. Jeśli masz do wykonania zadanie, które wydaje ci się zbyt trudne, to członkowie społeczności z pewnością zrobią wszystko, aby Ci pomóc.


TypeScript

Czysty, zrozumiały i, co najważniejsze, przewidywalny kod można zawdzięczać językowi TypeScript. Dzięki jego zastosowaniu Angular może obsłużyć więcej niż AngularJS. Przykładowo większe bazy danych.


Renderowanie po stronie serwera

Twórcy aplikacji internetowych mogą odetchnąć z ulgą, ponieważ Angular jest przyjazny dla działań SEO — jednak pod pewnymi warunkami. Przykładem takiego działania może być tworzenie aplikacji po stronie serwera, a nie klienta, za pomocą Angular Universal. W ten sposób programiści mogą znacznie zwiększyć szanse na zaindeksowanie witryny przez Google i jej widoczność na stronach wyników wyszukiwania (SERP).


Szczegółowa dokumentacja

Dokumentacja Angulara jest nie tylko bardzo obszerna i szczegółowa, ale także łatwa do czytania. Każda aktualizacja jest dokładnie omówiona, co ułatwia poruszanie się w świecie tworzenia stron internetowych. Co więcej, w dokumentacji zamieszczono również przykłady kodu na wypadek, gdyby użytkownik nie zrozumiał treści objaśnień.


Możliwość ponownego wykorzystania

Tworzenie interaktywnych interfejsów użytkownika za pomocą Angulara jest łatwiejsze w porównaniu z innymi frameworkami. Cóż, z większością z nich. Jest to jednak jeszcze łatwiejsze, gdy można ponownie wykorzystać fragmenty kodu w różnych projektach — a to właśnie można zrobić za pomocą Angulara.


MVVM

Angular jest open-source’owym frameworkiem MVVM, a to oznacza, że logika programu i kontrolki interfejsu są rozdzielone. Za pomocą Model-View-ViewModel (znanego również jako model-view-binder) użytkownicy mogą zachować porządek w kodzie i segregować projekty.

Dzięki temu mogą oni znacznie szybciej i łatwiej aktualizować, zmieniać i poprawiać kod. W tym modelu View jest odpowiedzialny za przechowywanie elementów widocznych i odbieranie danych wejściowych. Z kolei ViewModel wiąże ze sobą View i Model. I wreszcie Model, który zawiera logikę programu.


Wady


Trudny do nauczenia

Angular nie jest łatwym frameworkiem do opanowania, nawet dla zaprawionych w bojach programistów. Stroma krzywa uczenia się lub szczegółowo opracowana dokumentacja, która wymaga dogłębnego zrozumienia — to wszystko wpływa na trudność Angulara.

Ponadto Angular jest frameworkiem typu opinionated, co zasadniczo oznacza, że ma swój własny sposób postępowania, nie pozostawiając programistom innego wyboru, niż podążanie za dokumentacją i zasadami. Jednak po jego opanowaniu Angular może stać się całkiem satysfakcjonującym przyjacielem.


SEO

Mimo że można znaleźć również zalety tego rozwiązania, Angular nie jest domyślnie przyjazny dla SEO. Wyszukiwarki mają trudności z indeksowaniem witryny, jeśli nie zostanie ona wykonana po stronie serwera. Jeśli taki warunek jest spełniony, to witryna nie powinna mieć problemów z indeksowaniem i widocznością w SERP-ach.


Waga ciężka

W porównaniu z frameworkami takimi jak React czy Vue rozmiar pakietu w projektach Angulara jest często większy niż w innych, zwłaszcza w przypadku mniejszych aplikacji. To niestety prowadzi do zmniejszenia prędkości.


Blazor

Czym jest?

Blazor, który jest skróconą formą od browser i razor, to stosunkowo nowy framework sieciowy firmy Microsoft, który został wydany w 2018 roku. Podobnie jak Angular, Blazor jest zarówno open source’owy i darmowy.

Framework umożliwia programistom tworzenie interaktywnych i wielokrotnego użytku UI użytkownika w obecnych technologiach internetowych, takich jak C# czy HTML. Jeśli chodzi o gramatykę i składnię, framework pozwala programistom korzystać z gramatyki Razor i C#.

Nawet jeśli Blazor zgromadził tylko 9k+ gwiazdek na GitHubie to i tak warto go wziąć pod uwagę. Aby go jeszcze lepiej zrozumieć, musimy dokładniej przyjrzeć się temu, czym on tak naprawdę jest.

Blazor oferuje dwie możliwości rozwoju — Server i WebAssembly. Pierwszy z nich jest częścią .NET Core 3 i służy do uruchamiania po stronie serwera na serwerze ASP.NET Core w formacie ASP.NET Razor (z połączeniem SignalR używanym do obsługi aktualizacji UI). Z kolei drugi z nich jest używany do pracy z nowoczesnymi przeglądarkami internetowymi i tworzenia interaktywnych SPA po stronie klienta.


Zapowiedziano też trzy kolejne, choć jeszcze nie zostały wydane.

  • Blazor PWA — przeznaczony do tworzenia progresywnych aplikacji internetowych.
  • Blazor Hybrid — przeznaczony do tworzenia aplikacji hybrydowych.
  • Blazor Native — przeznaczony do tworzenia natywnych aplikacji na platformy mobilne.


Zalety


Serwer współdzielony i kod po stronie serwera

Ciekawą cechą Blazora, która może się przydać wielu programistom, jest to, że framework umożliwia ponowne wykorzystanie kodu po stronie serwera i klienta. Oznacza to, że można przenieść kod z back-endu i umieścić go we front-endzie.


Visual Studio Code

Ponieważ Blazor jest frameworkiem Microsoftu, jest on obsługiwany przez niekwestionowanego króla narzędzi programistycznych — Visual Studio Code. Edytor VSC umożliwia programistom wyróżnianie, debugowanie i refaktoryzację kodu, a także wiele innych przydatnych funkcji.


Wstrzykiwanie zależności

Dzięki wstrzykiwaniu zależności aplikacje tworzone w Blazorze mogą korzystać z mechanizmu odwrócenia sterowania (IoC). Zasadniczo umożliwia to nadawanie obiektom zależności. Tylko co to jest zależność? Jest to obiekt użytkowy, który może działać jako usługa.

Wstrzykiwanie zależności można podzielić na klasy: wtryskiwacz, klient i klasa usługi. Zawiera także inne wstryskiwacze, takie jak konstruktor, metoda i właściwość.


JavaScript Interop

JavaScript Interop jest funkcjonalnością Blazor WebAssembly, która pozwala na manipulowanie DOM, jak również na wywoływanie API przeglądarki. Dzięki temu aplikacja stworzona za pomocą Blazora może korzystać z funkcji JavaScript metod .NET. 


Wady

Naprawdę trudno jest wypisać wszystkie wady Blazora, ponieważ istnieją dwa sposoby hostingu i oba są różne. Dlatego postanowiłem podzielić te wady na dwie części — wady serwera Blazor i Blazor WebAssembly.


Serwer Blazor


Wolniejsza prędkość ładowania

Ze względu na konieczność stałego połączenia aplikacji z serwerem, szybkość ładowania i opóźnienia mogą być mniejsze. Powodem niskiej prędkości ładowania jest fakt, że przeglądarka musi pobrać bibliotekę .NET oraz niektóre biblioteki .dll, co może i prawdopodobnie będzie powodować problemy opóźnieniowe.


Brak wsparcia w trybie offline

Aplikacja wymaga aktywnego połączenia z Internetem. Jeśli tak nie jest, aplikacja przestanie działać. Dlaczego tak się dzieje? Dzieje się tak dlatego, że każdy element projektu jest hostowany po stronie serwera, stąd też wymagane jest połączenie.


ASP.NET Core

Aby aplikacja mogła zostać uruchomiona, potrzebny jest serwer ASP.NET Core. Bez niego aplikacja nie zostanie uruchomiona i nie będzie mogła działać poprawnie, dlatego pamiętaj o wcześniejszym pobraniu!


Blazor WebAssembly


Problemy ze słabszym sprzętem

Sprzęt komputerowy powinien być przyzwoitej jakości i wielkości, ponieważ Blazor może napotkać problemy podczas pracy na komputerach niższej klasy.


Ograniczenie przez przeglądarkę i do przeglądarki

Blazor jest ograniczony do możliwości przeglądarki, więc jeśli tylko przeglądarka radzi sobie z obsługą Blazora, to wszystko powinno być w porządku. Jednak nie wszystkie przeglądarki obsługują WebAssembly, więc jeśli używasz sobie Internet Explorera, możesz napotkać niemiłą niespodziankę.


Waga ma znaczenie

Im cięższa jest aplikacja wykonana przy użyciu Blazor WebAssembly, tym dłużej trwa ładowanie.


Początkowy czas ładowania

Początkowy czas ładowania może być dłuższy niż w przypadku większości innych frameworków.


Starcie: Blazor vs Angular

Teraz, gdy omówiliśmy już zalety i wady Blazora i Angulara, skupmy się na bezpośrednim porównaniu.


Wyniki

Zarówno Angular od Google’a, jak i Blazor od Microsoftu to frameworki typu open-source stworzone do budowania nowoczesnych aplikacji internetowych. Istnieją jednak między nimi kluczowe różnice. Przyjrzyjmy się im bliżej.

Po zapoznaniu się z powyższą tabelą naprawdę trudno jest wybrać zwycięzcę. Oba frameworki mają swoje wady i zalety, ale czy znajdziemy tutaj coś, co wyróżnia się najbardziej i może wpłynąć na decyzję?

Zdecydowanie największe różnice to język programowania, wiek i popularność. Z Angulara korzystają duże firmy na całym świecie, a jeśli jesteś programistą Angulara, to znacznie ułatwia to poszukiwanie pracy. Co więcej, Angular jest doskonałym rozwiązaniem dla przedsiębiorstw i głównie do tego celu jest wykorzystywany.

W zależności od tego, co jest twoim celem, powinieneś wybrać odpowiedni dla siebie framework. Jeśli chcesz mieć pewność, czy wybrany przez Ciebie framework ma ogromną społeczność, która w razie potrzeby będzie w stanie Ci pomóc, to Angular będzie tutaj najlepszym wyborem.

Z drugiej strony, jeśli chcesz ponownie wykorzystać kod między stroną klienta i serwera, umożliwi Ci to Blazor. A może szukasz już gotowego produktu? W takim przypadku Angular będzie dla ciebie odpowiednim wyborem.

Jak pewnie zauważyłeś, wszystko zależy od potrzeb. Przemyśl dokładnie, co chcesz osiągnąć, przeanalizuj zalety i wady obu frameworków, i wybierz najbardziej odpowiedni dla Ciebie. Powodzenia i do zobaczenia następnym razem!


Oryginał tekstu w języku angielskim przeczytasz tutaj.

<p>Loading...</p>