AngularJS vs IML

disclaimer: сравнение не подразумевает поднятие “холивара”, а делает обзор задач, решаемых одним инструментом в сравнении с другим. Я не являюсь знатоком всех тонкостей angularJs, но прочитав 10 статьей обзора этого инструмента, привожу альтернативный пример решения тех же самых задач на IML.

Что будем сравнивать ?

• Controller
• Inheritance
  примечание: отсутствует в IML
• Accessing server
• Push data
• Submit form
• Template
• Promises
  примечание: отсутствует в IML и может быть полезным только при работе со сторонними сервисами, а так решается все с помощью продуманного выбора данных для возврата.

Я выбрал те возможности, которые имеют смысл, потому что в рамках asp.net mvc пользу в перемененных, константах, а также в поддержке локализации не вижу.
примечание: далее часто будет учитываться то, что разработка проходит в рамках asp.net mvc

Как будем сравнивать ?

Методика очень простая, привожу листинг AngularJS ( View и Js ) и IML ( только View ) варианта, далее аргументирую чем же IML лучше. Я буду выделять только плюсы, но буду рад увидеть и отрицательные стороны IML в комментариях, поэтому все свои замечания можно высказать.

Controller

Angular JS View

<div ng-controller="angularController"> <button ng-click="sayHello()">Say</button> </div> 

Angular JS

app.controller('angualrController', function ($scope) {   $scope.sayHello = function(){       alert('Hello')     }  }); 

IML

@(Html.When(JqueryBind.Click)       .Do()       .Direct()       .OnSuccess(dsl => dsl.Utilities.Window.Alert("Hello"))       .AsHtmlAttributes()       .ToButton("Say")) 

Чем лучше :

• Поведение и разметка вместе
  примечание: многим данный момент покажется спорным, из-за того, что логика усложняет работу верстальщикам страниц, но в рамках asp.net mvc, C# код во View ( cshtml ) неотъемлемая часть и поэтому те преимущества, которые можно получить полностью перекрываю довольно таки абстрактную модель разработки логики отдельно от разметки.
• Поддержка Initilesence
  примечание: атрибуты AngularJs не являются стандартом html, поэтому подсветки синтаксиса или авто-дополнения не будет, а IML это C# библиотека.
• События представляют флаги
  примечание: упрощает группировку, когда надо продублировать действия для другого события When(JqueryBind.Click | JqueryBind.Focus)
• Управлением поведением события ( Prevent Default, Stop Propagation)
  примечание: AngularJS позволяет управлять этим в рамках метода контроллера, но IML включает это как часть общей схемы

Accessing Server

Серверный код

public ActionResult Get(GetProductByCodeQuery query) {  List  vms = dispatcher.Query(query);  return IncJson(vms); // for AngularJs need use Json with AllowGet } 

примечание: серверная часть одинакова, как для AngularJS, так и для IML

Angular Html

<div ng-conroller="productController">  @Html.TextBoxFor(r => r.Code)  <label>{{model.Name}}</label>  <button>Get name</button> </div> 

Angular Js

kitchen.controller('productController', function ($scope, $http) {   $scope.get = function(){     $http.get({                 url:'product/get',                 params:{Code:$('[Name="Code"]').val()}               })           .success(function(data) {                $scope.Name = data.Name            });  } }); 

IML

@{ var labelId = Guid.NewGuid().ToString(); } @Html.TextBoxFor(r=>r.Code) @(Html.When(JqueryBind.Click)   .Do()   .AjaxGet(Url.Action("Product","Get",new {                        Code = Html.Selector().Name(r=>r.Code)                       })   .OnSuccess(dsl => dsl.WithId(labelId).Core().Insert.For(r=>r.Name).Text())   .AsHtmlAttributes()   .ToButton("Get name")) 

примечание: при построение url, можно использовать в качестве Routes не только анонимный объект, но и типизированный вариант Url.Action(“Product”,”Get”,new GetProductQuery() { Code = Html.Selector().Name(r=>r.Code) })

Чем лучше:

• Типизация на всех этапах
  
  • Url – адрес в AngularJs строится без серверной части, что не позволяет учитывать route и отсутствие возможности перейти ( переименовать ) в Action из кода.
    примечание: по скольку руководство по AngularJs рекомендует выносить JavaScript код во внешний файл, то по этой причине не получится использовать серверные переменные в рамках js кода.
  • Query – AngularJs не связан с серверной моделью и не позволяет получить схему модели, что как и в случае с Url не позволяет использовать инструменты для переименования и go to declaration
    примечание: в случаи с IML, если мы переименуем поле Name или Code в GetProductQuery, то изменения отразятся и на клиентскую часть, но для AngularJs придется дополнительно заменить {{model.Name}} и $(‘[Name=«code»]‘) на новые значения.
  • Selector – для указания параметров запроса в рамках IML можно использовать мощный инструмент для получения значений из Dom ( hash, cookies, js variable and etc ) объектов

• MVD

В Incoding Framework можно обойтись без написания дополнительных Controller и Action если в качестве url применить MVD

Url.Dispatcher().Query(new GetProductQuery() {Code = Html.Selector().Name(r=>r.Code)}).AsJson() 

Push data

Серверный код

public ActionResult Add(AddCommand input) {  dispatcher.Push(input); return IncJson(); // for AngularJS need use Json() } 

примечание: серверная часть одинакова, как для AngularJS, так и для IML

Angular View

<div ng-controller="productController">   @Html.TextBoxFor(r => r.Name)    @Html.CheckboxFor(r => r.IsGood)   <button ng-click="add"> Add </button> </div> 

Angular JS

kitchen.controller('productController', function ($scope, $http) {  $scope.add = function(){     $http({        url: 'product/Add',        method: "POST",        data: {               Name : $('[name="Name"]').val(),              IsGood : $('name="IsGood"]').is(':checked')              }          })       .success(function(data) { alert('success') }); }); 

IML

@Html.TextBoxFor(r=>r.Name) @Html.CheckboxFor(r=>r.IsGood) @(Html.When(JqueryBind.Click)       .Do()       .AjaxPost(Url.Action("Product","Add",new {                                                  Name = Html.Selector().Name(r=>r.Name),                                                  IsGood = Html.Selector().Name(r=>r.IsGood)                                                }))       .OnSuccess(dsl => dsl.Utilities.Window.Alert("Success"))       .AsHtmlAttributes()       .ToButton("Add")) 

Чем лучше:

• MVD
  как и в предыдущем примере когда мы делали Query, в Incoding Framework можно выполнять push без написания Action
  

  Url.Disaptcher().Push( new {                                    Name = Html.Selector().Name(r=>r.Name),                                    IsGood = Html.Selector().Name(r=>r.IsGood)                             }) 

• Selector абстрагирует от способа получения значения
  примечание: на примере видно, что для получения значения из checkbox нужно использовать is(‘:checked’), но в IML этот момент не требуется указывать

Submit Form

Angular View

<div ng-controller="productController">    <form name="AddForm">     @Html.TextBoxFor(r => r.Name)     @Html.CheckboxFor(r => r.IsGood)      <input type="submit" value="save"  ng-submit="submit" />   </form> </div> 

Angular JS

controller('productController', function ($scope, $http) {  $scope.submit = function(){     $http({        url: 'product/Add',        method: "POST",        data: angular.toJson($scope.addForm)         }).success(function(data) { alert('success') }); }); 

IML

@using(Html.When(JqueryBind.Submit)            .DoWithPreventDefault()            .Submit()            .OnSuccess(dsl => dsl.Utilities.Window.Alert("Success"))            .AsHtmlAttributes()            .ToBeginForm(Url.Action("Product","Add")))  {     @Html.TextBoxFor(r=>r.Name)     @Html.CheckboxFor(r=>r.IsGood)     <input type="submit" value="add">  } 

Чем лучше:

• Отправка формы в одну строку
  примечание: angularJs работает с формой точно так же, как и с обычным ajax запросом, что требует указания параметров Url, Type, Data

Template

Серверный код

public ActionResult Fetch() {    var vms = new List()      {       new PersonVm(){ Last= "Vasy", First = "Smith", Middle = "Junior"},       new PersonVm(){ Last= "Vlad", First = "Smith", Middle = "Mr"},      };   return IncJson(vms); // for angular need use Json with AllowGet } 

примечание: серверная часть одинакова, как для AngularJS, так и для IML

Angular Template

<script id="person.html" type="text/ng-template"> {{person.last}}, {{person.first}} {{person.middle}} </script> 

Angular View

<div ng-controller="productAddForm">   <div ng-repear="person in persons" ng-template="person.html">      </div> </div> 

Angular JS

app.controller('personController', function ($scope,$http) {    $scope.refresh= function(){       $http.get('person/fetch', function(data){                            $scope.Persons= data        });    }  }); 

IML Template

@{     var tmplId = Guid.NewGuid().ToString();     using (var template = Html.Incoding().Template(tmplId))     {       using (var each = template.ForEach())       {  @each.For(r=>r.First),@each.For(r=>r.Middle),@each.For(r=>r.Last) }     } } 

IML View

@(Html.When(JqueryBind.InitIncoding)  .Do()  .AjaxGet(Url.Action("Personal","Fetch"))  .OnSuccess(dsl => dsl.Self().Core().Insert.WithTemplate(tmplId.ToId()).Html())  .AsHtmlAttributes()  .ToDiv()) 

Чем лучше :

• Опять типизация
  примечание: Incoding template требует больше кода для реализации типизированного синтаксиса, но это окупается при дальнейшей поддержке
• Один template для одного или многих объектов
• Замена template engine
• Поиск template по Selector, что имеет больше возможностей ( ajax, cookies and etc )
• Cache
  AngularJs имеет механизм работы с Cache, но с очень важными отличиями
  
  • Требует настройки для каждого template отдельно
    

    myApp.run(function($templateCache) {   $templateCache.put('templateId.html', 'This is the content of the template'); }); 

  • Не хранится между сессиями
    примечание: Incoding Framework сохраняет пре-компилированную версию template в local storage, что позволяет после первого прохода пользователем все последующие обращения к template брать сразу из local storage.

В чем же общие преимущество:

• Да, да и снова это типизация – это достигается за счет использования C# на всех этапах ( template, client scenario and etc ) разработки
• Один язык для backend и frontend — разработчик знающий C# может без проблем освоить IML и далее вызывать свои Command и Query на клиенте

Вывод: AngularJs разворачивает mvc архитектуру на клиенте, что с одной стороны позволяет структурировать код, но так же добавляет дополнительные проблемы в поддержке. Разработчик asp.net mvc имеет серверную реализацию mvc, где применяя более мощные и подходящие языки, можно избежать усложнения.