Disclaimer: The paper is not concerned with the revealing of drawbacks in jquery library, but shows alternative way of writing rich application by those C# developers who don’t know all javascript details.

Introduction

In recent times web applications’ design has become more complicated as a result of the intensive development of client scripts that, in turn, makes programmers, writing in such typed languages as C# or Java, learn the less safe javascript language which has the following problems:

Absence of OOP, which has replaced inheritance based on prototypes, absolutely differs from customary understanding of OOP

One error in script stops operation of all the web page

As a result there have appeared many solutions such as “wrapping” in typed language: telerik, jquery mvc, syncfusion and even alternative languages ( TypeScript , CoffeScript ), for writting javascript, that shows the interest of programmers to move to usual instrument of programming.

IML

Incoding Meta Language is a set of unified constructs for client scripting of any level of complexity via C#. The main difference of IML from such libraries as telerik is that it constitutes a set of low-level operations to build your algorithms, but at the same time it has a big amount of actuating instruments such as Jquery Dialog, Gmap and others. The difference of from TypeScript or CoffeScript is that all the IML constructs are built via C# and don’t require the knowledge of other languages.

By the example of three tasks we will try to show the opportunities of IML, comparing it to the alternative solutions in javascript.

Task 1

Statement: to execute an action (ajax post) by click of an element of html document

solution: Jquery

1

<button id="delEntity"> Delete </button>

1

2

3

$('#delEntity').click(function(){

$.post("controller/action",{id:$('#id').val()});

});

Drawbacks :

Too many string variables

Note: you can use variables inside the page, and then the script also is to be inside the page.

1

2

3

4

5

6

7

@{stringbuttonId=Guid.NewGuid().ToString();}

$(function(){

$('#'+'@buttonId').click(function(){

//some thing

});

})

The number of parameters will raise and that will correspondently enhance the number of errors and require more attention from a developer.

note: the serialize method will not solve the problem if values are stored in the following elements: cookies, query string, hash

Context element is separated from event handler. The main drawback of this approach is hiding of details of event handler’s work from the direct element which provoked this event.

note: the separation of logic from presentation gives a designer the opportunity to change styles regardless of programmer, but practice of using of css semantics and standardized html markup gives more effective result. (for example twitter bootstrap)

solution: IML

1

2

3

4

5

6

7

@(Html.When(JqueryBind.Click)

.Do()

.AjaxPost(Url.Action("action","controller",new{

id=Selector.Jquery.Id(r=>r.Id)

})

.AsHtmlAttributes()

.ToButton("Delete"))

Conclusion: The use of IML at this stage of task seems more difficult than similar decision in Jquery , but as the statement of a problem becomes more complex, the advantage of typed and unified syntax of incoding meta language will become more obvious.

Task 2

Statement: to execute an action (ajax post) by click of an element of html document only on the assumption of user’s approval (dialog).

solution: Jquery

1

<button id="delEntity"> Delete </button>

1

2

3

4

5

6

$('#delEntity').click(function(){

if(confirm('are you sure delete ?'))

{

$.post("controller/action",{id:$('#id').val()});

}

});

solution: IML

1

2

3

4

5

6

7

8

9

10

11

@(Html.When(JqueryBind.Click)

.Do()

.AjaxPost(Url.Action("action","controller",new{

id=Selector.Jquery.Id(r=>r.Id)

})

.OnBegin(dsl=>dsl.Self()

.Core()

.Break

.If(s=>s.Confirm("Are you sure delete ?")))

.AsHtmlAttributes()

.ToButton("Delete"))

Conclusion: At this stage we can see how IML usage permits building conditions using ready-made designs.

Task 3

Statement to execute an action (ajax post) by click of an element of html document only on the assumption of user’s approval (dialog) and by marked by checkbox, and in the case of nonfulfilment of one of the conditions show the error report.

solution: Jquery

1

2

<input id="verifyChk"type="checkbox" />

<button id="delEntity"> Delete </button>

1

2

3

4

5

6

7

8

9

10

$('#delEntity').click(function(){

if(confirm('are you sure delete ?')&&$('#verifyChk').is(':checked'))

{

$.post("controller/action",{id:$('#id').val()});

}

else

{

alert('error message');

}

});

solution: IML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

@(Html.When(JqueryBind.Click)

.Do()

.AjaxPost(Url.Action("action","controller",new{

id=Selector.Jquery.Id(r=>r.Id)

})

.OnBegin(dsl=>{dsl.Self()

.Core()

.Break

.If(s=>s.Confirm("Are you sure delete ?")

.And

.Is(()=>Selector.Jquery.Id(r=>r.Verify==true)));

.OnBreak(dsl=>dsl.Utilities.Window.Alert("error message"))

.AsHtmlAttributes()

.ToButton("Delete"))

note: IML gives a developer the opportunity to set aside the way to get the item value, and to point element chooser, on the base of which IML will define the right way to get the value by itself.

1

Selector.Jquery.Id(r=>r.Verify)

1

$('#verifyChk').is(':checked')

Conclusion: The example shows how simple it is to add new opportunities with the help of IML, which javascript code doesn’t do, javascript becomes more complicated by branches each time as a new problem arise. It is also worth noting that IML permits a variety of solutions of the same problem as well as javascript but IML has always the same structure, that allows even inexperienced developers to write always a qualitative code.

Conclusion

One can argue for a long time whether it is worth to learn new constructs of IML, but the advantage of strong typed programming language in comparison with the interpreted javascript is obvious:

The full support of all capacities ( intellisense, refactor, search ) of such instruments as Visual studio and ReSharper.

Absence of the dynamic component useful in simple scripts, but bearing a negative impact on comfort of development and support of application in case of a complex task.

The list of resources which are available for learning the fundamentals of IML: