Программный стек для преобразования довольно большого настольного приложения в SPA

Мне нужны некоторые рекомендации для стека программного обеспечения, которое позволит мне разместить настольное приложение в Интернете. Поскольку оно должно выглядеть и работать как исходное приложение, насколько это возможно, оно, вероятно, должно быть приложением SPA. Задержки от 1 до 3 секунд для отправки формы HTML5 клиенту, вероятно, неприемлемы. Стилистика тоже важна.

Что я знаю

Оригинальное приложение находится в Winforms. Он использует метафору Tab и имеет около 10 вкладок. Каждая вкладка может иметь сводное представление, в котором отображается список записей, и подробное представление, в котором отображается конкретная запись. Большинство основных форм на вкладках — это CRUD, но некоторые из них имеют специфическое использование в рабочих процессах. Есть несколько отчетов о разнообразии 8 1/2 x 11. Уже существует некоторая форма уровня доступа к данным и уровня бизнес-логики, но пока нет веб-API.

В идеале я надеюсь приблизиться к качеству приложения WPF, но в HTML5 и CSS3.

Базовой инфраструктурой являются SQL Server и ASP.NET MVC, с которыми я уже знаком. Я полагаю, что мне нужно вытолкнуть скелетную инфраструктуру HTML5, а затем передать большую часть работы APP браузеру. Есть много движущихся частей, поэтому мне может понадобиться сгенерировать код для некоторых из них.

Ответы (2)

Вам нужно будет разбить этот следующий проект и рассмотреть несколько различных компонентов.

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

Начиная с пользовательского интерфейса и работая в обратном направлении:

  • Виджеты пользовательского интерфейса — вам понадобятся/хотите использовать какие-то предварительно упакованные элементы управления для ваших страниц HTML5. Да, вы можете написать свой собственный или просто использовать нативные элементы из HTML5. Но если вы привыкли к разработке Winforms и ориентируетесь на уровни качества WPF, вам подойдет предварительно упакованный продукт. Syncfusion и Telerik / Kendo — хорошие варианты для рассмотрения.

  • Фреймворк Javascript — вы захотите рассмотреть фреймворк, обеспечивающий эквивалентную парадигму MVVM, с которой вы привыкли работать из WPF. С этой точки зрения стоит рассмотреть AngularJS , EmberJS и ReactJS .

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

Что касается внутреннего API, я бы рекомендовал придерживаться ASP.NET MVC, поскольку вы сказали, что существующее приложение уже имеет это на месте. Есть альтернативы, но я не думаю, что на данный момент есть что-то, что заслуживает замены этой части вашего программного стека. При необходимости вы можете настроить ASP.NET MVC для предоставления служб в стиле REST.

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

Использование SPA упростит представление одной и той же (измененной) информации на вкладках, тогда как более традиционное веб-приложение будет иметь проблемы с сохранением этих локальных данных. BreezeJS может быть ответом на локальное сохранение, если вы решите, что вам нужна каждая вкладка как отдельная страница.

Я согласен с @GlenH7, но решил добавить к разговору, предложив вам стек, который я использую для своих веб-проектов/конверсионных проектов (поскольку многие из них, которые он упомянул, соответствуют моему списку).

Этот ответ разбит на 2 части.

Часть 1. Стек, который я использую:

Сторона клиента:

  • HTML5
  • JavaScript
  • CSS3 (через LESS)
  • AngularJS
    • ocLazyLoad для Angular
    • ui-маршрутизатор для Angular
  • ОТДЫХ/ОДАТА
  • BreezeJS (клиентская сторона — используется для извлечения данных)
  • SignalR (клиентская сторона — используется для отправки данных)
  • Bootstrap (отзывчивый макет, быстрый стиль)
  • Библиотеки компонентов — AngularUI и KendoUI

Средний уровень:

  • С#/ASP.NET
  • МВК 5+
  • WebAPI 2+ (веб-API ODATA для наших веб-сервисов)
  • EntityFramework 6+ (ORM для стандартизации доступа к базе данных)
  • MS Identity 2+ (Аутентификация и авторизация)
  • BreezeJS (серверная сторона)
  • SignalR (серверная сторона)

Серверная часть:

  • SQL-сервер

Инструменты разработки, поддержки и тестирования

  • Visual Studio 2013 (среда разработки)
  • GIT (Контроль исходного кода)
  • МЕНЬШЕ (см. CSS3 выше)
  • Gulp (скрипты сборки и автоматизация)
  • Web Essentials для Visual Studio (инструменты, облегчающие разработку, например LESS)
  • Бауэр (управление пакетами)
  • PhantomJS (тестирование)

Есть много причин, по которым мы выбрали то, что мы сделали для нашего стека. Например, BreezeJS хорошо работает с Entity Framework, который хорошо работает с SQL Server. Уберите один, и вы потеряете гораздо больше, чем просто один предмет. Так что вам решать, как упомянул @GlenH7, чтобы определить, что лучше всего подходит для вас.

Но поверьте мне, потребовалось время, чтобы сократить этот список так, как это сделали мы.

Что мы до сих пор не стандартизировали, так это механизм отчетности, который не сломит банк.

Есть несколько отличных библиотек для создания файлов DOCX, XLSX и PDF, но я чувствовал, что хочу большего. Предложения компаний, которые я рассматривал до сих пор (в произвольном порядке): stimulsoft , telerik , gemboxsoftware , devexpress , componentone .

Часть 2 - Ответы/комментарии на ваши вопросы:

"... оно должно выглядеть и работать как оригинальное приложение, насколько это возможно..."

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

Для этого вы можете взглянуть на что-то вроде ExtJS , поскольку они предлагают скин и набор компонентов, который (для меня) выглядит ближе к приложению на базе Windows. Почему я не использовал ExtJS? Вероятно, потому, что он не казался мне достаточно «угловым». Кендо был «достаточно близок» к рабочему столу для меня и моих клиентов, и у них есть официальная поддержка Angular (что важно).

"...Задержки от 1 до 3 секунд для отправки формы HTML5 клиенту, вероятно, неприемлемы..."

Сравнение времени загрузки предустановленного приложения с веб-приложением не совсем справедливо, однако с помощью кэширования и предварительной загрузки вы можете сделать это довольно близко (при условии, что соединение между пользователем и сервером хорошее). Преимущество Интернета заключается в том, что вы загружаете вещи только тогда, когда они вам нужны, и имеете к ним доступ, поэтому я бы рассматривал это как преимущество.

Как правило, приложения SPA загружаются все сразу, затем туда и обратно передаются только данные.

Используя что-то вроде ocLazyLoad, вы можете «динамически загружать» новые файлы html/javascript/css по мере того, как пользователь обращается к ним в первый раз (не выходя из вашего SPA). Как только «страница/модуль» загрузится, она будет кэширована, и ей не придется снова обращаться к серверу. Но если у вас не может быть никаких задержек при использовании веб-приложения, вы заранее получите большой удар. Если у вас все в порядке с этим, то вы должны быть в порядке.

Вы также можете запустить приложение с модулем по умолчанию (например, с панелью инструментов) и в фоновом режиме начать загрузку модулей, которые, по вашему мнению, они могут запрашивать (или просто загрузить их все). вялый в течение нескольких секунд, в то время как все продолжает загружаться.

Я бы также посмотрел на локальное хранилище браузера для кэширования данных (в BreezeJS, как упомянул Глен) - это должно ускорить начальную загрузку для пользователя, и вы можете обновить данные в фоновом режиме после запуска приложения.

Что ж, надеюсь, это поможет. Дайте мне знать, если у вас есть какие-либо вопросы или вам нужна дополнительная информация. Удачи в вашем начинании!