Thoughts about TagHelpers

ASP.Net MVC Core introduced the new TagHelpers. The should take the C#-Magic out of the Razor views so people without C# know-how – mainly “the HTML/CSS-only Web-Designer” can work on the views too with the tools they know and which don’t understand C#. Also the syntax looks nicer as the developers brain should not switch between C# and HTML all the time. The classic HTML-Helpers still exist. That’s what the advertisements say and it sounds good to me as a C# developer too.

Here is a sample for those of you never saw the TagHelpers:

Old HTML-Helpers:

@Html.LabelFor(m => m.MyProperty, new { @class="col-sm-2 control-label" })

New Tag-Helpers:

This label Tag-Helpers looks clean and nice.

My experience and thoughts

Now I worked with ASP.Net MVC Core for a while on my personal projects. After some ramp-up with the new TagHelpers it got easier – that was to be expected. I am far away from an expert or even have a deep background of the TagHelpers but what I noticed: many of them are not easier to work with as they need more brain-power to use as when using the Html-Helpers. But why is this? Ads told us it should be exactly the opposite! This made me think for a while now …

I noticed that the problem is with the non-trivial TagHelpers. Most TagHelpers are implemented as a custom HTML-Attribute (or a set of attributes) and not on Tag-Level. But this means I have to write the correct HTML-Tag myself and then use the Tag-Helper attribute. Further more this means that I as a developer have to remember two or three but one thing:

1. Which Tag-Helper exists?
2. How could the TagHelper be implemented so:
3. Which outer HTML-Tags must I surround what Tag-Helper with?

That’s a lot more brain-work (and brain storage space) I need then with HTML-Helpers:

1. Which HTML-Helpers exists?

Examples

Let’s look at an example where I really needed some time to figure out how the TagHelper works and had to ask stack overflow – couldn’t figure it out on my own: Validation Messages.

With a HTML-Helper straight forward:

@Html.ValidationMessage(m => m.MyProperty)

One basically needs brain-power to remember there is something with “….ValidationM….”. The rest is IntelliSense.

Now with Tag-Helpers:

<span></span>

Beside the fact that this is slightly longer I have to remember / know a few more things:

1. There is a TagHelper with “…validation…”.
2. For this helper I have to use a SPAN tag.
3. The SPAN Tag needs to be normal closed – not self-closing (which is the default of Visual Studio’s auto-complete).

When we come to the validation summary you have to know that you have to use it inside a DIV tag – not a SPAN because it builds a UL and LI ‘s which can not live inside a SPAN but can inside a DIV.

<div class="text-danger"></div>

But cool is the simplicity to support your own CSS classes. With HTML-Helpers they where as Microsoft did generate them with their own classes etc.

There are Tag-Helpers I still couldn’t figure out: @Html.EditorFor() or @Html.DisplayFor() (…and all the Editor-Templates).

The HTML/CSS-only designer guy

Then there is this often told HTML/CSS-only designer guy which has some basic HTML-Editor and knows about nothing more then HTML und CSS (and design hopefully). This guy then works on your view and stiles them.

I just never ever saw a HTML/CSS designer which made up even partially useable / maintainable HTML Markdown. IF you get HTML from a web-designer it mostly looks like shit. I’m always impressed that the browser get their crap looking good.

I talked to two React.js guys as they have a super cool new feature: JSX/TSX files. They are markup mixed with Javascript / TypeScript. …so Razor for the browser-client.

I asked them: “Does the HTML/CSS-only designer guys get this syntax? And what about tooling?“. Both answered: “Forget about this designer-guys – they do not exists like this! And tooling is ok. Its us developers how have to code the views anyway so use a powerful language.“.

Closing words

I know, TagHelpers are just one more tool in the Devs toolbox. You can use it but you don’t have to. BUT: There is huge push from ASP.Net Team to TagHelpers for all kind of things. Some of them are cooler and some of them – like the ValidationMessage.

To be honest, Visual Studio Tooling (with R#) was/is quite ok for the Razor views with Html-Helpers and HTML mixed. I saw cool usages of TAG-Level Tag-Helpers; not attribute-level TagHelpers.

I’m not yet a complete fan of them. I am thinking forth an back what the ideal “thing” in this are should look like. What do you think?