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.