AngularJs vs IML 17

Article3_Medium

disclaimer: contrasting does not mean breaking out a “Holy War”, but presenting an overview of the tasks performed using one instrument as compared to the other. Available source code  and live demo IML TODO ( like are MVC TODO ).                                                                                                        

What are we going to compare ?

  • Controller
  • Inheritance

note: is missing in IML                                                                                                                                                      

  • Accessing server
  • Push data
  • Submit form
  • Template
  • Promises

Note: is missing in IML and may only be useful when working with outside services, otherwise a thoughtful selection of data to retrieve is used to solve the tasks.                                                                                                                                 

We have selected the options that make sense, since within the asp.net mvc frame we can see no use changing constants or localization support.

Note: the fact that the development is carried out within the asp.net mvc frame will be taken in to account.

The way we are going to compare ?

The methodology is very simple, here is the data sheet of AngularJS ( both View and Js ) and IML (View only ) variants with further reasoning why IML is better. We are going point out the advantages but will be glad to see all the IML drawbacks as well in the comments, so any of your considerations are welcome.

 

Controller

Angular JS

View

JS

IML

Why is it better :
  • Behavior and marking together

Note : this may seem disputable to many, since logics complicates the webpage designer’s work, however C# code in the View ( cshtml ) is an integral part within the asp.net mvc frame, so the advantages that may be received compensate quite an abstract model of developing logics separately from marking.

  • Initilesence support  

Note: AngularJs attributes are not standard html, therefore there will be no syntax highlighting or code completion,while IML is a C# library.

  • Events represent sentinels

note: grouping is simplified when it is necessary to repeat the actions for another event When(JqueryBind.Click | JqueryBind.Focus)

  • • Control over the event behavior ( Prevent Default, Stop Propagation)

Note: AngularJS allows controlling it within the controller method framework whereas IML includes it as an integral part of the layout.

Accessing Server

Accessing Server

AngularJS
View

JS

 IML

Note: when constructing the url, one may use as Routes not only anonymous object but also typed variant Url.Action(“Product”,”Get”,new GetProductQuery() { Code = Html.Selector().Name(r=>r.Code) })

Why is it better:
  • Typing at all stages
    • Url – address in AngularJs is built without server compound, which prevents from taking route into consideration or to pass into Action from the code.

Note: one can’t use server variables under js code, since AngularJs manual recommends to put JavaScript code into a separate file.

    • Query – AngularJs is not connected to the server model and does not let to get the scheme model which , similarly to the Url, doesn’t allow using tools to rename or go to declaration.

Note: In case of IML, if we rename the member variable Name or Code as GetProductQuery changes will affect the client part as well, for AngularJs however {{model.Name}} and $scope.Name shall also be changed for new values.

    • Selector – to indicate the inquiry parameters within IML one may use to use the powerful tool to obtain values from Dom (hash, cookies, js variable and etc) objects
  • MVD 

In Incoding Framework one may do without writing supplementary Controller and Action when using MVD

Push data

Server code

 Note: the server part is the same for both AngularJS and IML

Angular
View

 JS

IML

Why is it better:
  •  MVD 

As in the previous example when we were making Query, in Incoding Framework pushmay be performed without writing Action.

  •  Selector abstracts from a way of obtaining value

Submit Form

Angular
View

JS

 IML

Why is it better:
  • Form sending in one line

note: angularJs works with the form in the same way as with an ordinary ajax query, which demands stating Url, Type, Data parameters.

  • Html Helper 

 note: for understand power full Html helper need compare inc-todo and inc-refactor-todo

 

Template

Server code

 Note: server part is the same both for AngularJS and IML.

Angular JS
Template

View
JS

IML
Template

View

Why is it better :
  • Typing again

Note: Incoding template demands more coding for typed syntax implementation but this is compensated with further support.

  • •One template for a single or multiple objects.
  • Template engine replacement.
  • Template search on Selector, which has more options ( ajax , cookies and etc )
  • Cache ( more )

AngularJs has its own mechanism of Cache processing, but there are significant differences.

    • Each template has to be fixed (adapted)separately

    • Isn’t stored from session to session (isn’t stored between sessions)

Note : Incoding Framework stores template pre-compiled version in local storage, thus allowing the user to address directly to the local storage after pre-compiling.

So, what are the common advantages:

  • es, it’s typing again – achieved by using C# at all development stages ( template , client scenario and etc )
  • One language both for backend and frontend – developer skillful in C# can easily master IML and subsequently fetch Command and Query on the client.

conclusion: AngularJs expands mvc architecture on the client, thus allowing to structure the code on one hand, but on the other hand causes more support problems. asp.net mvc developer has a server mvc implementation, where complications can be avoided due to the use of more powerful and suitable languages.

Vlad Kopachinsky

I am a Senior developer at Incoding Software in Russian Federation. I created the Incoding Framework for rapid development

More Posts - Website - Twitter - Facebook - LinkedIn

17 thoughts on “AngularJs vs IML

  1. Shaddix 27.02.2014 03:09 PM

    Безусловно, IML дает очень удобные шорткаты для типовых действий, для отправки форм, что и требуется во многих “простых” случаях.
    Однако основное назначение Angular – построение сложных клиентских приложений с использованием MVVM.

    В случае же IML, если я правильно понимаю, вы предлагаете при изменении модели перерисовывать view на сервере(asp.net mvc). Это мне слегка напоминает подход WebForms, когда на каждый клик кнопки происходил серверный вызов.

    Простейшим и типичным примером Angular-приложения может служить что-то вроде:

    Привет, {{model.Name}}
    Где значение “Привет, ХХХ” динамически обновлялось бы при вводе имени. Может ли это IML?

    Мне кажется, что если бы сравнение проходило с JS-шаблонизаторами (Mustache, handlebars, etc), то оно было бы более корректным. Но даже в этом случае сравнивались бы шаблонизация на клиенте и на сервере, а это принципиально разные вещи.

    • Vlad Kopachinsky 27.02.2014 03:21 PM

      Где значение “Привет, ХХХ” динамически обновлялось бы при вводе имени. Может ли это IML?

      Конечно IML это может, вот рабочий код.

      @{ string labelId = Guid.NewGuid().ToString();}
      @(Html.When(JqueryBind.KeyPress)
      .Do()
      .Direct()
      .OnSuccess(dsl => dsl.WithId(labelId).Core().Jquery.Manipulation.Text(Selector.Jquery.Self()))
      .AsHtmlAttributes()
      .ToInput(HtmlInputType.Text, ""))

      Мне кажется, что если бы сравнение проходило с JS-шаблонизаторами (Mustache, handlebars, etc), то оно было бы более корректным

      Template это только одна часть IML, по факту тот же hanldebars используется для построения, но это не основная работа IML, можно убедится в этом на примере do, action, insert

      Но даже в этом случае сравнивались бы шаблонизация на клиенте и на сервере, а это принципиально разные вещи.

      не совсем понял вопрос, потому что IML выполняет template на клиенте, client template

      В случае же IML, если я правильно понимаю, вы предлагаете при изменении модели перерисовывать view на сервере(asp.net mvc)

      запросы идут по ajax, так что ничего перерисовывать не надо.

      Это мне слегка напоминает подход WebForms, когда на каждый клик кнопки происходил серверный вызов.

      А разве AngularJS не используется Ajax для вызова сервера? Вы можете делать Direct и тогда это будет просто обработчик на клиенте.

      • Shaddix 28.02.2014 03:14 AM

        не совсем понял вопрос, потому что IML выполняет template на клиенте

        Спасибо за указание, я действительно упустил, что IML включает “клиентскую” шаблонизацию. Ваша реализация весьма любопытная, возможность использования разных js-шаблонизаторов “под капотом” действительно удивила.

        Было бы, конечно, совсем замечательно, если бы сохранился синтаксис Razor 🙂 Ваш dsl необходимо изучать, с ходу он не совсем понятен.

        Конечно IML это может, вот рабочий код.

        Если продолжить логику, то AngularJS в принципе не нужен, и можно везде использовать JQuery 🙂
        Я думаю, вы тоже понимаете, что чем больше становится клиентской логики, тем более сложным и непрозрачным становится “ручное” манипулирование DOM’ом.
        Конечно, в простых случаях можно (и нужно) обойтись jquery, и IML в этом случае также справится. Для сложных и придуман Angular, и здесь IML проигрывает (что неудивительно, IML – фреймворк более общего назначения, что ли).

        В целом, основным минусом IML мне кажется как раз попытка “избавиться” от js. Конечно, это дает свои плюсы – строгую типизацию, например. Но и минусы (по сравнению с использованием JS) – инвестиции в изучение, проблемы в “сложных” сценариях.
        В этом плане просматривается параллель с тем же TypeScript – за ним стоит Майкрософт, а все равно внедрение в рынок очень небыстрое.

        • Vlad Kopachinsky 28.02.2014 05:17 AM

          Было бы, конечно, совсем замечательно, если бы сохранился синтаксис Razor 🙂

          Razor, кроме символа “@” особо ничего своего не имеет, потому что по факту Вы пишите C#.

          Ваш dsl необходимо изучать, с ходу он не совсем понятен.

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

          Если продолжить логику, то AngularJS в принципе не нужен, и можно везде использовать JQuery

          Согласен, чтобы построить сложное приложение ( не обязательно SPA ) на клиенте, то написанием скриптов на Jquery сложно (а ещё сложнее поддерживать), но разворачивая MVC или MVVM мы тоже усложняем код. Разница между IML и Jquery в том, что в первом из коробки идет набор инструментов для решения задач, а также плотная интеграция с серверной частью, которая позволяет поддерживать типизацию на всех ( ниже будет пример ) этапах.

          Я думаю, вы тоже понимаете, что чем больше становится клиентской логики, тем более сложным и непрозрачным становится “ручное” манипулирование DOM’ом.

          А разве в AngularJS не приходится работать с DOM (получить Val у элемента, скрыть и т.д.) средствами Jquery?

          Конечно, в простых случаях можно (и нужно) обойтись jquery, и IML в этом случае также справится.

          Мы выполнили десятки сложных проектов на IML, вот к примеру

          Для сложных и придуман Angular, и здесь IML проигрывает (что неудивительно, IML – фреймворк более общего назначения, что ли).

          Хорошо, приведу пример IML, а Вы если будет время переделайте ( если интересно, то я могу переделать Ваш пример AngularJs на IML ) его на AngularJS и сравним.

          @{
          string urlAuthorize = Url.Dispatcher()
          .Query(new IsAutorizeUserQuery
          {
          UserId = Selector.Incoding.Cookie("UserId")
          })
          .AsJson();
          }
          @(Html.When(JqueryBind.InitIncoding)
          .Do()
          .AjaxGet(urlAuthorize)
          .OnSuccess(dsl => dsl.Self().Core().Trigger.Invoke("SignIn")
          .If(builder => builder.Data(response => !response.IsHas)))
          .When("SignIn")
          .Do()
          .AjaxGet(Url.Dispatcher().AsView("~/Views/Admin/Account/SignIn.cshtml"))
          .OnSuccess(dsl => dsl.WithId(GlobalSelector.DialogId)
          .Behaviors(inDsl =>
          {
          inDsl.Core().Insert.Html();
          inDsl.JqueryUI().Dialog.Open(options => options.Title = "Sign In");
          }))
          .AsHtmlAttributes()
          .ToDiv())

          Пример проверяет авторизирован ли пользователь и если нет, то показывает Dialog, в котором View Sign In, стоит отметить плюс IML в том, что не надо искать логику по всему проекту. Разметка в комментариях конечно представлена не очень, по этом лучше перенести в Visual Studio ( в любой cshtml файл )

          минусы (по сравнению с использованием JS) – инвестиции в изучение, проблемы в “сложных” сценариях.

          1. инвестиции в изучение – AngularJS не требует изучения их директив и разметки? IML это C# библиотека, что позволяет нажать “ctrl + space” и увидеть, что можно делать, скажем тот же AngularJS не имеет ( ну по крайней мере без дополнений ) подсветки синтаксиса.
          2. проблемы в “сложных” сценариях – мне кажется Вы рано начали судить о возможностях IML, особо не изучив. Я понимаю, что это требует время, поэтому вот видео, которое демонстрирует самые ( их на самом деле в разы больше ) основные возможности IML.

          В этом плане просматривается параллель с тем же TypeScript – за ним стоит Майкрософт, а все равно внедрение в рынок очень небыстрое.

          Сходства никакого нет, потому что TypeScript это язык без функциональной части, то есть работа с Hash, Ajax, Dom да и вообще любое действие требует написания кода для решения задачи, а IML это framework для разработки.

          P.S. Спасибо за комментарии, я всегда рад хорошей аргументированной дискуссии. Кстати напомню, что IML очень хорош в комплексе с остальными частями framework, например MVD

  2. Shaddix 08.03.2014 07:09 AM

    А разве в AngularJS не приходится работать с DOM (получить Val у элемента, скрыть и т.д.) средствами Jquery?

    нет, работать с jquery из контроллеров обычно нет необходимости.
    И пример Push Data мог бы на самом деле выглядеть как-то так:

    Add

    $scope.Form = @Model.ToJSON();
    $scope.add = function(){
    $http({
    url: 'product/Add',
    method: "POST",
    data: $scope.Form
    })
    .success(function(data) { alert('success') });
    });

    Пример, который ты привел на IML, конечно, развернется в нечто большее в случае Angular. В основном потому, что если мы имеем просто набор форм и их отправку, то в использовании Angular нет необходимости, это не тот кейс, для которого Angular создавался. Для аяксовой отправки форм действительно логичнее использовать либо собственные хэлперы (которые, в частности, есть и в IML), либо встроенные в MVC варианты от Майкрософт типа @Ajax.BeginForm. В параллельном использовании их и Angular нет ничего необычного.

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

    • Vlad Kopachinsky 08.03.2014 07:43 AM

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

      Может конечно я субъективен, но когда речь идет о фильтрации, то тут скорей предпочтительней сервер, который имеет много чего для оптимизации. Но, IML тоже имеет средства для фильтрации.
      @(Html.When(JqueryBind.Click)
      .Do()
      .Direct(new List {
      new PostCommand{CheckBox = true,TextBox = "Well"},
      new PostCommand{CheckBox = false,TextBox = "Bad"},
      })
      .Where
      (r => r.CheckBox == Selector.Jquery.Name(whereName))

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

      Чаще всего пайджниг или сортировка идет по все таблице, к примеру таблица в миллион записей, на вряд ли будет удобная для транспортировки на клиента .

      пример Push Data мог бы на самом деле выглядеть как-то так:

      Стоит заметить, что адрес ( url: ‘product/Add’ ) не поддерживает Asp.mvc routes ( а так же rename и т.д. )

      либо встроенные в MVC варианты от Майкрософт типа @Ajax.BeginForm.

      Я писал об этом

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

      P.S. IML это не набор хелперов, а полноценный декларативный язык.

  3. mark goldin 20.06.2014 04:35 PM

    So, you are saying that IML allows us to create SPA applications without JS. Well, how about UI specific functionality? What about using custom UI widgets? Do you have any samples for that?

    Thanks

    • Vlad Kopachinsky 20.06.2014 07:13 PM

      Do you have any samples for that?

      You can look sample application TODO MVC ( refactor version ) or at look other our repositories

      how about UI specific functionality?

      Sure, you are can use any jquery plugin.
      Actual 2 way :
      1. Use iml contrib ( Dialog , Datepicker and other JQuery UI )

      r.WithId(targetId).JqueryUI().Dialog.Open(options =>;
      {
      options.HideOnClose = true;
      options.Title = "Title";
      options.CloseOnEscape = true;
      options.Draggable = true;
      options.Show = JqueryShowOptions.Slow;
      });
      })

      2. Call jquery plugin

      r.Self().Core().Jquery.PlugIn("plugInName",new { Opt = 1, NextOpt = 2})

      What about using custom UI widgets?

      We are “package” our controll with C# extensions ( please look sample ).
      Sample usage

      @Html.Todo().Container(setting =>
      {
      setting.Id = containerId;
      setting.Url = Url.Dispatcher().Query().AsJson();
      setting.Tmpl = Url.Dispatcher()
      .Model(new GetTodoByClientQuery.Tmpl { FooterId = footerId })
      .AsView("~/Views/Home/Todo_List_Tmpl.cshtml");
      setting.DependencyId = footerId;
      })

      We are developing powerfull controll ( widjet ) Grid

      P.S. Let me know if you have any question or suggestion. Thanks

  4. mark goldin 20.06.2014 07:19 PM

    But with Angular I can use UI libraries open source or commercial, it’s not as easy but very possible. Seems like that is not an option with IML. Am I correct? Do you have any plans on that?

    Thanks

    • Vlad Kopachinsky 20.06.2014 07:29 PM

      IML have ability call JavaScript function or eval code

      dsl.Self().Core().Eval("some code"); // eval("some code")
      dsl.Self().Core().Call("name",Selector.Jquery.Id("id")); // eval("name($('#id').val())
      dsl.Self().Core().Jquery.Call("name"); // $(this.self).name()

      dsl.Self().Core().Jquery.PlugIn("name",new { Color = "red" }) // $(this.self).name({color:"red"})
      dsl.Self().Core().Name("red") // C# extensions as alternative above sample

  5. mark goldin 20.06.2014 07:35 PM

    Would it be possible to put together a small working sample? I am just starting looking into IML and it’s hard for me to understand how the provided code works.

    Thanks

  6. mark goldin 20.06.2014 08:07 PM

    <and more content but only by Russian language
    Did you mean documentation in Russian?

  7. mark goldin 20.06.2014 09:14 PM

    I tell you what I need. I am developing web based applications. Not web sites as some of your live demos show. The UI is a crucial part of such applications because that is what actually creates positive user experience. That means the way application looks is as important. So for me, using third party UI components is a must. I would really appreciate an example of using such component. for example, jQWidgets or dhtmlx. Or at least some guidelines of how to do it.

    Thanks

    • Vlad Kopachinsky 21.06.2014 09:18 AM

      Ok let’s look scenarios.
      case 1:Apply jquery plugin for any controls ( input,checkbox,select and etc ) after load element on DOM.
      solution:

      @(Html.When(JqueryBind.IncInsert | JqueryBind.InitIncoding)
      .Direct()
      .OnSuccess(dsl =>
      {
      dsl.WithClass("dropdown-toggle").Core().Jquery.Plugin("dropdown");
      dsl.WithClass("carousel").Core().Jquery.Plugin("carousel");
      // some code
      })
      .AsHtmlAttributes()
      .ToDiv())

      case 2: invoke IML from 3d-party library
      JavaScript code on external files

      function InitScheduler(instanceId,editBtnId)
      {
      scheduler.init(instanceId, null, "week");
      scheduler.attachEvent("onEventChanged", function(event_id, event_object) {
      GetUserData(event_id);
      $('#'+ editBtnId).trigger('incoding');
      return true;
      });
      }

      IML code from View ( razor cshtml )
      @{
      var instanceId = Guid.NewGuid().ToString();
      var editBtnId = Guid.NewGuid().ToString();
      }
      @(Html.When(JqueryBind.InitIncoding)
      .Direct()
      .OnSuccess(dsl => dsl.Self().Core().Call("InitScheduler",instanceId,editBtnId))
      .AsHtmlAttributes(new {id = instanceId})
      .ToDiv())
      @(Html.When(JqueryBind.None)
      .AjaxGet(Url.Dispatcher().AsView("Dialog/Edit"))
      .OnSuccess(dsl =>
      {
      dsl.Self().Core().Insert.Html();
      dsl.Self().JqueryUI().Dialog.Open(options =>
      {
      options.Title = "Edit";
      });
      })
      .AsHtmlAttributes(new {id = editBtnId})
      .ToDiv())

      Summary : IML have ready many Jquery UI extensions as plugin to framework ( package to contrib ) and ability call/apply any jquery plugin. For integrated with 3d-party well way use trigger on IML element how demonstration on case 2.

      You are can self development ( guide ru ) plugin for dhtmlx like are JqueryUI().Dialog or JqueryPlugin().BlockUI.Block and etc.
      We are have article about extensions ( ru ) also.

      P.S. Let me take few days for publish source code with worked sample on github.

Leave a Reply