Перейти к содержанию
Профессор Веб

Веб-приложения: данные, синхронизация и интерактивность

Эта партия продолжает курсы от веб-приложения к продукту: 100 новых уроков восьми курсов. Каждый курс развивает общий учебный пример и включает последовательное оглавление, переходы между уроками и полный архив исходников.

Все материалы опубликованы. Учебные приложения, зависимости, тесты и измерения не запускались. Примеры написаны по первичной документации; описанные реакции и результаты ожидаемые. Техническая проверка учебных приложений остаётся отдельным этапом.

Восемь курсов

Курс Уроков Общая задача
Angular: кабинет заявок 16 Компоненты, signals, DI, Router, формы, HttpClient, RxJS и состояния интерфейса.
NestJS: API заявок 14 Модули, providers, DTO, guards, PostgreSQL, транзакции, конфликты и OpenAPI.
OpenSearch: поиск по библиотеке 14 Документы, mapping, Bulk, технические термины, запросы, фильтры, facets и reindex.
RabbitMQ: доставка событий 12 Очереди, маршруты, ack, confirms, retries, DLQ, идемпотентность и outbox.
Local-first: заметки и синхронизация 14 IndexedDB, атомарная очередь, стабильные операции, revisions, cursor, конфликты и удаление.
Argo CD: локальный GitOps релиз 10 Git источник, AppProject, manual sync, drift, Kustomize, продвижение и откат.
SVG и Canvas: графический редактор 10 Модель фигур, указатель, камера, слои, история, JSON и экспорт SVG/PNG.
Web Audio: локальная аудиомастерская 10 Локальный звук, кадры, граф, волна, фрагменты, переходы, OfflineAudioContext и WAV.

Учебные маршруты

Кабинет и сервер: Angular → NestJS. Оба курса используют договор «Диспетчера». Angular можно изучать независимо с fixture API; подключение серверного режима описано в исходниках. Nest включает собственные SQL и HTTP-примеры.

Данные и доставка: PostgreSQL → OpenSearch и RabbitMQ. Поиск развивает библиотеку Markdown, а очередь — самостоятельный проект доставки событий. Это связанные знания, не автоматически соединённое приложение.

Работа при недоступной сети: Local-first Блокнот — от атомарного локального сохранения до явной синхронизации и конфликтов. Курс посвящён изменяемым данным; кеш оболочки и новый офлайн-вход не реализованы.

Сопровождение релиза: Docker → Kubernetes → Argo CD. Последняя серия продолжает «Площадку», но включает самостоятельный конечный комплект приложения и локального Git источника.

Браузерные инструменты: редактор схем и аудиомастерская — две отдельные практики нативных API. Первая создаёт JSON/SVG/PNG, вторая обрабатывает локальный звуковой фрагмент и записывает WAV.

Маршруты связывают предпосылки. Конкретные версии, границы интеграции и непроверенные части перечислены в оглавлениях и README. Архивы содержат полные итоговые исходники, а не работающие внешние службы или выполненные снимки всех шагов.

Все 100 уроков

Angular 22: кабинет заявок «Диспетчер»

  1. Компонент Angular и модель заявки
  2. Angular: Signals и изменение локального состояния
  3. Angular: Computed и отбор заявок
  4. Angular: входные данные компонента строки
  5. Angular: DI и общая учебная сессия
  6. Angular: Router и адрес отдельной заявки
  7. Angular: ленивые страницы и границы загрузки
  8. Angular: Reactive forms и независимый черновик
  9. Angular: проверка формы и понятные сообщения
  10. Angular: HttpClient и локальный fixture API
  11. Angular: RxJS и актуальность ответа списка
  12. Angular: фильтры списка в URL
  13. Angular: состояния страницы и доступные ошибки
  14. Angular: PATCH и конфликт версии редактора
  15. Angular: учебная роль и границы авторизации UI
  16. Передача Angular-кабинета и подключение Nest

NestJS 12: API заявок «Диспетчер»

  1. NestJS и договор API диспетчера
  2. Модули Nest и область доступности provider
  3. NestJS: Providers и разделение HTTP, правил и SQL
  4. NestJS: контроллер заявок и HTTP-маршруты
  5. NestJS: DTO и проверка тела PATCH
  6. NestJS: Query DTO и буквальный поиск заявок
  7. NestJS: Guards и серверное право изменения
  8. NestJS: Interceptor и идентификатор запроса
  9. NestJS: PostgreSQL и жизненный цикл пула
  10. NestJS: репозиторий и параметризованные запросы
  11. NestJS: транзакция изменения и конфликт version
  12. NestJS: фильтр исключений и единый ответ отказа
  13. NestJS: OpenAPI и согласованная документация API
  14. Конфигурация и передача NestJS API

Индекс: OpenSearch для Markdown-библиотеки

  1. OpenSearch: поисковый индекс как отдельная копия библиотеки
  2. OpenSearch: подготовка Markdown для поисковой записи
  3. OpenSearch: явные mappings для текста и точных значений
  4. OpenSearch: русский анализатор и технические обозначения
  5. OpenSearch: пакетный импорт и ошибки отдельных документов
  6. OpenSearch: поиск по заголовку и основному тексту
  7. OpenSearch: фильтры рубрики, метки и видимости
  8. OpenSearch: фасеты и область подсчёта групп
  9. OpenSearch: подсветка совпадений без исполнения HTML
  10. OpenSearch: управление ранжированием через контрольные запросы
  11. OpenSearch: изменения и удаления через манифест импорта
  12. OpenSearch: перенос схемы и атомарное переключение aliases
  13. OpenSearch: публичный gateway и пределы поискового запроса
  14. OpenSearch: сопровождение и передача проекта Индекс

Доставка: события публикации через RabbitMQ

  1. RabbitMQ: событие публикации и границы доставки
  2. RabbitMQ: соединение, канал и долговечная топология
  3. RabbitMQ: издатель сообщения и свойства конверта
  4. RabbitMQ: Exchanges и независимые маршруты получателей
  5. RabbitMQ: подтверждение после фиксации эффекта
  6. RabbitMQ: Publisher confirms и неизвестный исход публикации
  7. RabbitMQ: отложенный повтор для одного обработчика
  8. RabbitMQ: очередь отказов и осознанный повтор
  9. RabbitMQ: идемпотентный эффект и квитанция inbox
  10. RabbitMQ: восстановление соединения и порядок редакций
  11. RabbitMQ: API публикации и transactional outbox
  12. RabbitMQ: наблюдение и передача проекта Доставка

Local-first заметки и явная синхронизация

  1. Local-first приложение: локальная запись и границы синхронизации
  2. Local-first приложение: схема IndexedDB для записей и очереди
  3. Local-first приложение: атомарное сохранение заметки и outbox
  4. Local-first приложение: стабильный ID операции и неизменяемый снимок
  5. Local-first приложение: серверный revision и журнал изменений
  6. Local-first приложение: отправка outbox и подтверждение снимка
  7. Local-first приложение: получение изменений и атомарный cursor
  8. Local-first приложение: сравнение версий и ручное объединение
  9. Local-first приложение: удаление заметки и tombstone
  10. Local-first приложение: повторы, отключение сети и прогресс
  11. Local-first приложение: несколько вкладок и несколько устройств
  12. Local-first приложение: квоты браузера и экспорт заметок
  13. Local-first приложение: аккаунт, локальная база и прекращение сессии
  14. Local-first приложение: передача Блокнота и сценарии восстановления

Argo CD: локальный GitOps релиз

  1. Argo CD: Git как источник желаемого состояния
  2. Argo CD: локальный bootstrap и читаемый Git источник
  3. Argo CD: Application и границы AppProject
  4. Argo CD: первый manual sync и состояние приложения
  5. Argo CD: Diff и drift после ручного изменения
  6. Argo CD: Kustomize base и окружения dev/stage
  7. Argo CD: продвижение релиза из dev в stage
  8. Argo CD: Rollback revision и исправление Git
  9. Argo CD: Prune, полномочия и ссылки на Secret
  10. Argo CD: передача GitOps проекта и восстановление источника

SVG и Canvas: графический редактор

  1. SVG-редактор: документ, фигура и координаты редактора
  2. SVG из данных, без HTML-строк
  3. SVG-редактор: координаты указателя и попадание в фигуру
  4. SVG-редактор: перемещение и команды изменения
  5. SVG-редактор: масштаб и перемещение камеры
  6. SVG-редактор: выделение, порядок и свойства фигур
  7. SVG-редактор: отмена действий и границы операции
  8. SVG-редактор: сохранение документа и проверка импорта
  9. Экспорт изображения через Canvas
  10. SVG-редактор: доступное управление и передача редактора

Web Audio: локальная аудиомастерская

  1. Web Audio API: звуковой файл, семпл и контракт редактора
  2. Web Audio API: декодирование локального файла
  3. AudioContext и управляемое воспроизведение
  4. Web Audio API: звуковой граф и громкость без скачка
  5. Web Audio API: волна и временная шкала
  6. Web Audio API: выделение и воспроизведение фрагмента
  7. Web Audio API: плавное начало и окончание фрагмента
  8. OfflineAudioContext и результат обработки
  9. Экспорт WAV PCM16 в браузере: от семплов к файлу
  10. Web Audio API: ограничения, ошибки и передача аудиоредактора

Все курсы.