Budowanie aplikacji internetowych: Blazor vs. Angular

Czy nadszedł już czas, aby odsunąć Angulara do przeszłości i jednomyślnie przejść na Blazora? A może Blazor, jako następca Razor, boryka się z tymi samymi problemami, co jego poprzednik? W świetle niedawnej okazji, która pojawiła się w naszej firmie, aby rozpocząć projekt od zera, wykorzystując Blazora, ten artykuł ma na celu zbadanie wniosków zdobytych podczas tego procesu.

Ponadto, podejmiemy próbę uchwycenia obecnego stanu tego frameworka i porównamy jego zalety i wady do już wspomnianego Angulara. Czy nadszedł już czas, aby rozważyć zmianę głównego frameworka front-endowego w naszej firmie? A może nawet w Twojej?

BLAZOR: DLACZEGO WARTO SIĘ Z NIM ZAPOZNAĆ?

Blazor to innowacyjny i potężny framework webowy, który wzbudza duże zainteresowanie w świecie tworzenia stron internetowych. Ale czym dokładnie jest i dlaczego powinieneś się nim zainteresować?

Blazor to framework stworzony przez Microsoft, który umożliwia tworzenie interaktywnych i dynamicznych aplikacji internetowych za pomocą języka C# i platformy .NET, zamiast tradycyjnych technologii webowych, takich jak JavaScript. To, co wyróżnia Blazora, to jego zdolność do uruchamiania kodu C# bezpośrednio w przeglądarce za pomocą WebAssembly lub na serwerze, co daje ci elastyczność wyboru modelu hostowania najlepiej odpowiadającego twojemu projektowi.

‍

Dlaczego więc warto rozważyć prace w Blazorze?

• Znajomość: Jeśli już jesteś programistą .NET, Blazor pozwala wykorzystać swoje istniejące umiejętności i wiedzę. Możesz używać języka C# zarówno do kodu po stronie serwera, jak i klienta, co ogranicza potrzebę nauki wielu języków programowania
• Produktywność: Architektura oparta na komponentach Blazora upraszcza rozwijanie aplikacji, dzieląc ją na komponenty, które można wielokrotnie wykorzystywać. Ta modularność zwiększa produktywność i łatwość utrzymania.
• Pełen stos technologiczny w C#: Dzięki Blazorowi możesz być programistą pełnego stosu technologicznego, używając języka C# zarówno do front-endu, jak i back-endu. To zmniejsza konieczność zmiany kontekstu i usprawnia pracę.
• Społeczność i wsparcie: Blazor zdobył dynamicznie rosnącą społeczność i cieszy się silnym wsparciem ze strony Microsoftu. Możesz znaleźć wiele zasobów, bibliotek i narzędzi, które pomogą ci w Twojej drodze rozwoju.
• Wydajność: Opcja WebAssembly w Blazorze zapewnia imponującą wydajność po stronie klienta. Twoje aplikacje internetowe mogą być tak szybkie i responsywne, jak te tworzone w JavaScript.
• Wszechstronność: Blazor jest wszechstronny i nadaje się do tworzenia różnorodnych aplikacji, począwszy od pojedynczych stron internetowych (SPA), poprzez progresywne aplikacje internetowe (PWA), aż po aplikacje na poziomie przedsiębiorstwa.‍
• Wieloplatformowość: Blazor jest wieloplatformowy, co oznacza, że możesz tworzyć aplikacje internetowe, które działają bez problemu na różnych urządzeniach i przeglądarkach.

W istocie, Blazor to przełom w tworzeniu aplikacji internetowych, oferujący nowe spojrzenie na sposób ich budowania. Bez względu na to, czy jesteś doświadczonym programistą .NET, czy chcesz poszerzyć swoje umiejętności, eksplorowanie Blazora to wartościowe przedsięwzięcie, które może otworzyć fascynujące możliwości w Twojej podróży rozwoju webowego.

PIERWSZE SPOTKANIE Z BLAZOREM

Zanim zanurkujemy w świat Blazora, pozwól mi przedstawić moje doświadczenie i tło. Podchodzę do tego jako programista pełnego stosu technologicznego, skupiając się głównie na .NET i mając wcześniejsze doświadczenie z Angularzem, oraz krótki kontakt z Razor.

Moje pierwsze spotkanie z tą technologią rozpoczęło się od poszukiwania i uczestnictwa w odpowiednim kursie na platformie Pluralsight. Pozwoliło mi to uzyskać wstępne zrozumienie podstaw i koncepcji pisania kodu frontendowego w tym frameworku, bez zagłębiania się w suchą dokumentację.

Szybko stało się jasne, że Blazor i Angular miały dość wiele wspólnego, co znacznie ułatwiło mi pracę nad moim pierwszym projektem, wykorzystując tę technologię. Plan był prosty: stworzyć projekt podstawowej usługi internetowej z standardowymi funkcjami, takimi jak rejestracja, logowanie, tłumaczenia i wiele innych.

Celem tego projektu było poznanie podstaw, tworząc jednocześnie coś, co w przyszłości mogłoby służyć jako fundament dla bardziej spersonalizowanych i skomplikowanych przedsięwzięć. W ten sposób mogłem budować na bazie pracy wyłożonej przez ten początkowy projekt, rozwijając bardziej dostosowane i złożone aplikacje w przyszłości. Nadszedł więc czas, aby rozpocząć tworzenie architektury. Pierwszą kluczową decyzją, jaką musiałem podjąć, było to, jak chciałem hostować moją aplikację, ponieważ Blazor oferuje trzy różne metody: Server, WebAssembly i Hybrid. Każde podejście ma swoje własne zalety i wady, dlatego ważne jest wybranie tego, które najlepiej pasuje do konkretnych wymagań projektu.

‍

‍Server Hosting:

Zalety:

• Komunikacja w czasie rzeczywistym: Hostowanie na serwerze umożliwia komunikację w czasie rzeczywistym między klientem a serwerem za pomocą SignalR, co czyni go doskonałym wyborem dla aplikacji, które wymagają aktualizacji na żywo.
• Krótszy czas początkowego ładowania: Czasy początkowego ładowania są zazwyczaj krótsze, ponieważ serwer zajmuje się renderowaniem i wysyła HTML do klienta.
  
  

Wady:

• Problemy z skalowalnością: Skalowalność może być problemem, ponieważ zasoby serwera są dzielone między klientami, co potencjalnie może wpłynąć na wydajność podczas dużego obciążenia.
• Zależność od opóźnień: Wydajność może ucierpieć, jeśli istnieje znaczące opóźnienie między serwerem a klientami.

WebAssembly Hosting:

Zalety:

• Zależność od opóźnień: Wydajność może cierpieć, jeśli występuje znaczące opóźnienie między serwerem a klientami.
• Możliwości offline: WebAssembly pozwala na tworzenie progresywnych aplikacji internetowych (PWAs), które mogą działać w trybie offline i zapewniać doświadczenie zbliżone do aplikacji natywnych.
  
  

Wady:

• Dłuższy czas początkowego ładowania: Początkowe pobieranie plików runtime WebAssembly i aplikacji może skutkować dłuższym czasem ładowania w porównaniu do hostowania na serwerze.
• Ograniczenie do nowoczesnych przeglądarek: Wsparcie dla WebAssembly jest ograniczone do nowoczesnych przeglądarek, co może wykluczać niektórych użytkowników.

Hybrid Hosting:

Zalety:

• Korzyści: Hostowanie hybrydowe łączy elementy zarówno hostingu na serwerze, jak i WebAssembly, oferując zalety komunikacji w czasie rzeczywistym i wykonywania po stronie klienta.
• Elastyczność: Możesz wybrać model hostowania, który odpowiada konkretnym częściom twojej aplikacji, co zapewnia elastyczność w architekturze.:

Wady:

• Złożoność: Zarządzanie zarówno komponentami po stronie serwera, jak i klienta może wprowadzić złożoność, co sprawia, że konieczne jest znalezienie równowagi między nimi.

Podsumowując, wybór hostingu dla twojej aplikacji Blazor powinien być kierowany potrzebami projektu. Hostowanie na serwerze wyróżnia się w komunikacji w czasie rzeczywistym, ale może napotykać na wyzwania związane ze skalowalnością. Hostowanie WebAssembly oferuje wykonywanie po stronie klienta i możliwości offline, ale może mieć dłuższy czas początkowego ładowania. Hostowanie hybrydowe zapewnia elastyczność, ale wymaga starannego planowania architektury. Zrozumienie kompromisów i dostosowanie wyboru do celów projektu stanowi klucz do udanej implementacji aplikacji Blazor.

Po kilku krótkich konsultacjach podjąłem decyzję, aby hostować Blazor (serwer) na froncie w ramach API .NetCore. Ten wybór niesie ze sobą kilka wyraźnych zalet, jak wcześniej opisano, i upraszcza zarządzanie projektem, konsolidując wszystko w jednym rozwiązaniu hostowanym na jednym usłudze Azure App Service.

Faza tworzenia architektury przebiegła gładko. Szybko złożyłem front-end, korzystając z przyjaznego dla użytkownika kreatora, a skonfigurowanie połączenia między front-endem a API, aby zapewnić płynne wyświetlanie po uruchomieniu projektu API, było dziecinnie proste i wymagało tylko kilku dodatkowych linii kodu tu i ówdzie.

Ta bezproblemowa integracja ilustruje łatwość i efektywność pracy z tą architekturą, przygotowując grunt pod kolejne fazy rozwoju z pewnością i ekscytacją.

Mając gotowy projekt, czas zagłębić się w podejście Blazor do definiowania widoków. Moim zdaniem to podejście znajduje równowagę między Razor a Angular. Mamy część HTML (.razor), w której definiujemy wygląd strony, używając zwykłego HTML lub, jak w moim przypadku, wykorzystując zewnętrzną bibliotekę komponentów (Radzen). Ta część pozwala również na pisanie logiki, ale moim zdaniem może to nie być najwygodniejsze ani czytelne podejście. Alternatywą jest przeniesienie logiki do osobnego pliku (.radzen.cs), gdzie możemy wygodnie pisać kod C#, więc właśnie to zrobiłem.

Chociaż nigdy wcześniej nie pisałem w Blazorze, szybko odnalazłem się w tym frameworku. Dwa proste pola wejściowe, przycisk i wstrzyknięty serwis do żądań API, i część front-endu logowania była gotowa. To właśnie to lubię najbardziej w tej technologii. Mając pojęcie, jak coś zrobić w Angularze, bardzo łatwo jest to zrobić także tutaj.

Dalej wszystko poszło sprawnie - szybko skonfigurowałem responsywne menu dla łatwej nawigacji między stronami, zaimplementowałem rejestrację użytkownika z obsługą zasad (korzystając z Microsoft.AspNetCore.Authorization), oraz oczywiście zarządzanie tokenami JWT (JSON Web Tokens). Znalazłem wielką pomoc w wbudowanym ILocalStorageService (Blazored.LocalStorage), który działa bardzo podobnie do lokalnego składowania w Angularze.

Jedynym głównym wyzwaniem, z którym się zetknąłem, było wdrożenie obsługi wielojęzyczności interfejsu. Chciałem, aby był on dynamiczny i możliwy do edycji bezpośrednio w aplikacji, co oznaczało, że standardowe rozwiązania oparte na plikach zasobów w API nie spełniały moich wymagań. Tutaj, niestety, napotkałem główną wadę Blazora - to stosunkowo nowa technologia. Kiedy chcesz zrobić coś nietypowego, istnieje dobra szansa, że nie ma tysięcy pytań na Stack Overflow dotyczących dokładnie tego, czego chcesz osiągnąć, i musisz samodzielnie to rozwiązać. Pod tym względem dojrzałość Angulara i szerokie wsparcie społeczności rzeczywiście przemawiają na jego korzyść.

Ostatecznie musiałem zbudować funkcjonalność wielojęzyczną od podstaw, podobną do Angularowego ngx-translate, tworząc dynamicznie pliki JSON z tłumaczeniami na podstawie danych z bazy danych.

Setting aside smaller functionalities like user,language and translation management, that's where my journey with Blazor came to an end.

What are my conclusions? Well, Blazor is certainly an intriguing technology, and with time and an increasing user base, it will become more accessible, especially if you already have experience with Angular or Razor.

BLAZOR KONTRA ANGULAR: ZA I PRZECIW

Tutaj chciałbym przedstawić kilka zalet i wad obu technologii.

Blazor:

Zalety:

• Znajomość dla deweloperów .NET: Jeśli już dobrze znasz świat .NET, Blazor jest naturalnym wyborem. Pozwala wykorzystać istniejące umiejętności w języku C# i platformie .NET.
• Pełen stos technologiczny z C#: Blazor umożliwia bycie pełno-stosowym programistą, korzystając z języka C# zarówno do front-endu, jak i back-endu. To usprawnia rozwijanie i promuje ponowne wykorzystanie kodu.
• Component-Based Architecture: Blazor's component-based structure simplifies development by breaking applications into modular components, making it easier to manage and maintain complex projects.
• Wieloplatformowość: Blazor jest technologią wieloplatformową, umożliwiającą tworzenie aplikacji internetowych, które działają bez problemu na różnych przeglądarkach i urządzeniach.

‍

Wady:

• Względny nowicjusz: Chociaż Blazor nabiera rozpędu, nadal jest uważany za nowicjusza w porównaniu do bardziej ugruntowanych frameworków, takich jak Angular. Może to mieć wpływ na dostępność zasobów i bibliotek innych firm.
• Ograniczenia po stronie serwera: W przypadku Blazor po stronie serwera na wydajność może wpływać obciążenie serwera i opóźnienia, co może nie być idealne dla wysoce responsywnych aplikacji.

‍

Angular:

‍

Zalety:

• Dojrzały ekosystem: Angular istnieje już od jakiegoś czasu, co zaowocowało dojrzałym ekosystemem z obszerną dokumentacją, solidną społecznością oraz szeroką gamą bibliotek i narzędzi.
• Potężny i bogaty w funkcje: Angular oferuje kompleksowy zestaw funkcji po wyjęciu z pudełka, w tym potężne narzędzia do routingu, formularzy i wstrzykiwania zależności.
• Silne wsparcie dla języka TypeScript: TypeScript, superset JavaScript, jest domyślnym językiem dla rozwoju Angular. Wymusza on silne typowanie i pomaga wychwycić błędy na wczesnym etapie procesu programowania.
• Zoptymalizowany dla dużych aplikacji: Architektura Angular została zaprojektowana do obsługi dużych aplikacji o złożonych wymaganiach.

‍

Wady:

• Krzywa uczenia się: Angular ma bardziej stromą krzywą uczenia się, szczególnie dla programistów nowych w tym frameworku. Jego rozbudowany zestaw funkcji może być początkowo przytłaczający.
• Szablonowy kod: Angular często wymaga napisania większej ilości standardowego kodu w porównaniu do niektórych innych frameworków, co może spowolnić rozwój.
• Mniejsza znajomość dla programistów .NET: Jeśli jesteś głównie programistą .NET, przejście na Angular może wymagać nauki nowego języka (TypeScript) i innego zestawu narzędzi.

‍

Podsumowując, zarówno Blazor, jak i Angular mają swoje mocne i słabe strony. Wybór między nimi zależy od konkretnych wymagań projektu, umiejętności zespołu i preferencji programistycznych.

Podsumowując: Czy nadszedł czas, aby zrezygnować z Angulara?

Podsumowując, Blazor i Angular to dwa potężne frameworki do tworzenia stron internetowych, z których każdy ma swój własny zestaw zalet i wad. Blazor, dzięki integracji z .NET, oferuje znajomość programistów .NET, architekturę opartą na komponentach i elastyczność uruchamiania kodu na serwerze lub w przeglądarce. Z drugiej strony, Angular może pochwalić się dojrzałym ekosystemem, solidnymi funkcjami, silną obsługą TypeScript i skalowalnością dla dużych aplikacji.

Wybór między Blazor i Angular ostatecznie zależy od konkretnych wymagań projektu i znajomości technologii przez zespół. Niezależnie od tego, czy zdecydujesz się na innowacyjność Blazor, czy na ugruntowane możliwości Angular, oba frameworki mają potencjał, aby pomóc Ci tworzyć wyjątkowe aplikacje internetowe.

Ponieważ krajobraz tworzenia stron internetowych wciąż ewoluuje, bycie na bieżąco z tymi frameworkami jest niezbędne do podejmowania świadomych decyzji, które będą kształtować przyszłość twoich projektów.