Testing Telerik Menu for MVC in jsFiddle (no server-side processing)

Recently, I’ve been talking a lot about the value of server-side rendering when picking UI components. And while server-side rendering is essential for maximizing SEO efficiency and even optimizing caching and initial page load times, modern web applications must have UI controls that can operate completely in the client to deliver the rich responsiveness of “desktop” apps. That’s why it’s important to pick UI components that can do both server- and client-side rendering.

I recently stumbled across a very cool online (alpha) tool called jsFiddle. It’s a browser-based HTML/CSS/JS scratchpad. Wanting to test it and prove the client-side prowess of the Telerik Extensions for MVC, I figured I’d use this pure client-side tool to “load” a Telerik Menu.

Loading Telerik Menu in JS Fiddle

To initialize a Telerik Extension, such as the Menu, without any server-side processing, you need to execute a few simple steps:

1. Manually add links to the required Telerik CSS and JS resources. For Menu, four resources are required (I pulled them from the Telerik CDN):
   • http://aspnet-scripts.telerikstatic.com/mvc/2010.1.309/telerik.common.min.js
   • http://aspnet-scripts.telerikstatic.com/mvc/2010.1.309/telerik.menu.min.js
   • http://aspnet-skins.telerikstatic.com/mvcz/2010.1.309/telerik.common.min.css
   • http://aspnet-skins.telerikstatic.com/mvcz/2010.1.309/telerik.vista.min.css
2. Manually add the HTML for the Extension, with required CSS classes for skin styling (more on this in a moment). For jsFiddle, I copy and pasted the HTML from a Menu demo as a starting point.
3. Manually initialize the Extension with a simple jQuery call. For Menu, the single line required is: jQuery('#Menu').tMenu();

Follow these steps and you get a fully functional Telerik Menu, complete with proper skin applied and client-side API in-place. You can play with the live jsFiddle example to see and test for yourself.

The Missing Piece of the Equation

While the jsFiddle demo proves that the Telerik Extensions work completely free of any server-side processing, it also highlights the one challenge with today’s model. You have to know how to create the HTML by hand, or you have to copy and paste to get started. Some components, like Grid for MVC, can actually create (some) HTML client-side when bound to JSON data, but most Extensions today do not have simple client-side intializers.

So what?

In most cases, you’ll be using the Extensions for MVC…in MVC, so the incredibly easy to configure fluent API syntax will make it easy for you to configure your control and spit-out the needed HTML. If you want to use the Extensions on a “plain” HTML page, it’s definitely possible (again, see jsFiddle), but it requires a little more work today. In the future, we may be able to provide simple client-side APIs for initializing controls completely client-side, but for now, you get the most value by letting the server do the initial render.

Universal Lessons

This demo proves a point, but there are important lessons to takeaway:

1. Just as Microsoft is proving that it is Software + Services that represents the future for application development, the Telerik Extensions demonstrate the power and value of Server + Client for UI development. Don’t get trapped by “client-side only” or “server-side only” controls.
2. You can take complete control over your MVC controls. The Script and StyleSheet Registrars save you time (and help you optimize), but as you can see in this demo, you can manually add resource references and initialize your MVC Extensions.
3. The Telerik Extensions are truly universal. Optimized for MVC, but usable even in plain HTML pages.
4. Don’t forget about the Telerik CDN! A great free resource for further optimizing globally targeted applications.

Enjoy playing around with the jsFiddle tool and watch for more powerful client- and server-side UI Extensions from Telerik in a few short weeks.

Ask the Experts webinar scheduled for August

By now, you should know that the Telerik Q2 2010 release is mere weeks away and that the Q2 2010 Webinar Week registration is open. (You should also be registered for the Webinar Week now, too, so if you’re not, now is a great time to register before you forget.) When mid-July arrives and you download the Q2 bits, you’ll quickly get started by enjoying the “release notes on steroids” (also known as Webinar Week), but what happens if you have questions after you’ve spent some time using the bits in the real world?

To help answer those burning questions that form in the first week of working with the Q2 2010 bits, Telerik is hosting another Ask the Experts webinar on August 5th at 11 AM Eastern.

What is Ask the Experts? It’s a unique webinar format driven entirely by your questions. Telerik MVPs and product experts host the event and spend over an hour answering any questions you have about the Q2 release. The event is full of on-the-spot demos and quick tips and tricks from real masters of the Telerik products. It’s the perfect Webinar Week follow-up.

Register for the Ask the Experts webinar now and then join us on August 5th with your questions!

Q2 2010 Webinar Week registration is open (update)

As the hot summer months start to set-in, it’s almost time for another Telerik release! The Q2 2010 release is just a few short weeks away (bits are shipping in mid-July), and with it another action-packed “What’s New Webinar Week.” For the uninitiated, a Webinar Week is 5 days of webinars designed to help you discover all of the major new features Telerik is shipping in a release. As another Telerik Evangelist said, “it’s like release notes on steroids.”

Clearly, you don’t want to miss these webinars. Only people attending the live events will have a shot at winning Telerik Ultimate Collections (our newest “super bundle,” $1999 value), so don’t wait for the Telerik TV recordings. We’ll give away at least one Ultimate Collection per webinar.

Q2 2010 What’s New Webinar Week starts on Monday, July 19 at 11:00 AM Eastern. Registration links for all 5 webinars are below. Sign-up right now and then invite your friends, family, and pets.

Mon, Jul 19: What’s New in RadControls for ASP.NET AJAX and Extensions for MVC Register: https://www1.gotomeeting.com/register/391602961

Tues, Jul 20: What’s New in RadControls for WinForms and Telerik Reporting Register: https://www1.gotomeeting.com/register/840774105

Wed, Jul 21: What’s New in RadControls for Silverlight and WPF Register: https://www1.gotomeeting.com/register/296364240

Thurs, Jul 22: What’s New in JustCode, JustMock, and OpenAccess ORM Register: https://www1.gotomeeting.com/register/665018560

Fri, Jul 23: What’s New in WebUI Test Studio Register: https://www1.gotomeeting.com/register/119429289

[UPDATE] Tues, Jul 27: Official TeamPulse Launch Webinar Register: https://www1.gotomeeting.com/register/737864569

Thurs, Jul 29: What's New in Sitefinity 4 Beta Register: https://www1.gotomeeting.com/register/406935048

Fri, Aug 5: Q2 2010 Ask the Experts Webinar

Now that you’ve registered, don’t forget to play with the Q2 2010 betas. Your time for providing beta Q2 2010 feedback is quickly fading.

Testing web pages with “spider” vision

In my previous post about the importance of choosing UI controls that provide server-side rendering, we discussed the problem that modern “JavaScript-only” UI components present- most notably, their inability to support search engine indexing. We established the importance of picking UI controls- like Telerik’s RadControls for ASP.NET AJAX or Extensions for ASP.NET MVC- that provide both server- and client-side rendering to ensure that your websites can both maximize performance and accessibility (to both humans and search bots).

But how do you know you have a problem? You may be using UI controls now and not be sure if you’re SEO friendly (unless you’re using Telerik controls, of course, in which case, you’re covered). You need a way to see your pages in the same way the bots do.

How do you gain search “spider vision” for testing your pages?

Fortunately, you have a couple of options:

1. Text-only Web Browser – Text browsers, such as Lynx, provide you with a close approximation of what search spiders see when they visit your page. That makes them good tools for testing your content to see how your page renders when JavaScript is not in play. Even Google recommends using this approach to test content.
2. Fetch as Googlebot – This is super spider vision. Google provides a beta tool as part of its Tools for Webmasters called “Fetch as Googlebot.” As the name implies, this tool allows you to plug-in a URL from your site (you have to have verified access to the site before you can use this tool, unfortunately) and get back a processed result that shows you “exactly” what Goolgebot sees when it visits your page. Obviously, Google is probably not showing all its cards with this tool, but it gives you a good approximation and once again clearly highlights the “text-only” nature of search indexing.

With tools available to give us spider vision, what does client-side rendering look like versus server-side rendering? Let’s test.

Using a simple ASP.NET MVC test page, I bind a Telerik Extensions Grid for MVC to customers data from Northwind. Since the Telerik MVC Grid supports both rendering modes, I create one view that uses Server Binding and another that uses Ajax Binding (i.e. client side-binding, similar to how something like a jQuery grid works). Here is what the page looks like in the browser (in both modes):

Now, here’s how Googlebot sees the Server Binding version of the page (relevant Grid section in the screen cap):

Notice two things. First, notice that Googlebot only sees text. Second, notice the data in the Grid (highlighted in red). This is good. This means Google is indexing our Grid content in the same way users see it. Now let’s see what happens if we use Goolgebot vision to load our client-side rendering (Ajax Binding) page:

Where’s our data? That’s right: missing in action! Because our client-side page uses Ajax and JavaScript to initialize, Googlebot (and search spiders, in general) do not see the content. The content might as well not exist as far as indexing is concerned.

Make sure your pages aren’t invisible.

Fortunately, my pages are using Telerik controls, so I can easily fix the problem by enabling Server Binding for crawlers. If you are using “pure” client-side components that provide no server-side option, though, your solution will not be as easy. Take advantage of tools like Lynx and “Fetch” to gain “spider vision” and ensure your fancy pages aren’t invisible to some of your most important visitors. And, of course, save yourself some time and use Telerik tools to avoid the problem!

Importance of server-side rendering for web UI controls

As we move in to the Age of jQuery, where web developers are finally embracing and using JavaScript for all variety of cool thing, there are some important “gotchas” that tend to get overlooked. One of the most critical is the importance of supporting server-side rendering.

Most of us don’t worry about browsers not supporting JavaScript these days because, frankly, every browser does! Even mobile browsers (that matter) support and execute JavaScript. And despite what you may have heard, JavaScript can be used in accessible applications (a requirement for most government websites) as long as certain “precautions” are taken. Unfortunately, there is still a MAJOR consumer of the web that cannot deal with most JavaScript! Know who?

Search engine crawlers.

If you want your content to be indexed (by public crawlers OR your own internal corporate crawlers), pure client-side initialization and rendering is a problem. Search crawlers do not execute JavaScript. Some research suggests that modern crawlers are starting to use “tricks” to follow links embedded in JavaScript, but most SEO experts agree that the crawlers are not doing any arbitrary JavaScript execution on your page. (Even Google continues to advise developers to use a text-only browser like Lynx to see a page as web crawlers see it.)

 Telerik Grid for ASP.NET MVC in “client-binding mode” as seen by Google’s cache

So what? Why is this subject for Telerik Watch?

As web developers, we want to ensure that we deliver highly-optimized, high-performance web applications, but we also want to make sure our content is indexable. When you pick UI components, it’s important to pick tools that support BOTH server-side rendering AND client-side rendering.

For most “normal” users, the client-side rendering will enable you to deliver a premium, high-performance experience. If your control is really well built, the client-side mode will only send data between the browser and server and will handle HTML in the browser (minimizing bandwidth, maximizing responsiveness).

For search crawlers, the server-side rendering mode will enable you to present all content on the initial request. HTML is rendered on the server, sent the browser, and then easily indexable by the search crawler.

 Telerik Grid for ASP.NET MVC in “server mode” indexed correctly by Google

Telerik is one of the only UI component vendors that offers this type of “dual mode” support for both ASP.NET AJAX and ASP.NET MVC. Many UI component vendors offer all or nothing- client-side or bust- so beware! Not all tools are created equal, and you might miss this all important feature in your initial review.

Recap: Client-side rendering is great for performance, but terrible for search indexing. Make sure you pick UI components that provide flexible support for both rendering modes so you can have your cake and eat it too.

Minimize Silverlight application size with Telerik Assembly Minifier

There is one major change in thinking that occurs when you move from ASP.NET or WinForms application development to Silverlight development. Okay, there are a lot of changes in thinking, but one very important change that’s easy to overlook. In Silverlight, your application assembly size matters and has a big impact on user experience!

In ASP.NET, assembly size doesn’t really matter because DLLs always live on the server. Only the final HTML and resources are sent to the user. In WinForms, assembly size can definitely make for a larger install, but generally all of the bits needed to run an app are locally installed and ready to go when the user is ready to begin.

In Silverlight, DLLs live in the XAP. Before a Silverlight application can run, the entire XAP must be downloaded, and if you’ve got a ton of DLLs referenced and in your XAP, that can mean megabytes of download and a slow application “startup” experience for your users. To maximize the Silverlight experience you need to minimize the size of your XAP.

Which leads to the new (free!) tool introduced by Telerik last week, the Assembly Minifier.

When you use 3rd party Silverlight controls, like the RadControls for Silverlight, you should only reference the assemblies for the controls you’re using to avoid adding unnecessary DLLs to your XAP. But that only gets you so far. An assembly like Telerik.Windows.Controls or Telerik.Windows.Controls.Input holds many controls, and using just one brings the rest along for the ride. How do you only “pay for what you use” in your XAP size?

Simply use the Minifier. Today it allows you to quickly “extract” only the controls you’re going to use in your app from Telerik Silverlight assemblies. You just upload your Telerik assemblies, select the controls you want, and then use the new minified output in your project. Depending on the controls you use and assemblies you minify, you can see reductions in uncompressed DLL size greater than 50%. Give the beta a try today and let us know what you think in the forums.

Read all about using the minifier on the Telerik Blogs, too.

How do you make your XAP even smaller?

The Assembly Minifier you see today is just the beginning. As a hosted Silverlight-based tool (which has been minified, too!), we will be constantly updating it leading-up to and then past Q2. We will be working on delivering features in the future that make it even easier to minimize the size of your XAPs, including non-Telerik assemblies! We wanted to start “simple,” though, and then build-up to the “all powerful” minifier we know you need.

For now, enjoy the beta and spread the word. Let’s start minifying Silverlight applications together and start making users’ lives better with radically improved download times!

Q2 2010 betas now available

We’re back from a busy, award-filled week at TechEd 2010, and we’re closer than ever to the next major Telerik release. A few weeks ago, we covered in detail what you can expect in the Q2 2010 release, but now you can actually start to get your hands on some of the new stuff. Available right now on Telerik.com are betas for the RadControls for Silverlight/WPF, RadControls for WinForms, and JustCode. Betas for most other Telerik products will be shipping later in June.

As a reminder, the betas for XAML only include builds for Silverlight/WPF v4. All new controls and features are targeting the v4 of these platforms, so there are no v3 beta builds. The final Q2 release will include native v3 builds, but it will be bug fixes only.

Otherwise, don’t waste any time downloading the latest betas! These bits deliver everything from a unit test runner (JustCode) to new desktop alerts and reminders (WinForms) to a seriously cool Word-like editor for the browser (Silverlight). We need to hear your feedback now so we can get everything just right for the July release!

Beta Feedback Forums
Silverlight / WPF
WinForms
JustCode

Telerik wins Best of TechEd 2010

See that trophy sitting there? That’s the “Best of TechEd: Software Components and Middleware” award (right above the previously mentioned Code Project Members’ Choice award). This is a huge honor for Telerik and we are extremely grateful for all the support and feedback from you, our customers, that helped us bring this trophy home. As our CEO said, this is validation that we’re on the right track and it only pushes to go further!

And while we didn’t take home the trophy in the other two categories where we were nominated (congrats to Dundas and Quest!), being a Best of TechEd Finalist is still a major accomplishment. Hundreds of submissions from around the world get whittled in to fewer than 50 finalists, so being represented in 3 of 14 award categories (only Quest, Symantec, and Microsoft matched that feat) says a lot about Telerik’s success delivering solutions for all aspects of .NET development.

Thank you for being part of Telerik’s success and stay tuned for an exciting Q2 release in a few short weeks!

Telerik at TechEd, Winning awards

As you know, this is a busy week for Telerik because we’re in full-force at TechEd 2010. TechEd New Orleans is underway and the Telerik crew is busy doing booth demos, talking to Telerik fans, and helping developers learn how Telerik’s tools help them save time building great software. As you would expect at a conference made-up largely of the “IT Pro” audience, Telerik’s TeamPulse planning software and WebUI Test Studio testing software are very popular in the booth this week, and Telerik Reporting is a big hit with the BI attendees (especially with our support for Silverlight, WPF, WinForms, and ASP.NET).

We’re also very honored to receive some awards this week.

We kicked-off the week taking home the Code Project Members’s Choice Award for Best Silverlight UI components! The Telerik Silverlight Team has been working very hard to create the best Silverlight UI components available and we’re pleased that our work is producing results the entire .NET community loves. We’ll continue to build on this success and once again establish Telerik as the industry leader for UI components on any Microsoft platform.

Meanwhile, we’ve also been nominated for three “Best of TechEd” awards this year! We’re nominated in these categories:

• Best Database Development Tools (with OpenAccess ORM)
• Best BI Tools (with Telerik Reporting)
• Best Software Components (with Telerik Ultimate Collection)

It’s a great honor to be considered among the best of the best across such a wide spectrum of .NET, and we definitely appreciate all of the feedback and support that you- our avid fans and critics- provide to help make our products great.

Of course, beyond the booth and the awards, there are plenty of parties and meetings and parties this week in New Orleans. It’s a busy time, but an exciting time. And speaking of time, it’s time for me to get back to the expo floor…

Silverlight on Apple TV experiment, results

In the Telerik Houston office, we recently added a large screen TV monitor that will be used for displaying rotating dashboards. We have a small team in the local office, and there a few dashboards we want everyone on the team to be watching and using on a daily basis, such as Telerik’s TFS Project Dashboard and some other internal dashboards. The challenge is deciding how to get the dashboards to the TV.

The requirements:

• Dashboards are written in HTML5 and Silverlight, so whatever solution is used needs to support these technologies.
• Dashboards need to be displayed full screen
• Dashboards need to be displayed all day (no screen savers, power savers)

Simple enough. We’d also prefer to make the best use of resources possible. Clearly, we could place a dedicated computer next to the TV and call it a day, but that’s an extreme waste of PC power for what is essentially a web browser machine.

All that in mind, here are the options for getting the dashboards on the TV:

1. Use existing server in server room to serve dashboards. Run long VGA from server room to TV *or* using VGA-to-Ethernet adapter to transmit signal.
2. Use a simple “set top box” that supports Silverlight and a web browser, connected to TV via HDMI
3. Use a “standard” computer connected to the TV

Of these options, #1 and #3 work, but have drawbacks. To use an existing server to serve the VGA signal, someone has to remain logged-in to the machine, which is far from ideal. Using a dedicated computer has similar problems, plus the drawback of wasted capacity.

So I decided to research option #2: a simple, cheap STB (set top box).

And of all the set top boxes out there, only one (I’m aware of) has a chance of displaying Silverlight: Apple TV. Why? Apple TV is essentially a Front Row UI “hiding” Mac OS X 10.4 (Tiger). That means it can (in theory) run many OS X applications, including browsers like Firefox and supported plug-ins, like Silverlight.

Using my Mac Pro at home and a cool piece of software called aTV Flash, I had Firefox (v2) up and running on Apple TV with no trouble. Combined with my iPad and the Mobile Mouse app, it was a better than expected browser on a TV experience.

Following various instructions from the aTV forums, I set out to get Silverlight (v4) working in Firefox on Apple TV.

Bottom line: it doesn’t work. I’m not sure why, but it doesn’t. I wasted hours debugging (with the help of Firebug!), and while Firefox recognizes the Silverlight 4 plug-in (about:plugins), and the Silverlight.js script confirms Silverlight is installed, Silverlight is never initialized and your XAP is never downloaded. Further, even if it had worked, Firefox on Mac does not support “F11-style” fullscreen, so you would have always sacrificed some pixels for your menu bar (not to mention Apple TV’s 720p resolution).

So much for a sub-$200 box for displaying dashboards. It seems we’re destined to use a simple, dedicated computer. Save yourself 5 hours and don’t waste your time trying to get Silverlight working on Apple TV. It seems temptingly possible, but you’ll just end your evening disappointed and one missed gym trip to show for it.

Telerik at TechEd 2010

It’s hard to believe that it’s TechEd time again, but summer is upon us and TechEd New Orleans is kicking-off in 4 short days. New Orleans has had its share of bad luck in recent years, between Katrina and the current oil spill, and the general “theme” for TechEd this year seems to be charity and community. From GiveGeek’s Habitat for Humanity project on Saturday to Telerik’s “Deserving Developer” TechEd passes, the .NET community is coming together to make TechEd 2010 more than a geek fest.

The Telerik Houston crew will be Road Tripping^TM it to New Orleans this weekend, driving to meet a cadre of Telerik crew members from around the world, including our Boston, Austin, and Sofia offices. We’ll be pitching camp in the famous Telerik “dance floor” booth for the week (Booth 2001, if you’ve got a map), and we’ll have some great t-shirts, prizes, and demos to give at the booth. You’ll also want to stop by our booth on Monday to learn about our special contest that could give you a chance to take a trip in New Orleans (similar to the lucky people that won the Grand Canyon helicopter ride at DevConnections)!

Otherwise, keep your Twitterators/RSS Readers/Facebook-checker locked in to these resources next week as we bring you the sights, sounds, and news from TechEd 2010:

Twitter

• @toddanglin
• @telerik
• @telerik/insiders <- aggregation of all Telerik tweeters

Facebook

• Telerik “Fan” Page (exclusive videos and pictures)

RSS

• Telerik Watch (of course)
• Telerik Blogs
• Telerik TV (get updated when we add new videos!)

Looking ahead to Q2 2010, Part 2

A few weeks ago, I started sharing with you highlights from the rapidly approaching July Q2 2010 Telerik release. We looked at the road maps for ASP.NET AJAX, ASP.NET MVC, and WinForms and I hand-picked a few of the updates for each product that should get you really excited about what’s coming in less than 8 weeks time. But this is 2010 and a Telerik release means updates to 9 developer products!

What else should you be looking forward to in Q2 2010? Here are some ideas:

• RadControls for Silverlight/WPF
• [!NOTE] Only SL4/WPF4 builds will get new controls (v3 will be bug fixes only)
• [NEW CONTROL] RichTextBox (incredible, Word-like editor)
• [NEW CONTROL] TreeListView
• [NEW CONTROL] RadFilter
• New BusyIndicator being added to all controls for auto remote-request UX
• [RadGridView] New multi-cell selection (foundations for advanced copy/paste)
• [RadCart] New annotations, exploding radial series, log axis
• [RadScheduler] Improved perf (UI virtualization), improved rendering, grouping
• New theme and animations
• Improved VS2010 support (Collection Editor, SmartTag)
• OpenAccess ORM
• Support for WCF Ria & Data Services
• New DataTransporterObjects (self-tracking entities)
• DataAnnotations support
• Improved RLINQ visual designer (support for reverse & forward mapping!)
• [NEW DB SUPPORT] SQLite
• JustCode
• [NEW] Unit Test Runner!
• Enhanced XAML navigation and refactoring support
• New visual cues for easier access to all features
• At least 3 new refactorings
• Improved code navigation and code analysis engine
• Telerik Reporting
• [NEW] Interactive reports (hyperlinks for drill down, navigation, & external links)
• New data source components for OpenAccess ORM and EF
• Improved Silverlight support

On top of all that, Q2 will also introduce the first official release of JustMock (including basic JustMock integration with JustCode) and TeamPulse (our new team planning tool). Combine that with the list of new stuff from my last post, and once again you’ve got a huge release coming your way this summer.

Fortunately, betas for Q2 are just around the corner. Betas will start shipping as early as next week (with a JustCode beta) and then continue shipping throughout June. Keep your RSS reader locked here for more updates as we make our way to Q2.

Improved, Easy Email Template “Engine” with Smarter ToString Extension

This blog often focuses on Telerik and Microsoft news, and rarely do I bring you much “original thought” code (especially lately). But this class is just too useful not to share.

Let me just lead with the scenario:

1. You have a program that is going to send auto-generated emails
2. You want templates for your emails that support value merging
3. You want to maintain your templates as HTML files for easier editing
4. You want something as easy to use as String.Format

While there are tons of templating engines for C#, I just wanted something simple and to the point. The solution Scott Hanselman provided a couple of years ago was very close to what I wanted, but it doesn’t support collections (very important for Master-MasterDetail type messages). So I added the tweak to support these scenarios.

Here’s how you use it:

//Create a simple template
string template = "Hello {FirstName}! You've ordered: <ul>{Items:<li>{Name}</li>}</ul>";

//Create your object with the template values (can by anonymous type)
//(Let's use some pseduo LINQ to get a customer with a specific ID)
var myTemplateValues = myObjects.Where(o => o.Id == id).Select(o => new
   {
       FirstName = o.FirstName,
       Items = o.Items //Assume each item in ICollection has Name property
   });

//Merge values with template 
string mergedTemplate = myTemplateValues.ToStringWithFormat(template);

The result of the above code should be a string that looks something like:

Hello Todd! You’ve ordered: <ul><li>Item Name 1</li><li>Item Name 2</li></ul> You can, of course, add formatting to your objects in your template, too, such as: {Birthdate:dd MMM yyyy} But when you’ve got a collection, you can use the object format string to include nested property values, like this: {Customers:<li>{Birthdate:dd MM yyy}</li>} Pretty cool! It’s a nice balance between the templating engines that are super complex and a plain-jane String.Format. It doesn’t do everything you could ever want, but it does enough for many auto-email scenarios. In my own usage, I have a simple method that let’s me quickly merge my context values with my template when I’m ready to build an email’s body:

public static string GetMergedTemplate<T>(string template, T contextInstance)
{
   if (String.IsNullOrWhiteSpace(template))
       return null;

   return contextInstance.ToStringWithFormat(template);
} 

Which brings us to the implementation of ToStringWithFormat. This is a modified version of the extension method from Hanselman that gives us the extra power we desire:

/// <summary>
/// Returns a string and replaces named place holders with object values
/// </summary>
/// <remarks>Originally from Scott Hanselman's Blog: http://www.hanselman.com/blog/ASmarterOrPureEvilToStringWithExtensionMethods.aspx </remarks>
/// <param name="anObject"></param>
/// <param name="aFormat"></param>
/// <returns></returns>
public static string ToStringWithFormat(this object anObject, string aFormat)
{
   return StringExtensions.ToStringWithFormat(anObject, aFormat, null);
}

public static string ToStringWithFormat(this object anObject, string aFormat, IFormatProvider formatProvider)
{
   if (anObject == null)//Can't merge null object. Be nice and return original format string.
       return aFormat;

   StringBuilder sb = new StringBuilder();
   Type type = anObject.GetType();
   //Old pattern: @"({)([^}]+)(})" - Doesn't handle nested brackets
   //New pattern:"({)((?:[^{}]|{[^{}]*})*)(})" - Handles ONE LEVEL of nested brackets
   Regex reg = new Regex(@"({)((?:[^{}]|{[^{}]*})*)(})", RegexOptions.IgnoreCase);
   MatchCollection mc = reg.Matches(aFormat);
   int startIndex = 0;
   foreach (Match m in mc)
   {
       Group g = m.Groups[2]; //it's second in the match between { and }
       int length = g.Index - startIndex - 1;
       sb.Append(aFormat.Substring(startIndex, length));

       string toGet = String.Empty;
       string toFormat = String.Empty;
       int formatIndex = g.Value.IndexOf(":"); //formatting would be to the right of a :
       if (formatIndex == -1) //no formatting, no worries
       {
           toGet = g.Value;
       }
       else //pickup the formatting
       {
           toGet = g.Value.Substring(0, formatIndex);
           toFormat = g.Value.Substring(formatIndex + 1);
       }

       //first try properties
       PropertyInfo retrievedProperty = type.GetProperty(toGet);
       Type retrievedType = null;
       object retrievedObject = null;
       if (retrievedProperty != null)
       {
           retrievedType = retrievedProperty.PropertyType;
           retrievedObject = retrievedProperty.GetValue(anObject, null);
       }
       else //try fields
       {
           FieldInfo retrievedField = type.GetField(toGet);
           if (retrievedField != null)
           {
               retrievedType = retrievedField.FieldType;
               retrievedObject = retrievedField.GetValue(anObject);
           }
       }

       if (retrievedType != null) //Cool, we found something
       {
           string result = String.Empty;
           if (toFormat == String.Empty) //no format info
           {
               if (retrievedObject is ICollection)
               {
                   foreach (var item in (retrievedObject as ICollection))
                   {
                       //In this branch toFormat is blank, so just call toString on
                       //each object in collection (ex:{Items})
                       result += item.ToString();
                   }
               }
               else
                   result = retrievedObject.ToString();
           }
           else //format info
           {
               if (retrievedObject is ICollection) //Process first level collection
               {
                   foreach (var item in (retrievedObject as ICollection))
                   {
                       //In this branch toFormat contains nested property name, so
                       //make recursive call to ToStringWithFormat to process property value
                       //(ex: {Items: {PropertyName}})
                       result += item.ToStringWithFormat(toFormat);
                   }
               }
               else
                   result = String.Format(formatProvider, toFormat, retrievedObject);
           }
           sb.Append(result);
       }
       else //didn't find a property with that name, so be gracious and put it back
       {
           sb.Append("{");
           sb.Append(g.Value);
           sb.Append("}");
       }
       startIndex = g.Index + g.Length + 1;
   }
   if (startIndex < aFormat.Length) //include the rest (end) of the string
   {
       sb.Append(aFormat.Substring(startIndex));
   }
   return sb.ToString();
}

A key limit in this approach is the RegEx, which technically is not adept at finding nested bracket patterns. RegEx works fine if you accept a fixed number of supported nested levels, but it cannot dynamically handle unknown levels of nesting. A single level was fine for my needs and thus I left it at that, but this could be extend to provide even richer support for collections if RegEx were replaced.

I hope you enjoy this simple update on a classic. As commenters pointed out in Scott’s original post, this approach does create opportunity for “evil” when it comes to refactoring and performance, so there is still plenty of room to improve. But for a pragmatic solution, I’ve found this very useful.

Telerik TV v2 beta now live!

As you know, video is increasingly becoming an important part of learning on the web, and at Telerik we’ve been embracing video for a while now. The current version of Telerik TV moves more than 2 terabytes of data every month and it continues to grow in popularity. It has served its purpose, but as we continue to add products and more videos, we recognized the need for a better portal.

The main goal for Phase One of Telerik TV v2 (or TTV2, as we call it) is to make it easier to find videos. In the current system, you have very limited options for finding videos, and often older videos are very difficult to locate. The system aims to resolve that by introducing multiple “paths” to a video so that people with all styles of browsing preference can find Telerik video content.

In the Phase One beta, you’ll find many new features, including:

• Multiple featured videos on the home page (presented with Telerik’s Silverlight CoverFlow)
• Video series (a collection of ordered, related videos)
• Video ratings (tell us if you love or hate a video)
• Video feedback (send us comments about a video)
• TweetMeme and Facebook Like support (FB like is disabled in Beta)
• Dedicated page for every Telerik product with helpful video resources (including “Getting Started” video series)
• Progressive Enhancement tooltips (hover over a video to see more details)
• Improved video search
• Browse videos by Category and Tag

TTV2 is built on ASP.NET MVC 2 using the Telerik Extensions for ASP.NET MVC and OpenAccess ORM for data access. And, yes, we are still using Flash for video delivery, but that is changing in Phase Two (more on that in a moment).

Check-out the live Beta of Telerik TV 2 now and let us know what you think!

What’s Next

We don’t plan a long beta for TTV2. In fact, we are primarily running this beta to make sure there are no major issues and to make sure all configuration of the new site is complete (we already know a few areas need some more attention). If everything looks good, we’ll be taking TTV2 to production as early as next week.

Phase Two
After Phase One ships, we’ll be working quickly to prepare Phase Two. Some of the things we hope to achieve in Phase Two with TTV2 are:

• Silverlight-based media encoding and delivery (with uncompromised delivery performance)
• With the possible addition of HTML5 video playback to enable TTV viewing on iPads and iPhones
• Chapters in videos
• Enhanced video analytics (so we know more about how you’re using videos, and then make them better)

Post-Phase Two
We also recognize that the future is not just video. It’s multimedia- or “transmedia” as it’s now being termed. So as we look past Phase Two and in to Phase Three for TTV2, we will be delivering innovative web-based experiences that blend code snippets and text, synchronized with video, in an immersive online learning experience. Similar to the innovation already found in our Telerik Trainer, but made more accessible through the web. Our goal is to provide the best web-based learning experience available for software products.

For now, enjoy the beta and send us your feedback. We hope that these changes help make your lives as developers even easier.

Code Converter (finally) updated, Still in Beta

Over three years ago, in my first days as an “official” Telerik employee, I created a small little project as a simple way of showing-off some of Telerik’s RadControls for ASP.NET (this was pre-Prometheus days). The project, Code Converter, is a simple tool for converting code between C# and VB.NET, and it has steadily grown in popularity over the years and is now used by thousands of developers every day.

Today, the conversion approach used by Code Converter got much better! We’re still using the NRefactory open source libraries to power our conversions, but there are three significant improvements:

1. We updated the NRefactory libraries to the latest available version (4.0.0.5757)
2. We changed the way code snippet processing is handled, abandoning the old “dummy class wrapper” approach and instead using the more efficient approach described by Fabien in the Code Converter forums.
3. We added some additional RegEx-based “clean-up” parsing to the conversion to try to fix a few of the errors that NRefactory currently lets slip when converting code. In particular, when converting something like Session(“key”) from VB to C#, our conversion output will correctly change the parenthesis to brackets, or Session[“key”]. No other online converter is doing that today.

The end result of these back-end changes is more accurate conversions. Many of the bugs that have been reported in the Code Converter forums are now fixed by this update. For example, converting this C#:

for (int x = 1; x <= 100; x++) {
    int a;
    a = x;
}

Now correctly outputs this VB:

For x As Integer = 1 To 100
    Dim a As Integer
    a = x
Next

No more of the dreaded System.Math.Max(System.Threading.Interlocked.Increment(i),i - 1)! Other scenarios that now convert correctly:

• Regions (C# to VB)
• Using statements in a namespace (C# to VB)
• Type conversions (VB to C#)
• Lambda expressions (C# to VB)
• RaiseEvent (C# to VB)

There are, of course, still limits imposed by the underlying NRefactory engine. Among the limits most likely to affect your conversions:

• No support for converting LINQ syntax
• No support (yet) for .NET 4 language features

As soon as NRefactory supports these language features, we’ll try to improve our support. In the mean time, enjoy the improved conversion engine and let us know what you think. There are lots of things that could be done with Code Converter in the future, but we want to hear your voice. What would make Code Converter an even more valuable tool for you?

Toronto Code Camp wrap-up

So, yeah…in my busy haste to finish 1,001 tasks last week, prep a brand new HTML5 session for the Toronto Code Camp, speak at the South Houston .NET Users Group, and join Carl Franklin and Richard Campbell for their Houston .NET Rocks! Road Trip stop, I kinda sorta ran out of time to actually mention that I was going to Toronto this weekend to speak. So, to kill two birds with one blog post, this is both your “heads-up” post that I’m speaking at the Toronto Code Camp 2010 and the wrap-up!

I presented two sessions this weekend, and I was pleased that they were two of the most popular sessions at the entire event. It always amazes me that people are willing to stand for 75 minutes to watch a session when a room is full. You guys are hardcore and get bonus points in my book. Thanks to everyone that attended the sessions, though! I hope you took away at least one useful bit of info.

My sessions at this event were:

• Maximizing Ajax Performance – Not new, but always useful for people to see how Ajax really works and what you can do as an ASP.NET developer to get the most out of Ajax. Unfortunately, I was a bit rusty delivering this session in Toronto because I was prepping the next session…
• The Rich Standard: Getting Familiar with HTML5 – Brand new for Toronto Code Camp, I’ll be doing this session a lot this summer and fall. This is your primer to HTML5 and a must see if you A) care about standards, or B) are a web developer.

Slides for both sessions are available below. The slide notes contain a lot of links to additional resources, so be sure to check them out if you’re trying to dive deep on these topics (especially HTML5). I’ll post code soon, but it needs some tidying before it’s “download ready.”

Overall, it was a great event and more than 600 developers ventured-out for the day of learning. Other than a more than frustrating experience with Canadian immigration cops, I had a great time and would encourage anyone to attend this event in the future!

The Rich Standard: Getting Familiar with HTML5
[Slides (PPTX)]

Maximizing Ajax Performance
[Slides (PPTX)]

[Picture courtesy of Joey DeVilla’s Code Camp Flickr set]

CAPTCHAs are less secure than you think

Quick! What does CAPTCHA stand for (without consulting Wikipedia)? Completely Automated Public Turing…and then things get foggy. Try again. Completely Automated Public Turing test to tell Computers and Humans Apart. Yes, they cheated a little with the acronym (it should be CAPTTTCHA), but regardless of what it stands for, we all know what a CAPTCHA looks like. Those little, often hard to decipher, images on a form designed to only be readable by humans so as to prevent bots from submitting forms.

But are those images really unreadable by computers?

I was prompted to consider this after reviewing a blog post by one of the Telerik ASP.NET AJAX Team Leads about RadCaptcha and OCR software. The nature of the blog post was not meant to be a definitive test of RadCaptcha’s security, but it was clear through the comments that people are interested in that information. In the blog post, it is demonstrated that RadCaptcha cannot be understood by off-the-shelf OCR software, which is a fun test, but clearly not a definitive measure of security. In the “real world,” algorithms are custom tailored for attacking CAPTCHAs.

Weak CAPTCHAs

As it turns out, for years now, computers have been able to automatically parse many of the CAPTCHA images you find on the web. Research done by various universities, such as Simon Fraser University and UC Berkeley, has produced algorithms capable of “seeing” almost all CAPTCHAs that rely on simple text transformation and “busy backgrounds” to stump computer character recognition. Take the following CAPTCHA image examples:

Each of these CAPTCHAs can be successfully read by algorithms developed by university researchers with a 92% success rate! I’m sure you’ve seen a few forums or web forms that have CAPTCHAs that look a lot like this. (You may be the owner of one of those sites today.)

In short: CAPTCHAs that rely on background noise, color, and text distortion are generally ineffective at stopping modern CAPTCHA bots.

Stronger CAPTCHAs

If you must use a visual CAPTCHA today, the much more effective technique for spoiling bots is visual segmentation. When a CAPTCHA bot tries to understand an image, it will first try to remove all background noise and “obviously” unnecessary image data (think about what you’d do in Photoshop to clean-up an old damaged photo – that’s what the bots do). Then, bots will go about trying to “segment” the remaining data in to areas that can be eventually parsed in to characters. With sufficient overlapping and thick cross-cutting lines, bots are unable to accurately translate segments in to characters. For example, the following image is much more effective at blocking bots than the previous images even though there is no background noise or color:

Of course, even strong CAPTCHA images like this are being broken with advanced research, but in the current cat and mouse chase of CAPTCHA security, this is among the best options for balancing human readability and computer bot blocking.

Optimizing RadCaptcha

Given this new understanding about the current state of CAPTCHA bots, there are some easy takeaways for configuring RadCaptcha for maximum bot blocking:

1. Don’t rely on visual CAPTCHA protection only
   Bots often give away their identity by trying to submit forms too quickly or by trying to submit a form too many times. Take advantage of RadCaptcha’s non-visual protections to maximize bot prevention.
2. Maximize Line Noise Level, Eliminate Background Noise Level
   Research says background noise is first thing a CAPTCHA bot throws-out, so it offers little value to your image. Instead, maximize your CAPTCHA image line noise and font warp factor to make segmentation hard for bots. Set properly, RadCaptcha can produce very secure CAPTCHA images like this:
   
   
3. Use a Custom Character Set
   Many bots rely on encountering a predictable set of characters or words to accurately parse a website’s CAPTCHA image. By using a custom character set with RadCaptcha that includes non-alphanumeric characters (like @, !, #, $), you can increase your odds of beating the bots.

No visual CAPTCHA image is perfect, and with the modern trend of employing humans to beat CAPTCHAs, a CAPTCHA is a road bump at best. Still, they prevent the casual spam bot from infiltrating your site and protect your forms from the script kiddies.

Telerik will continue to add improved security features to RadCaptcha in future releases, but by following these simple guidelines, you can confidently get the most value out of a CAPTCHA today that a CAPTCHA can provide.

JustMock unofficial FAQs (update)

With all of the attention on the just announced TeamPulse and WebUI Test Studio QA Edition, the JustMock Beta is over due for more face blog time. Hopefully you managed to attend today’s JustMock introduction webinar (if you did, you are now a proud license holder) and start to learn more about how JustMock benefits your unit testing. But whether you attended that event or not, I figured I’d start to round-up and address some of the most burning questions about Telerik’s newest developer tool.

In the same vein as the Unofficial FAQs for the MVC Extensions, here is round-one for JustMock. If I missed a question you want answered, let me know in the comments.

JustMock Unofficial FAQs

Q: What is JustMock?
JustMock is a new Visual Studio productivity tool from Telerik that helps you create unit tests more quickly by automatically mocking, or “faking,” objects in your tests. Mocking helps you break dependencies in your unit tests so that you can focus on testing a single concern and provide more complete unit test coverage. You can read a complete intro to JustMock from the Product Team on the Telerik Blogs.

[NEW] Q: What is mocking and why do I need it?
Mocking (Wikipedia) is a concept in unit testing where real objects and substituted with fake objects that imitate the behavior of the real deal. Mocking is done so that a test can focus on the code being tested and not on the behavior or state of external dependencies. For example, if you have a data repository class that runs business logic and then saves information to a database, you want your unit test to focus on the business logic and not on the database. Mocking the “save” calls to your database ensures your tests run quickly and do not depend on the availability or state of your database.

When you’re ready to make sure the “save” calls are working, then you’re moving on to integration testing. Unit tests should not cross system boundaries, but integration tests are allowed to cross boundaries and make sure everything works together (your code, your database, your web services, IIS, etc.).

Wikipedia does a good job explaining additional reasons for using mock objects, such as working with objects that have non-deterministic results (like DateTime.Now), have states that are difficult to reproduce (like testing how your code behaves if a web service is unavailable), or have operations that are slow to test (like using a test database with setup/teardown scripts).

[NEW] Q: How does JustMock help with mocking?
Mock objects can be created and maintained manually, but this is time consuming and ultimately unproductive approach. A tool like JustMock allows you to focus on writing tests and forget about the mocking details. Mock objects are created automatically in memory when the tests run based on your simple configuration in the unit test. There are no “physical” mock objects that have to be maintained as your project changes.

JustMock goes even further and does not force you to distinguish between “mocks,” “fakes,” and “stubs.” You have a single API for mocking and JustMock handles the rest.

[NEW] Q: Why not mock everything with JustMock?
It is possible to overuse mocking. The goal of mocking is to isolate the code you want to test from other components in the system. There are two rules of thumb that should be followed to ensure mocking is done properly:

1. Only test (and thus mock) the external behavior of any object
   Mocking the internal behavior of objects can make unit tests brittle and hard to maintain during refactoring.
2. Mock all objects and external dependencies that are not being actively tested
   Mocking all objects obviously produces meaningless test results. Use mocking to keep unit tests focused the behavior of the method you’re testing. Nothing more. Nothing less.

Q: Is JustMock included in the Telerik Premium Collection?
No, JustMock will not be part of the Premium Collection. Instead, it is one of the new tools included in the recently introduced Ultimate Collection (along with WebUI Test Studio Developer Edition).

Q: Is JustMock available as a standalone product?
Not today, but it will be when it is officially released. Final pricing is not yet set, but you can expect it to be very price competitive with other commercial mocking tools. We currently expect pricing to fall somewhere between $299 and $399.

Q: Is JustMock free and open source?
The beta (which is available now) is free, but the final product will be commercial. JustMock is not an open source product, nor does it derive from an open source library. It’s built from the ground-up by Telerik.

Q: When will JustMock be released?
JustMock is currently in beta, and it will be officially released with our Q2 2009 release (slated for July). The beta is free, though, so download it today and take it for a spin.

Q: How is JustMock different from existing mocking frameworks?
We are well aware that there are many great mocking frameworks available for .NET developers, both open source and commercial. In our experience as a software development company, though, none are perfect and we see room to fill in some gaps and create a better competitive environment around mocking tools. Among the many features in the JustMock beta, here are areas we aim to provide unique value:

• Performance – We provide both “simple” (aka, Proxy) and Profiler API-based (aka, Elevated) approaches for mocking so that you can use the technique best suited for your code. The simple method is comparable to many open source frameworks and is fast and easy to setup/deploy. The Profiler-based approach is what commercial mocking frameworks tend to employ, and it is more powerful, capable of mocking just about everything. Our hybrid approach is unique and gives you the best of both worlds.
• Simplicity – We know that mocking is still new for many of you, so we are providing simple to use strongly-typed, fluid API that employs the AAA Patern- Arrange/Act/Assert. There is one simple way to use JustMock, based on the latest framework features, so no “legacy” concepts pollute the API.
• Integration – Of course, one of the advantages of a Telerik mocking tool is that it’s part of the legendary Telerik stack that includes great support. We plan to really build on the integration story with other tools like JustCode in future releases.

Q: Why does JustMock use the Arrange/Act/Assert pattern? What about Record/Replay?
The Arrange/Act/Assert pattern is a more logical and clean approach to unit testing than the legacy Record/Replay. With AAA, you group your testing actions by function, making it clear what part of your test is involved in setup versus verification. The pattern can be applied to all unit testing, but it is especially useful when mocking is involved.

Record/Replay is an older pattern and it is similar to using GOTO statements in your unit tests. This makes the pattern more difficult to follow and clearly less ideal from a programming perspective. Therefore, JustMock is focused on supporting the AAA pattern.

Q: Is there any JustMock documentation?
Of course! Even in the beta release there is documentation, though most of it exists as “learn by example.” When you download the beta, you’ll find a demo project that shows you through code all of the various ways you can use JustMock. For the final release, we’ll be updating and providing complete product documentation.

You can (and should) also follow Team Lead Mehfuz Hossain’s blog, where he is posting regularly on JustMock.

Looking ahead to Q2 2010, Part 1

I know, I know. You’ve just started looking at the Q1 service packs, you’re still trying to digest all of last week’s announcements, and now we’re already talking about Q2?! Time marches on, and Q2, believe or not, will be here in less than three months. With three major releases every year, things move fast at Telerik. What can you expect to find in the next major release?

Fortunately, there are road maps for that, and many of the Developer Tools road maps are now available on Telerik.com. Here are some direct links and highlights from the Q2 2010 road maps:

• RadControls for ASP.NET AJAX
• [NEW CONTROL] TagCloud
• [FEATURE] RadAsyncUpload – New Flash/Silverlight upload modes
• [FEATURE] RadEditor – Option to have DIV content area instead of IFRAME
• [FEATURE] RadGrid – New GridDragDropColumn
• [FEATURE] RadListView – Client template support
• [FEATURE] RadScheduler – Reminders + time zone support
• [MAJOR UPDATE] RadRotator – Load-on-demand support + carousel mode
• SharePoint 2010 web parts for Grid and Editor
• Telerik Extensions for ASP.NET MVC
• [NEW CONTROL] Combobox
• [NEW CONTROL] Editor
• [NEW CONTROL] Window
• [FEATURE] Grid – Hierarchy, edit form, and resizable column support
• RadControls for WinForms
• [MAJOR UPDATE] RadGridView – new data engine + many new UI features
• [NEW CONTROL] Desktop Alert
• [NEW CONTROL] TabView
• [FEATURE] RadScheduler – Reminders, Time Zones, + many new features
• [FEATURE] RibbonBar – New Office 2010 UX
• 30% performance improvement in TPF thanks to new optimizations and caching

Be sure to click on the links to examine the full road maps in detail. There is obviously much more happening in Q2 than I highlighted here, so read the road maps if you want all of the nitty-gritty.

There are also clearly some “missing” road maps today. They will be published towards the end of this week and early next. Stay tuned for part two of “looking ahead” for the links and highlights for XAML, ORM, Reporting, and JustCode. Until then, set your alarms and start dreaming of the ways you can use the new controls and features when they ship in July.

Q1 2010 Service Packs Available

While April has become a big month for more new products and announcements from Telerik, the bits released about a month ago as part of Q1 2010 are already receiving the first round of service packs. Of course, with the official VS 2010, .NET 4, and Silverlight 4 releases last week, SP1 is a perfect time for Telerik to ship official support for Microsoft’s latest platforms. And that’s definitely part of what you find in Q1 2010 SP1.

Available now are service packs for (with selected highlights):

• RadControls for ASP.NET AJAX (2010.1.415)
• VS 2010/.NET RTM support
• [RadCaptcha] Audio captchas now embedded in page!
• [RadEditor] Improved Paste from Word support
• [RadRotator] New cross fade animation
• Telerik Extensions for ASP.NET MVC (2010.1.416)
• A few breaking changes: Grid, Treeview
• OSS NOTE: Remember, only the “commercial” license gets updated for SPs and hotfixes. The OSS branch is updated for major releases.
• RadControls for WinForms (2010.1.409)
• VS 2010/.NET 4 RTM support
• Client profile support
• New Office 2010 & Breeze Extended themes
• Major improvements to new Visual Style Builder
• JustCode (2010.1.415)
• VS 2010/.NET 4 RTM support
• Significantly improved/enhanced typing assistance
• Additional memory/performance optimizations

Service packs for the remaining developer tools- Telerik Reporting, OpenAccess ORM, and the RadControls for Silverlight and WPF- will be available very soon, too. These SPs will all focus on delivering official support for VS 2010 and .NET 4, in addition to polishing some of the features introduced in Q1 2010. For example:

• RadBook in RadControls for Silverlight SP1 will introduce UI virtualization, enabling it to handle huge numbers of pages
• Data Services Wizard will become part of the main OpenAccess ORM installer

Stay tuned for the last of the service packs this week and get started now downloading the four SP1s available today!