Как построить Single Page Application на ASP.NET?

Question

[Илья Трифонов]

Пытаюсь найти информацию в интернете, как строить одностраничные приложения на ASP.NET. А конкретно, какую технологию использовать: ASP.NET MVC или ASP.NET Web API?

Как я понимаю, в первом случаем есть два варианта:

• использовать Razor как основной "фреймворк" и шаблонизатор (без использования сторонних JavaScript-фреймоворков) - рендерить нужный кусок страницы на сервере и отдавать клиенту по запросу готовый html (минус подхода в том, что это занимает дольше времени из-за объема передаваемых данных, и сама страница рендерится на сервере, а не на клиенте, как принято в SPA)
  
• либо возвращать только json с нужными данными, а саму страницу строить каким-нибудь Knockout или Angular (зачем тогда нужны будут Views (.cshtml-страницы) и Razor)
  

В случае использования ASP.NET Web API:

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

В этом случае, как я понимаю, будет два обособленных приложения: проект Web API и клиент написанный на чем угодно. Но это теперь ведь нарушает идеологию Web API. Сколько мне таких запросов нужно будет объявить, чтобы заставить это приложение работать. Мне кажется неправильным строить всю работу веб-приложения через такие вызовы. API - оно и на то API, чтобы давать тебе ограниченный функционал.

Помогите сделать выбор и вообще объяснить, как грамотнее построить SPA на ASP.NET. Сам склоняюсь к тому, чтобы использовать возможности Razor - делать запрос через JavaScript к нужному URL, получать готовый кусок HTML и подставлять его в нужно место на страницу.

Answer 1

[Зелимхан Бельтоев]

В принципе, вы описали два способа построения рендеринга SPA: рендеринг на сервере и на клиенте.

У первого подхода минус в большом объеме передаваемых данных, но плюс в простой отрисовке без нагрузки на клиенте (просто заменяем часть дерева DOM той, что пришла с сервера). У второго подхода плюс в меньшем объеме передаваемых данных, но минус в большей манипуляции с деревом DOM, что может сказаться на отзывчивости страницы. Но, например, React и Angular на данный момент работают с так называемым "теневым" или "виртуальным" деревом DOM, когда дерево строится в памяти и просто заменяется, так что второй минус, в принципе, уже и не минус, если использовать эти инструменты.

Ещё есть изоморфный подход к построению SPA: при первом запросе страница рендерится на сервере и отдаётся клиенту, после чего в фоне подгружаются скрипты и дальше все отрисовывается на клиенте, сервер отдаёт только JSON.

Для ASP.NET Core есть готовые шаблоны проектов. Достаточно всего пары команд для создания, например, проекта на основе Angular:

dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
cd <project_folder>
dotnet new angular

Подробнее здесь: https://blogs.msdn.microsoft.com/webdev/2017/02/14...

Comments

[Илья Трифонов]

ASP.NET Core кажется очень интересным. Я про него читал не так давно. Вот только меня смутило, что он пока еще не совсем стабильный. И каковы его перспективы вообще? Есть ли смысл в более глубоком его изучении и отказе от классической версии ASP.NET? А так да, построить SPA на нем проще, как выяснилось.

[Зелимхан Бельтоев]

Илья Трифонов: с таким же успехом можно построить SPA и на классическом ASP.NET MVC. Для него тоже есть такие шаблоны проектов.
Core не лишен багов, но довольно-таки успешно используется у нас в продакшене, да и личные проекты делаю на нём

[Илья Трифонов]

Зелим Бельтоев: скажите, вас не затруднит ответить еще на пару вопросов, раз вы работали с этой технологией? Например, в Telegram побеседовать? Буду признателен. Мои контакты: @ilyatrifonov (Telegram), [e-mail].

[Зелимхан Бельтоев]

Илья Трифонов: не знаю даже, чего такого смогу сказать, чего не знает гугл, но, в любом случае, можете смело писать по любым вопросам (по теме, конечно же) по контактам в профиле

Answer 2

[Илья Трифонов]

В общем использовать ASP.NET MVC для SPA приложений - так себе идея. Самая идеальная связка (в окружении ASP.NET) - ASP.NET Core Web API + отдельный Angular/React проект, который умеет собираться в папку wwwroot Web API проекта для продакшена. Конкретно такой вариант реализации обсуждался вот здесь. Вкратце: создаете Web API проект (где держите запросы, которые будут отдавать или записывать нужные данные) и создаете Angular/React/ЛюбойДругойФреймворк проект, который полностью отвечает за веб-интерфейс; настраиваете прокси для запросов (чтобы дергать API методы с отдельного проекта во время разработки); учите ваш сборщик собирать проект в папку wwwroot; профит:). В итоге имеем два проекта, которые во время разработки общаются с двух разных портов, а в продакшене один проект, который открывает страничку index.html со всей логикой из wwwroot.

Answer 3

[Алексей Лебедев]

У нас так:
1) получаем страницу html
2) она грузит JS скрипты
3) они обращаются к ashx - которые возвращают json
4) из json мы генерируем код HTML, на клиенте.

Как вариант генерировать код HTML на сервере.