IML TODO

angular vs iml 2

disclaimer: this article is a rejoinder (that was highly critical on Habr) and fulfil a potential of IML on the example of popular app ToDo MVC.
Critic is not the word for the discussion concerning my previous article. It looked like an assault and there were unpleasant comments (ludicrous Top on the picture), moreover even impartial:

  • Code on AngularJs is no great shakes – difficult to disprove, although they are all from web-site and popular instruction
  • Weak examples – we stressed on the tasks, not on the scripts. But I agree that more complex decision fulfils a potential (I offered some our projects that are available on “open source”, but they were ignored)
  • Do not know AngularJs ? –  for obvious reasons it’s hurt the developers AngularJs
  • Topic JS – this is an grave error, because if you don’t use asp.net mvc it’s difficult to understand possibilities of typified TextBoxFor or other add-ons.

Why ToDo ?

In comments there were an offer to realize “Todo MVC” as an proof of IML possibilities. There is a result. First of all, in contrast to js framework, test-version doesn’t use as a container “local storage”, but use data-bases and source code. We will consider it more. In the process of realization I built the whole of logistics (basement computation, hiding elements and etc.) on the client, although on the tasks. It’s easier (sometimes necessary) to update elements “pointwise”, that with IML-code know how to compute and reflect themselves

Code review

Today we will not compare 2 variants of decision (in this case the volume of material will be very large). We’ll make a review of a code, which we’ll get in the realization “todo” app. I’ve mentioned above that in the IML realization is the server side, but in order to equalize the task for more objective comparison, we focus only on client’s side

What it consists of

The code was splited into 3 View

  • Index – main page ( actuallu it is single page )
  • Todo_List_Tmpl – a pattern for central list
  • Todo_Footer_Tmpl – – a pattern for building a basement with

Location in graphical form

Dangerous: further will be a lot of C#-code and the lack of JavaScript, so those who are nervous, please, calm down and don’t get scared at every “using(Html)”

The form for TODO adding

note: Anticipating phrases like “Hey, this is not serious, codes are much bigger, you need to copy everywhere, look at other people do it!!!” I’ve an argument – there are “ C# extensions ” which permit to wrap IML constructions. Further in the article I’ll give alternative variants of tasks decision (also “repository” on GibHub  with a revised code) using C# extensions

What is what?
  • When(JqueryBind.Submit) – indicate objective event
  • DoWithPreventDefault –  event behavior (cancel browser evaluator)
  • Submit – – send the form through ajax

note:  few comments on presented realization:

    • Url where to send the form is set in options ( not through attribute variable “action” at “form”
    • ClientId  can be derived as Hidden that on InitIncoding entered meaning from Cookies to call Submit with no parameters
  • OnSuccess – realize after successful submit finish
    • Trigger Incoding to containerId  – start the whole IML code for Container element (description below)

note: more than one “When” may be used that allows to contact with different events (with different IML code), because trigger Incoding starts all chains.

    • Form reset  – make a reset of form elements
  • AsHtmlAttributes – collect IML code in convenient for asp.net mvc (RouteValueDictionary)
  • ToBeginTag – – pack up getting attribute in the tag “form” ( work principle as Html.BeginForm)

note: Html.BeginForm may be used (“action”,”controller”,Post,iml.AsHtmlAttributes())

The form for TODO adding ( alternative variant )

note: code became smaller and the most important thing now you can expand method for concreate project needs (validation, redirect after submit and etc. )

Under hood



Note: Most of you are acquainted with asp.net mvc, but it is necessary to point out that in place of “usual” parameters, we propose anonymous method, that gets setting class.

Container

WHAT’S WHAT?
  • When(JqueryBind.InitIncoding | IncChangeUrl) – – specifies target events
    • InitIncoding – – works at first appearance of element on a page (doesn’t matter ajax or usually)
    • IncChangeUrl – – works at “hash” changing
  • Do – behavior of event
  • AjaxGet – indicate the url, which will be send to ajax request
    • ClientId – get the value from “cookies”
    • Type – get the value from “Hash Query String”
  • OnSuccess – realize after successful AjaxGet finish
    • Insert data to self by template – put in findings from request ( json ) through template ( Todo_List_Tmpl below) in current element.

Note: template can be got through any available Selector, ex. earlier Jquery.Id was basic but uploading on ajax is preferable

    • Trigger incoding to footerId –  start entire IML code for footer element (description below )
  • AsHtmlAttributes -collect IML code and set value containerId ( guid ) to Id attribute

note: the use of guid as Id vouch for unique of element of page, especially relevant for single page application

  • ToDiv – pack up getting attributes in the tag div

note: ToDiv is C# extensions over RouteValueDictionary, that’s why it is easy to write necessary variant

Container ( alternative way )

Note: in the future it’s necessary to add block ui or other actions, now you can do it centralize

Under hood



Footer

What’s what?
  • When(JqueryBind.None) – indicate target events
    • None – When allows to indicate any user’s event as a line “MySpecialEvent”, but experience has shown that for manu scripts one is enough.
  • Do – behavior of event
  • Direct – can be examined as bib of action that perform no actions, but can work with data
    • AllCount – get the number of objects with “toggle” class

noteе: enhancing Method ( in place of Length ) could be used to call any jquery method and to write C# extensions over JquerySelectorExtend

    • IsCompleted  – check up for tagged objects with “toggle” class

note: if opportunities of ready-made jquery selector are not enough, so you can use Selector.Jquery.Custom(“your jquery selector”)

    • CompletedCount – get the numer of tagged objects with “toggle” class

note: to get the JS function value:

  • OnSuccess – realize after successful finish of AjaxGet
    • Insert prepare data to self by template  – put in prepared data ( prepare ) from Direct through template (Todo_Footer_Tmpl below ) in the current element

note: before to put data in “prepare” fulfil selectors, that are in the fields.

  • AsHtmlAttributes – collect IML code
  • ToDiv – pack up getting attributes in the tag div

Todo List Tmpl

Template markup for todo list building

Note: back code is more than shown in the example (logic of elements is deleted). It’s made for comfortable explanation of template

What is what?
  • Html.Incoding().Template() –  open the context ( in the context of using) template building
  • template.ForEach() – start to iterate through elements ( in the context of using)
  • using(each.Is(r=>r.Active)) – start to iterate through elements ( in the context of using)
  • createCheckBox – anonymous function C# функция for making checkbox (description below)
  • each.IsInline(r=>r.Active,”completed”) – if after Active true so get back “completed”

note: there are also IsNotLine and IsLine.

  • each.For(r => r.Title) – depict the value of Title field

note: all accessing to fields happens on the base indicated model (Yep, I’m again about typification)

Other elements

Button del

What is what ?
  • When(JqueryBind.Click) – – indicate target event
  • Do – behavior of event
  • AjaxPost- indicate Url, which will be send to ajax request
    • Id– value from Todo
    • AssemblyQualifiedName – get the name of element type ( or another C# code )
  • OnBegin– take before the beginning of action (AjaxPost)

Note: of course it’s better to use OnSuccess, because may happen a mistake on the server( timeoutor something else ) and transaction will not complete because OnBegin works before a call of AjaxPost, but the TodoMVC examples on js framework use local storage ( which is faster than ajax) and that’s why I’ve dodged in order not to lose operation speed.

    • Remove closest LI   – delete the closest LI
    • Trigger incoding to footer id – start the whole IML code for element footer (description above)
    • Trigger none to toggle all – start IML code (only None chain) for element Toggle All (description below)

Note: if for both to call the same trigger, so it would be possible to use the following variant

  • AsHtmlAttributes – collect IML code
  • ToButton- pack up getting attribute in tag button

Note: ToButton allows to indicate contents, but in this case it’s not necessary because the picture installs through CSS

Button Del ( alternative variant )

Note: OnBegin take Action, that allows to scale easily your “extensions” instill in it IML. ( more examples further )

 

Under hood



note: as long Verb uses in some scripts, it’’ easy to make optional parameters. I check them on “null” and assign a value on default

 Checkbox Completed

note: as long Verb uses in some scripts, it’’ easy to make optional parameters. I check them on “null” and assign a value on default

What is what ?
  • When(JqueryBind.Change) – indicate target event
  • Do – – behavior of event
  • AjaxPost – indicate Url, which will be send to ajax request

Note: AjaxPost and AjaxGet is “denominate“ version of Ajax, which has many additional tuning OnBegin – take before the start actions (AjaxPost)

  • OnBegin – take before the start actions (AjaxPost)
    • Remove class on closest LI –  delete class “completed” at the nearest LI
    • Add class on closest LI  if self is true– add class “completed”

Note: now in IML doesn’t realized a possibility “else” , but in 2.0 version is planted

  • AsHtmlAttributes – collect IML code and install the value “toggle” to attribute “class”
  • ToCheckBox – pack up

Filter by type todo

Note: one more example how to realize anonymous functions in the context of “razot view”

What is what?
  • When(JqueryBind.InitIncoding) – indicate target event
  • Do – – behavior event
  • Direct – realize noting
  • OnSuccess – realize after successful finish

Note: there is no differences between “OnBegin” and “OnSuccess” for”Direct”, but OnError and OnBreak works in the same way as for others.

    • var type – declare a variable that we will use in expressions.
    • add class to self if IsFirst is true And type is Empty – add class if current element is the first and in “type” is empty
    • add class to self if type is current type – add class to current element if “type” is equal to argument typeOfTodo
  • When(JqueryBind.Click) – indicate target event
  • Do – behavior of event

Note: we don’t cancel behavior of hyperlink because we need the browser to update location

  • Direct – take noting
    • remove class – delete class selected at all A, that are in the nearest UL
    • add class to self – add class selected to the current element
  • AsHtmlAttributes – collect IML code and install attribute “href”

 

Filter by type todo ( alternative method )

 

Under hood



Absolute advantages !

The advantages of IML I’ve tried to show in the last article, but it wasn’t convincing, that’s why I will try again:

  • Typification – of course, each looks at typification from its own point of view. Somebody think that hier you have to write more codes (that’s right), others doesn’t have enough flexibility that is inherent to non-typification languages, but IML is first of all C#, so those developers who chose it, I think, will appreciate this advantage
  • Powerful extensions – in the article I gave some of them, but there are much more in practice. I give some more examples to put the words into action:
    • Drop down

примечание: OnInit принимает Action<IIncodingMetaLanguageCallbackDsl>, что позволяет легко масштабировать ваш extensions внедряя в него IML. 

    • Dialog

note: OnInit takes Action<JqueryUIDialogOptions>, that allows to scale easily your extensions instill in it IML.  

The list could be endless, but the main idea is that IML allows to perform any task, while html extensions solves a problem with design reuse.

  • Much more powerful extensions
    • Grid – build entirely on IML (documentation will be soon)

    •  Tabs – 

 Note: every developer who knows html extensions can build such element for his project needs

  • • The Work with hash – in this article was examined only on IncChangeUrl level, but we have:
    •  Hash.Fetch – put values from hash into ( sandbox ) elements
    •  Hash.Insert/Update – – put values into hash from elements
    •  Hash.Manipulate – allows delicately ( set/ remove by key ) tune current hash
    • AjaxHash – is an analog of Submit, not for form, but for Hash
  • The Work with Insert – – for TOSO realization I didn’t have to use, but in real projects it’s used everywhere
    • Insert Generic  – all the examples above were built on one model, but it’s often happens that scripts where findings are “containers”. In this case in Insert is an possibility to indicate with what part of model we work through For and also “template” for each its own

  • The Work with validation (server as a client)  – there are instrument for validation in may js framework, but IML has integration with server and backing any validation engine ( FluentValidation, standart MVC) with no necessary to write an additional code.
    • Код command

    •  Код view

 Note: handler OnError must be attached to the element that causes action ( submit , ajaxpost or etc )

  • Less scripts – with increase of project js framework demands lots of js files, but IML has fixed set of libraries (plug-ins not counted)
  • Typificated template – about typification by kind, but for template constructing it’s very important
  • template replace by engine – choose any of them, syntax is the same
  • Complex solution – IML is a part of Incoding Framework and in contrast to js framework we have full infrastructure (server/client/ unit testing ) for projects developing that is tightly integrated with each other

Conclusion

At realization of IML I’ve followed the rule: less updates to the page, I mean I recounted this all on the client, but in practice (of ours projects) often the weak part is server, because a lot of actions are impossible or preferable on client. For example

Impossible (because of productivity):

  • Paginated – of the base consists of hundreds of thousands of recordings, it’s wrong to deliver capacity on client
  • Order – the same reason
  • Where – the same reason
  • And other actions that connects with the data base

Difficult calculation on the base of values of fields (total amount of order including tax) could be not preferable. It’s better send on server an request (with values of fields) and put in results

 

Again IML variant

In the context of IML calculation could be solved by following ways:

  • Single value

  • Data set

I can continue to tell you about IML possibilities (and Incoding Framework) but the article as already long. That’s why those who want to learn more about our tool can find the materials in the Net. I understand to prove that IML is able to solve tasks not worse than popular js framework is rather difficult, but in the next articles I will make a review of autocomplete, Tree View, grid and other popular scripts realization, that will show more possibilities of our toll.

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

Leave a Reply