jRIApp — новый HTML5 фреймворк для создания интернет бизнес приложений

jRIApp — ещё один HTML5 фреймворк, созданный для разработки Web приложений, которые по своей функциональности мало чем уступают desktop приложениям.

Основное отличие от уже существующих фреймворков типа angularJS или emberJS, это наличие интегрированного с фреймворком сервиса данных, а также использование MVVM дизайн-архитектуры вместо наиболее распространенного в фреймворках такого типа MVC дизайна.
Клиентская часть написана на javascript, а серверная на C#.
Этот фреймворк опубликован на GitHub под MIT лицензией. Он включает демо-приложение написанное с использованием ASP.NET MVC4 и содержит документацию по его использованию.

Стиль приложений создаваемых с использованием jRIApp очень напоминает создание приложений с использованием Microsoft Silverlight с WCF RIA сервисом. Привязка к данным имеет схожий синтаксис — однонаправленная, двунаправленная, может использовать конвертер данных. Действия (action) можно привязывать через команды (command) к пользовательским элементам типа кнопки или гиперссылки.

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

 <div style="margin-top:40px;text-align:left; border:none;width:100%;height:15%">         <!--пэйджер-->         <div style="float:left;" data-bind="{this.dataSource,to=dbSet,source=VM.productVM}"                   data-view="name=pager,options={sliderSize:20,hideOnSinglePage=false}">         </div>          <!--вывод общего кол-ва и кол-ва выбранных записей -->         <div style="float:left; padding-left:10px;padding-top:10px;"> <span>Total:</span> <span data-bind="{this.value,to=totalCount,source=VM.productVM.dbSet}"></span>,   <span>Selected:</span> <span data-bind="{this.value,to=selectedCount,source=VM.productVM}"></span>          </div> 　　　　           <!--кнопка для добавления нового продукта-->         <button style="float:right;" data-bind="{this.command,to=addNewCommand,mode=OneWay,source=VM.productVM}">              + New Product         </button> </div> 

Шаблоны, также имеют схожий тип создания — в них исключается использование скрипта подобного циклам foreach, которые повторяют вывод кусков разметки в результирующий HTML документ. Эта функциональность в шаблонах прекрасно заменяется, тем, что каждый DOM элемент к свойствам которого осуществляется привязка к данным, на самом деле обертывается при создании привязки видом элемента (element view), который по сути может привязывать любую логику к HTML элементу. Таким образом jQuery плагин привязывает логику к HTML элементу, однако фреймворк делает это в декларативном стиле.

Пример небольшого шаблона:

<div id="stackPanelItemTemplate" data-role="template" class="stackPanelItem" >   <fieldset>     <legend><span data-bind="{this.value,to=radioValue}"></span></legend>      Time:      <span data-bind="{this.value,to=time,converter=dateTimeConverter,converterParam='HH:mm:ss'}"></span>    </fieldset>  </div> 

Помимо этого имеются уже готовые пользовательские элементы, интегрированные с компонентами для работы с данными, такие как — DataGrid, DataForm, StackPanel, ComboBox и др. Валидация данных проходит как на клиенте, так и на сервере и использует метаданные задаваемые на серверной стороне.

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