Tim Scott's Blog

February 5, 2009

Eliminate Magic Strings In Javascript With MvcContrib.FluentHtml

Filed under: FluentHtml, MS MVC — Tim Scott @ 3:27 am

MvcContrib.FluentHtml provides a library of HTML helper methods that use expressions with strongly typed views to generate HTML elements. Not too long after that MS MVC beta introduced HtmlHelper<T> which allows users to create extension methods that use expressions in the same way.   The benefits are obvious.  By trading magic strings for expressions we gain compile time checking, better refactoring, etc.

So this:

<%=this.TextBox(x => x.User.FirstName)%>

Generates this:

<input type="text" name="User.FirstName" id="User_FirstName" value="Joe"/>

This is very nice, but what about all the other magic strings in our view?  I’m talking of course about Javascript. Does this look familiar?

$('#User_FirstName').change(doSomething);

Doh!  We just can’t escape those magic strings. Or can we?  How about this?

$('#<%=this.IdFor(x => x.User.FirstName)%>').change(doSomething);

MsMvc.FluentHtml has introduced IdFor and NameFor. Okay, so we won’t eliminate all magic string in Javascript but perhaps quite a few. Perhaps we give up a tiny bit of readability, but I think it’s worth it to stop fretting whether some refactor is going to break a bunch of Javascript.

I owe credit to Jimmy Bogard for planting this idea in my mind in one of his tweets.

About these ads

8 Comments »

  1. Ha! Cool. No, I wasn’t joking…all it took was one R# rename on our ViewModel that killed our jQuery, and we all got this sick feeling…

    Comment by Jimmy Bogard — February 5, 2009 @ 5:17 am

  2. [...] Very cool!  No more magic strings!  For more information, see the MvcContrib project and this blog post. [...]

    Pingback by Lansing Day of .NET 2009 - Patrick Steele — August 3, 2009 @ 7:30 pm

  3. That’s not a tiny bit – i see it quite unreadable.

    But benefit is crucial. :)

    Comment by Arnis L. — August 12, 2009 @ 8:47 am

    • You could abstract away the less-readable bits, something like this:

      var clientIds = {
      firstName: ‘# x.User.FirstName)%>’
      };

      Then later your actual jQuery code is much cleaner:

      $(clientIds.firstName).change(doSomething);

      Comment by Joel — September 25, 2009 @ 6:48 pm

  4. I was just about to install FluentHtml until I saw this example. I think I’ll stick with magic strings =(

    Comment by Josh — November 28, 2009 @ 10:20 pm

  5. This kinda coding is retrograde. Needless obfuscation for a problem that is trivial at best. I’d love to see the look on the face of the developer who comes in next after me and sees code like this.

    Comment by Stewart R — March 26, 2010 @ 3:34 am

    • Stewart, It’s a trivial problem if your javascript is trivial. As I do more and more rich client side behavior I see ever greater value in extending refactorability to client side code. I’m less far worried about look on a developer’s face because he disagrees with the the aesthetics of the code than I am about the look on the the product owner’s face when a bug makes it into production because someone renamed a view model property and missed the JS id.

      That said, I agree it’s ugly. This was a naive example. In practice I separate the definition and usage:

      var firstNameId = ‘#<%=this.IdFor(x => x.User.FirstName)%>';

      $(firstNameId).change(doSomething);

      Comment by Tim Scott — March 26, 2010 @ 5:09 am

  6. [...] Very cool!  No more magic strings!  For more information, see the MvcContrib project and this blog post. [...]

    Pingback by Lansing Day of .NET 2009 | OOP - Object Oriented Programing — May 4, 2010 @ 11:47 pm


RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

The Shocking Blue Green Theme. Blog at WordPress.com.

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: