С какой ситуации начинается Blazor

Представьте: вы уже немного знаете C#. Умеете создать класс, написать метод, использовать if, foreach и список объектов. Ещё вы примерно понимаете HTML, CSS и JavaScript: HTML создаёт элементы страницы, CSS делает их красивее, JavaScript реагирует на клики.

Потом появляется задача:

«Сделай страницу учебного трекера. На ней должен быть список курсов, прогресс, заметки и кнопка "Продолжить обучение"».

На уровне C# всё выглядит знакомо. Курс можно описать классом Course, урок - классом Lesson, заметку - классом Note. Прогресс можно хранить числом. Список курсов можно перебрать через foreach.

Но пользователь видит не C#-классы, а страницу в браузере. На этой странице должны быть заголовки, карточки, кнопки, формы и списки. Обычно такие вещи собираются из HTML, CSS и JavaScript. HTML показывает структуру, CSS отвечает за внешний вид, JavaScript добавляет поведение.

Blazor помогает в такой ситуации: он позволяет описывать части страницы так, чтобы рядом с HTML-разметкой можно было писать C#-код. Например, вывести значение переменной, пройтись по списку курсов или обработать нажатие кнопки C#-методом.

Пока это определение можно читать проще: Blazor даёт способ делать веб-страницы, где логика интерфейса может быть написана на C#.

Где Blazor находится на карте веб-разработки

Чтобы Blazor не выглядел отдельным загадочным словом, начнём с обычной веб-страницы.

HTML задаёт структуру страницы: заголовки, списки, формы, кнопки, ссылки.

CSS отвечает за внешний вид: отступы, цвета, сетки, адаптивность, размеры.

JavaScript добавляет поведение: например, что произойдёт после клика по кнопке.

C# на сервере обычно отвечает за данные и правила приложения: какие курсы есть, какой прогресс у ученика, можно ли сохранить заметку.

Если вы делаете простую страницу, этих знаний уже достаточно: HTML, CSS, немного JavaScript. Но когда страница превращается в приложение, появляется много повторяющихся частей: карточки курсов, кнопки, формы, списки, индикаторы прогресса.

Blazor находится именно здесь. Он помогает собирать такие части как компоненты и писать их поведение на C#.

Файл Blazor-компонента обычно имеет расширение .razor. В нём рядом живут разметка и C#-код:

<h1>@title</h1>

@code {
    private string title = "Мой учебный трекер";
}

Этот пример специально маленький. Сейчас важно увидеть саму форму: HTML-разметка выводит заголовок, а значение приходит из C#-поля. Позже на этом же принципе появятся кнопки, списки, формы, параметры и события.

Что такое компонент

Главная единица Blazor - компонент. Проще всего думать о нём как о самостоятельной части экрана.

В учебном трекере компонентами могут стать:

• карточка курса;
• индикатор прогресса;
• форма заметки;
• список последних уроков;
• кнопка завершения урока;
• страница темы целиком.

Например, карточка курса может получить название, количество уроков и процент прохождения. Внутри она решит, как это показать: где вывести заголовок, каким цветом подсветить прогресс, какую кнопку отобразить. Если таких карточек на странице десять, вы не копируете одну и ту же разметку десять раз. Вы используете один компонент с разными данными.

Такой подход особенно полезен в рабочих приложениях. Админ-панели, личные кабинеты, CRM, учебные платформы и внутренние сервисы почти всегда состоят из повторяющихся частей: таблиц, фильтров, форм, карточек, статусов, списков и кнопок действий. Компоненты позволяют держать эти части отдельно и постепенно собирать из них большие экраны.

Почему .NET-командам это удобно

Blazor особенно хорошо ложится на проекты, где человек или команда уже пишут на C#.

Причина простая: интерфейс начинает говорить на знакомом языке. Вы можете использовать классы, свойства, условия, циклы и методы C#. Для новичка это снижает порог входа: сначала нужно понять устройство компонентов, а не сразу осваивать отдельный большой фронтенд-мир.

Это не означает, что в каждом .NET-проекте нужно выбирать Blazor. У технологии есть своё место.

Blazor хорошо подходит для:

• внутренних сервисов;
• административных панелей;
• личных кабинетов;
• учебных платформ;
• корпоративных приложений;
• интерфейсов с большим количеством форм, таблиц, фильтров и состояния.

Для простой статической страницы часто достаточно обычного HTML и CSS. Если на странице только текст, картинки, ссылки и одна простая форма, Blazor может быть лишним. Если же страница постепенно становится приложением с состоянием, кнопками, формами, списками и правилами, Blazor начинает выглядеть уместнее.

Задача курса не в том, чтобы объявить Blazor универсальным ответом. Задача - научиться видеть, когда он действительно упрощает работу.

Почему у Blazor несколько режимов

Когда новичок открывает документацию по Blazor, он быстро встречает слова Server, WebAssembly, static SSR, interactive render mode. На первом уроке это может сбивать: будто нужно сразу выбрать правильный режим и выучить всю внутреннюю механику.

На старте достаточно другой рамки. Современный Blazor Web App умеет сначала отдать пользователю страницу с сервера, а затем добавить интерактивность тем компонентам, которым она нужна.

Подробности появятся позже. Сначала мы научимся создавать проект, писать компоненты, передавать данные в компонент, обрабатывать клики и работать с формами. После этого render modes станут практическим выбором, а не набором слов из документации.

Пока запомните только ориентир: Blazor может начинать как обычное серверное веб-приложение и добавлять интерактивность постепенно.

Что мы будем собирать в курсе

Сквозной проект курса - личный учебный трекер. В нём будут темы, уроки, заметки, прогресс, фильтры и формы. Такой проект хорошо подходит для первого знакомства с Blazor: он не слишком большой, но в нём сразу видны компоненты, состояние, события и работа с данными.

Путь будет постепенным:

• сначала поймём место Blazor и подготовим окружение;
• затем создадим первое приложение;
• научимся собирать интерфейс из компонентов;
• добавим параметры, события и формы;
• подключим данные;
• разберём маршруты, состояние, render modes, JS interop и публикацию.

В следующем уроке подготовим рабочее окружение. После этого создадим первый Blazor-проект и начнём превращать абстрактные слова из этого урока в конкретные файлы.