Subj: Silverlight как основа для построения для Enterprise Web UI.

В данном посте я хотел бы поделиться своим, как мне кажется, интересным опытом использования Silverlight как основы для построения Web интерфейса Enterprise приложений.

Около года назад, одновременно с очередной вехой в развитии одного из наших проектов возник вопрос – а может ли пользовательский интерфейс, базирующийся исключительно на “блестящем” Silverlight эффективно заменить классический подход в веб разработке – DHTML/CSS/ASP.NET/Ajax. На тот момент попытка поиска готовых примеров не привела к успеху. Менеджер проекта, будучи человеком опытным, опасался тратить значительный бюджет и стартовать разработку новой версии системы без хорошей уверенности в конечном результате.

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

Начали мы с формирования того, что по басурмански модно называется design goals.

Дизайн-цели прототипа
В рамках разработки прототипа были выписаны следующие цели:
— Разработка концепции интуитивно понятного и удобного пользовательского интерфейса. Кривая обучения и привыкания к новому UI должна быть максимально эффективной.
— Модульная архитектура: динамическая подгрузка требуемых сборок UI и бизнес логики.
— Поддержка больших объемов информации в списках: сотни тысяч записей в широких таблицах.
— Поддержка сложных форм ввода: одновнеменное присутствие сотен полей связанных с разными типами данных.
— Поддержка загрузки файлов больших размеров: до 2-х гигабайт.
— Единообразная обработка ошибок и логирование.
— Принципиальное отсутствие формирования каких-либо SQL запросов на стороне Silverlight клиента.
— Поддержка многоязычности
— Поддержка RichText и HTML редакторов
— Интеграция MS Reporting Service
— Возможность простой интеграции с HTML интерфейсом других Web приложений путем внедрения незаметного для пользователя IFrame внутри Silverlight UI.
— Комплексная модель Security: вертикальная — на уровне сущностей и их атрибутов и горизонтальная — на уровне записей.
— Поддержка различных баз данных (MS SQL Server, Oracle)
— Ну и дабы оставаться всегда модными — поддержка скинов aka “look and feel”


Заранее хочу обмолвиться, что все вышеописанные цели были успешно достигнуты.

На момент начала разработки виделись как минимум следующие риски:
— Проблема утечки памяти. Не было гарантии, что Silverlight достаточно устойчив к длительной работе и мы не встретимся с проблемой нехватки памяти после многих часов непрерывной работы клиента.
— Производительность на наиболее распостраненной конфигурации компьютера. Было интересно посмотреть на скорость работы сложных UI компонент в сочетании с большими объемами данных.
— Отсутствие хорошего встроенного HTML редактора
— и многое другое ...

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


Разработка концепции пользовательского интерфейса

“Должно быть удобно, красиво, интуитивно понятно, просто; пользователь не должен теряться” –не переставали повторять себе эти тезисы думая о концепцции нового Silverlight UI. Многооконный vs. однооконный, как организовать навигацию – меню или дерево, где и как показывать список открытых форм, как обеспечить удобный возврат с формы на результаты поиска, где располагать команды, как организовать редактирование в списке, как единообразно выводить сообщения об ошибках и т.п.

Как результат длительных размышлений и дискуссий было принято решение придерживаться однооконного пользовательского интерфейса, немного похожего на MS Outlook 2007. Открытие форм было решено проводить по принципу стека – где пользователь всегда видит последовательность и имеет возможность вернуться к родительскому окну.

Итак вниманию уважаемой публики предлагается Online демо версию задуманного.
Вуаля:
www.fulcrumweb.com/int/framework/online-demo

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



В интерфейсе присутствуют следующие базовые элементы управления:
(1) Главное меню приложения. Обеспечивает доступ к общей функциональности – такой как смена языка, смена скина (сорри, дизайнер не привлекался, скоро исправимся) и выход из системы.
(2) Быстрый доступ к часто востребованным Refresh, Favorites, History
(3) Workspace – это один из элементов горизонтальной Security, позволяющий разграничить доступ к подмножествам записей в таблицах для различных пользователей.
(4) Имя текущего пользователя
(5) Кнопка выхода – всегда должна быть на виду
(6) Стек открытых форм. Пользователь может видеть всю историю открытия и имеет возможность вернуться на любой предыдущий шаг.
(7) Текущая секция навигации приложения
(8) Дерево навигации
(9) Название текущей формы
(10) Панель команд
(11) Команды уровня списка
(12) Страничная навигация
(13) Экспорт содержимого списка в XLS


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


Архитектура

Общая архитектура вырисовывалась достаточно однозначно. Несколько очевидных уровней: Silverlight клиент доступающийся через WCF к Application Server с бизнес логикой, который в свою очередь работает с базой данных через враперы, позволяющие абстрагироваться от типа конечной БД. Для убедительности приведу картинку:



Основой для ORM и быстрой генерации пользовательского интерфейса был взят как говорится “yet another Metadata driven framework” — наш внутренний ORM+UI Framework, который вот уже много лет использовался в WinForms и ASP.NET разработке и вызывал нервный тик у всех DotNet программистов компании от одного только слова – Metadata-aaa.
Вот наша любимая картинка на эту тему:



Полный исходный код
Здесь выложен полный исходный код Silverlight Framework-а вместе с компилирующимся Visual Studio solution.
Пробуйте, экспериментируйте, задавайте вопросы по делу, предлагайте новые идеи у нас на форуме www.fulcrumweb.com/fw_forum.

В отличие от Silverlight-a, ASP.NET и WinForms Framework-и изначально используются в коммерческих проектах и мы не планируем публиковать их.

Выводы
Если подытожить – результатом мы остались довольны. Основываясь на проведенной работе можем смело рекоммендовать Silverlight для построения интерфейса новых Enterprise приложений.

Что дальше
Ниже приведены дальнейшие направления нашей работы, надеемся, в скором времени результаты будут доступны на нашем сайте.
— Если community(Вы, уважаемые) проявите интерес к данной статье, то появится продолжение рубрики: более детальное описание архитектуры, обсуждения различных концепциц построения UI, организация инсталляций, описание различных performance тестов, дружбы с MS Azure и т.д.
— Улучшение “юзабилити” пользовательского интерфейса
— Импрувмент, оптимизация, баг фиксинг, и опять импрувмент, оптимизация, баг фиксинг....
— Поддержка Dashboard
— Deployment в рамках платформы MS Azure.
— Попытка реализации решения для эффективной интеграция с MS Office (возможный импорт/экспорт данных с MS Outlook через специальный plugin, не простая задача, но это требуется в рамках большинства enterprise проектов)
— Возможно интеграция с MS SharePoint

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

Большое спасибо!!!

P.S.
Заранее прошу прощения за бедное англоязычное описание и отсутствие обещанных на нашем сайте Tutorials. Процесс описания является исключительно внутренней(т.е. лишенной бюджета) инициативой компании. Надеюсь в течении следующего месяца появятся обещанные video tutorials и дополнительная документация.