Главная
Блог разработчиков phpBB
 
+ 17 предустановленных модов
+ SEO-оптимизация форума
+ авторизация через соц. сети
+ защита от спама

AngularJS vs IML

Anna | 17.06.2014 | нет комментариев
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, где применяя больше сильные и подходящие языки, дозволено избежать усложнения.

 

Источник: programmingmaster.ru

Оставить комментарий
Форум phpBB, русская поддержка форума phpBB
Рейтинг@Mail.ru 2008 - 2017 © BB3x.ru - русская поддержка форума phpBB