Blazor Extension, który zaoszczędzi czas w Visual Studio

Krótki przegląd: Ułatwienie programowania w Blazorze

Tim zaczyna od wyjaśnienia celu: pomóc programistom korzystającym z Blazora w Visual Studio usprawnić ich pracę. Mówi, że to rozszerzenie ma na celu wyeliminowanie drobnych niedogodności, takich jak zarządzanie plikami Razor, przestrzeniami nazw i separacją kodu — zadań, które mogą stać się powtarzalne podczas pracy z wieloma komponentami Blazor lub stronami Razor.

To rozszerzenie Visual Studio to nie tylko wygoda; Chodzi o zwiększenie wydajności renderowania, uproszczenie interaktywności interfejsu użytkownika oraz przyspieszenie cyklu rozwoju w środowisku .NET — zwłaszcza w przypadku aplikacji internetowych Blazor.

Instalacja rozszerzenia autorstwa Jimmy'ego Engströma

Tim przedstawia rozszerzenie Visual Studio o nazwie BLM, stworzone przez Jimmy'ego Engströma. Można ją znaleźć w Visual Studio w menu Rozszerzenia > Zarządzaj rozszerzeniami, wyszukując "rozszerzenie BLM". Po zainstalowaniu należy ponownie uruchomić Visual Studio.

Tim zauważa, że rozszerzenie zawiera doskonałą dokumentację, zaczerpniętą bezpośrednio z pliku README na GitHubie. Oznacza to, że nawet nowi programiści mogą zrozumieć, jak z niego korzystać, bez konieczności opuszczania środowiska IDE.

Konfiguracja projektu Blazor

Po instalacji należy utworzyć nowy projekt Blazor lub otworzyć istniejący. Tim ładuje przykładowy projekt o nazwie "SuggestionApp", czyli projekt Blazor Server wykorzystujący .NET Core. Jest to doskonały przykład, ponieważ pokazuje połączenie składni Razor i logiki kodu zaplecza w komponentach.

Praca z plikami Razor i kodem w tle

Tim otwiera plik Profile.razor i wyjaśnia, że zawiera on zarówno znaczniki Razor, jak i logikę C#. Jeśli chcesz wyodrębnić logikę do pliku kodu pomocniczego, rozszerzenie ułatwia to poprzez kliknięcie prawym przyciskiem myszy > Utwórz kod pomocniczy. Powoduje to wygenerowanie pliku .razor.cs powiązanego z komponentem .razor.

Chociaż przykład zawiera już fragment kodu, Tim usuwa go, aby zasymulować rozpoczęcie pracy od nowa, i tworzy nowy komponent o nazwie Test.razor.

Pisanie i łączenie komponentów Razor

W pliku Test.razor Tim definiuje prostą zmienną typu string:

string test = "hello world";

string test = "hello world";

Następnie używa wyrażenia @test w znacznikach Razor, aby wyrenderować je w przeglądarce. Po skompilowaniu projektu komponent jest w pełni funkcjonalny. Ten przykład pokazuje domyślne zachowanie renderowania treści dynamicznych w komponentach Blazor przy użyciu środowiska uruchomieniowego .NET i skompilowanych zestawów.

Funkcja "Wyodrębnij do kodu zaplecza" programu Visual Studio

Tim demonstruje natywną funkcję programu Visual Studio: wyodrębnianie logiki Razor wbudowanej w kod do pliku kodu pomocniczego za pomocą opcji Szybkie działania > Refaktoryzacja > Wyodrębnij do kodu pomocniczego. To oddziela warstwę logiki od interfejsu użytkownika, co jest dobrą praktyką pod kątem łatwości konserwacji i testowania.

Rozszerzenie dodaje funkcję odwrócenia

Właśnie w tym miejscu rozszerzenie pokazuje swoją prawdziwą wartość. Chociaż Visual Studio obsługuje przenoszenie kodu do pliku .razor.cs, nie pozwala na przeniesienie go z powrotem. Korzystając z rozszerzenia, Tim klika prawym przyciskiem myszy plik .razor.cs i wybiera opcję "Move Code Behind to Razor". Natychmiast logika C# zostaje przeniesiona z powrotem do pliku Razor.

Chociaż ta funkcja jest oznaczona jako beta, Tim uważa ją za stabilną i pomocną, gdy programiści chcą uprościć pliki lub debugować logikę w linii kodu.

Tworzenie oddzielnych plików CSS i JS

Tim pokazuje kolejną funkcję oszczędzającą czas: kliknij prawym przyciskiem myszy > Utwórz izolowany CSS. Spowoduje to utworzenie pliku o nazwie Test.razor.css, wzorca używanego przez Blazor do stylizacji konkretnych komponentów. Tim wyjaśnia, że bez tego rozszerzenia trzeba by ręcznie utworzyć plik, wybierając opcję Dodaj > Nowy element, i upewnić się, że nazwy są zgodne.

Ta sama funkcja istnieje w przypadku izolacji JavaScript, umożliwiając łatwe przypisanie zachowań o ograniczonym zakresie do poszczególnych komponentów — jest to ważny element tworzenia stron internetowych podczas budowania interaktywnych i bezpiecznych komponentów.

Znajdź zastosowania komponentów w całej aplikacji

Kolejną przydatną funkcją jest to, że Tim klika prawym przyciskiem myszy komponent NotAuthorized i wybiera opcję "Znajdź użycia komponentu". Dzięki temu szybko wyświetlane są wszystkie pliki, w których znajduje się odwołanie do tego komponentu. Jest to niezwykle przydatne podczas refaktoryzacji, zwłaszcza w dużych projektach .NET, gdzie komponenty są ponownie wykorzystywane na różnych stronach i w różnych układach.

Generowanie testów BUnit z komponentów

Testowanie jest istotną częścią każdej aplikacji internetowej. Tim pokazuje, jak automatycznie generować testy BUnit — frameworku testowego dla Blazora. Kliknięcie prawym przyciskiem myszy na komponent i wybranie opcji "Generate BUnit Test" pozwala wybrać między składnią Razor a C#.

Narzędzie generuje niezbędną strukturę testową, umożliwiając szybką konfigurację testów interfejsu użytkownika. Jest to idealne rozwiązanie dla programistów pragnących wdrożyć zabezpieczenia, walidację odpowiedzi lub zachowanie interfejsu użytkownika poprzez automatyczne testy.

Wyodrębnij wspólny interfejs użytkownika do komponentów wielokrotnego użytku

Następnie Tim pokazuje, jak można zaznaczyć dowolny blok interfejsu użytkownika Razor i wybrać opcję "Extract to Component" (Wyodrębnij do komponentu). W swojej demonstracji wyodrębnia przycisk znajdujący się wewnątrz kontenera do nowego komponentu o nazwie TestButton. Umożliwia to uzyskanie bardziej przejrzystego kodu, lepsze ponowne wykorzystanie oraz modułowy projekt interfejsu użytkownika — co jest szczególnie ważne podczas tworzenia aplikacji mobilnych, aplikacji hybrydowych Blazor lub aplikacji internetowych na dużą skalę.

Wizualizacja tras w aplikacji Blazor

Kolejną wyróżniającą się funkcją jest opcja "Pokaż trasy Blazor", dostępna w menu Rozszerzenia > BLM > Pokaż trasy Blazor. To narzędzie wyświetla listę wszystkich zdefiniowanych tras w całym projekcie — tych zdefiniowanych za pomocą dyrektywy @page w plikach Razor.

Tim pokazuje, że zmiana dyrektywy @page w pliku Test.razor natychmiast aktualizuje listę tras. Możesz dwukrotnie kliknąć dowolną trasę na liście, aby otworzyć odpowiedni komponent. Dzięki temu zarządzanie nawigacją staje się znacznie bardziej wydajne, zwłaszcza w aplikacjach wykorzystujących rozszerzoną nawigację, wiele trybów renderowania lub głęboko zagnieżdżone komponenty.

Uruchamianie projektu za pomocą .NET Watch

Tim dzieli się ważną wskazówką dotyczącą wydajności: korzystaj z .NET Watch za pośrednictwem PowerShell zamiast polegać na wbudowanej funkcji hot reload w Visual Studio. Wyjaśnia, że tradycyjne odświeżanie jest wolniejsze i mniej spójne. Jednak dzięki rozszerzeniu można kliknąć prawym przyciskiem myszy na projekt i wybrać opcję "Uruchom .NET Watch".

Spowoduje to uruchomienie okna PowerShell i uruchomienie aplikacji za pomocą następującego polecenia:

dotnet watch

dotnet watch

Umożliwia to odświeżanie na żywo, szybsze uruchamianie i bardziej responsywne programowanie. Dla programistów wdrażających aplikacje na serwerach internetowych lub tworzących tzw. aplikacje progresywne, ten wzrost szybkości może znacznie poprawić komfort pracy.

Podsumowanie: dłączego warto zainstalować to rozszerzenie

W ostatniej minucie Tim podsumowuje możliwości tego rozszerzenia Visual Studio do tworzenia aplikacji w Blazorze. Niezależnie od tego, czy tworzysz aplikację Blazor WebAssembly, projekt po stronie serwera, czy cokolwiek pomiędzy, to narzędzie zapewnia:

• Szybsze tworzenie plików i komponentów

• Wyraźniejsze rozdzielenie kodu Razor i C#

• Łatwiejsze testowanie i wykrywanie tras

• Lepsze zrozumieniuiuiuiuie drzewa renderowania

• Lepsze zarządzanie skompilowaną składnią i znacznikami

Tim zdecydowanie zaleca, aby każdy, kto pracuje z aplikacjami .NET, C# lub Blazor, zainstalował to rozszerzenie i rozważył włączenie go do swojego domyślnego zestawu narzędzi.

Wniosek: Blazor + Visual Studio = jeszcze lepsze dzięki temu rozszerzeniu

Jeśli tworzysz nowoczesne aplikacje internetowe przy użyciu Blazora w Visual Studio, przewodnik Tima Coreya pokazuje, jak potężne może być to niewielkie rozszerzenie. Dzięki funkcjom usprawniającym obsługę plików, testowanie, routing i wydajność kompilacji zapewnia duże korzyści przy minimalnej konfiguracji.

Dzięki pracy Jimmy'ego Engströma programiści mają teraz dostęp do narzędzia, które idealnie wpisuje się w ekosystem Blazor i .NET Core — ograniczając pracę ręczną, umożliwiając lepsze projektowanie komponentów oraz poprawiając ogólną interaktywność i łatwość utrzymania projektu.

Niezależnie od tego, czy pracujesz nad aplikacjami mobilnymi, desktopowymi czy internetowymi, to rozszerzenie pomaga w pełni wykorzystać potencjał Blazor, Visual Studio i środowiska uruchomieniowego .NET. Aby uzyskać więcej informacji, obejrzyj film Tima i zasubskrybuj jego kanał, aby uzyskać dostęp do kolejnych wnikliwych filmów na temat języka C# i programowania.