Предисловие

Вот уже почти десять лет я работаю инженером-программистом. На этом безумном пути я изучил языки, фреймворки, шаблоны проектирования и все другие вещи, которые делают меня изгоем для большинства людей, с которыми я встречаюсь. Добавьте к этому тот факт, что вся моя профессиональная карьера проходила в изолированных правительственных пространствах, моими наставниками были безмолвные гиганты, замаскированные за строками текста в документации, книгах и интернет-сообществах. Хотя мне это очень нравится. Это ремесло, которое требует абсолютного терпения, смирения и, прежде всего, страсти.

Цель

Эта серия нацелена на возвращение ремеслу. За те бесчисленные часы работы с документацией меня всегда поражало то, насколько разрозненно все ощущалось. Концепции были выражены в вакууме, и я должен был соединить все вместе таким образом, чтобы это имело смысл для того, что я пытался достичь. После многих лет объединения этих частей воедино, я чувствую, что пришло время поделиться своим опытом со всеми, кому это интересно. Целевая аудитория в первую очередь нацелена на тех, кто плохо знаком с написанием веб-приложений в современном стеке приложений. Однако я надеюсь, что любой, кто это прочитает, сможет почерпнуть новые идеи или поделиться со мной своими мыслями.

Технологии

Стек приложений, который я буду использовать в этой серии, - это ASP.NET Core на задней стороне и Angular на передней стороне с Angular Material в качестве среды проектирования. Эта серия статей не предназначена для проведения конкурса «мой фреймворк лучше твоего», поэтому, пожалуйста, не зажигайте меня из-за того, что я не использую ваш любимый фреймворк. Как упоминалось выше, я работаю в изолированных правительственных помещениях с ограниченным доступом в Интернет. Это фреймворки, которые я выбрал по очень конкретным причинам, не в последнюю очередь из-за того, что я в них компетентен.

Чтобы держать диалог в курсе, я выбрал эти фреймворки по следующим причинам:

ASP.NET Core

  • Сквозная проверка подлинности Windows с помощью IIS, улучшенная с помощью System.DirectoryServices.AccountManagement
  • Entity Framework - это круто
  • Конвейер промежуточного программного обеспечения
  • Внедрение зависимости
  • Веб-API
  • SignalR
  • Может кэшировать зависимости NuGet
  • На C # интересно писать (для меня!)

Угловой

  • Интеграция с RxJS Observables
  • Модульная конструкция
  • Внедрение зависимостей / Услуги
  • Надежная структура материалов, созданная / управляемая Google в Angular
  • Стиль изолированного компонента
  • Полная современная структура, которая объединяет основные функции и предотвращает зависимости от нестабильных / больше не обслуживаемых библиотек

Инструменты

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

Пользователи Windows: при установке Node.js обязательно установите флажок Автоматически устанавливать необходимые инструменты для компиляции модулей npm. Материал использует SASS, который для компиляции использует Visual Studio Build Tools и Python.

Запуск установки шаблона

Шаблон, который служит основой для данной серии статей, представляет собой модифицированную версию шаблона dotnet new angular. Я убрал Bootstrap в пользу Angular Material и добавил некоторую инфраструктуру тем. Были добавлены некоторые базовые службы, например служба уведомлений. Структура папок была изменена, чтобы упростить рабочий процесс.

Чтобы установить шаблон:

  1. откройте командную строку / терминал в том месте, где вы хотите сохранить шаблон.
  2. Запустите команду git clone https://github.com/JaimeStill/FullstackTemplate
  3. Запустите команду dotnet new -i FullstackTemplate

После выполнения последней команды должен появиться список доступных шаблонов для dotnet new, включая шаблон Fullstack:

Запуск проекта

Перед сборкой проекта необходимо увеличить настройку network-timeout для Yarn. Шаблон настроен так, что начертание шрифта Roboto устанавливается непосредственно вместе с проектом (потому что я привык создавать что-то без подключения к Интернету!) И иногда может вызывать тайм-аут сборки пряжи. Это можно сделать из командной строки / терминала с помощью yarn config set network-timeout 60000.

После установки шаблона вы можете создать новый проект следующим образом:

  1. Создайте каталог, который вы хотите использовать в качестве корня вашего проекта.
  2. В командной строке / терминале, указанном на этот каталог, запустите dotnet new fullstack.

У вас должен получиться каталог, который выглядит так:

Теперь осталось только построить и запустить проект:

  1. В командной строке / терминале измените каталог на каталог {Project}.Web (где Project - это имя созданного вами корневого каталога. В данном случае Fullstack.Web).
  2. Выполните команду dotnet build. Это восстановит все зависимости .NET, построит проект .NET, восстановит все модули npm и построит приложение Angular.

После создания проекта просто запустите команду dotnet run. Сервер Kestrel запускается на http: // localhost: 5000 и размещает приложение ASP.NET Core. Затем приложение Angular компилируется, и приложение готово к работе.

Теперь к приложению можно получить доступ, перейдя по адресу http: // localhost: 5000.

Любые сохраненные изменения в файлах приложения Angular из IDE (например, Visual Studio Code) приведут к обновлению приложения и отражению этих изменений в браузере благодаря потрясающей технологии под названием Горячая замена модуля.

Вывод

Спасибо, что нашли время заняться этой статьей! Цель этой статьи состояла в том, чтобы представиться и дать толчок тому, что я надеюсь стать увлекательной обучающей серией по разработке полного стека. Забегая вперед, я планирую публиковать пост каждую неделю. Помимо следующего поста, который я выстроил, каждая запись будет посвящена одному аспекту разработки, основанному на том самом проекте, который был начат здесь. Его кульминацией станет надежная современная структура, способная реализовать некоторые серьезные возможности приложений и обеспечить целостный подход к разработке полного стека.

Дополнительные сообщения