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.

Random Online Utility: Omega.MSSQL for Azure

Two ROUs in one week?! I'm working overtime for you this week and I have another very cool (and free) Random Online Utility to share. This time, the tool is called Omega.MSSQL and it is from a company called Cerebrata (based in India).

I found this tool while looking for something that would let me browse the objects in my SQL Azure databases. As you may be aware, the current version of SQL Azure does not support the Microsoft SQL Server Management Studio object browser. There are some "hacks" that allow you to use SSMS to query Azure, but it's far from the visual tool I wanted.

Omega.MSSQL fits the bill perfectly. Cerebrata has made this tool for a while (it seems) for standard use with SQL Server, but their recent update enables full compatibility with SQL Azure. The tool is web-based, so no installs required, and it is currently free of charge. You just visit the log-in page, input your SQL Azure instance details, and then browse your objects (assuming you've configured your SQL Azure firewall, too). You can browse most object types and you can even perform actions like creating and dropping tables.

Coincidentally, Steven Forte recently highlighted another tool you can use to browse and query objects in SQL Azure, called Gem Query. This tool is Windows-based, so it does require an install, and it offers much better querying tools than Omega.MSSQL. It does not, however, seem to offer as much help for performing schema operations (like drop table), so I still prefer Omega for that.

Both tools are free, though, and both are great help if you're starting to work more regularly with SQL Azure. And since OpenAccess ORM now supports Azure, I'm sure you've got even more incentive to start developing for the cloud!

Random Online Utility: TeraCopy

It's only been 9 months since I last encountered a random utility program that I enjoyed enough to stop and bring your attention to it (in this running "series" of Random Online Utilities). This time the helpful little program is called TeraCopy.

As a remote Telerik office with HQ in Sofia, Bulgaria, I often find myself trying to download large files over a Windows network that may experience intermittent communication errors (due to VPN disconnects, local Internet issues, etc.). This can lead to some pretty frustrating experiences. Imagine trying to download a 2GB ISO only to have a network communication error throw away the hours of waiting because your VPN decided to reset. Not cool...

TeraCopy is the best utility I've found to address the problem. It is a free utility app that supports most versions of Windows (including Win7 32/64 bit) and provides "resilience" to network file copying that Windows (frankly) should have out of the box. It supports queuing, pausing, resuming, and auto error recovery for any Windows file copy operations. In fact, if enabled, TeraCopy will automatically intercept all copy operations without requiring any additional action on your part. It's like Internet Download Manager (my preferred web download manager) for Windows.

Now, I know some of you will be quick to reference RoboCopy, Microsoft's built-in support for more robust network file copying. While true that RoboCopy does do a better job than built-in Windows copying, out-of-the-box it is a command line only tool, which makes it less than convenient for everyday network copying. There are GUIs for RoboCopy, too, but I find TeraCopy to be more minimalistic and transparent- just the way a great random utility should be!

Random Online Utility: WhatTheFont

I think I'm going to start a new series on Telerik Watch to highlight my favorite (usually free) ROUs, or Random Online Utilities. You know the ones. The little online utilities that only do one thing but do it so well that you can't imagine working without them. Take for example the utility that someone in Telerik pointed me to today called "WhatTheFont." As the name implies, you simply upload an image that contains the font you're trying to decipher, help the online tool recognize your letters, and then it's off to the races providing you with likely font matches. And it works! I used it today to figure out the font used in Telerik's Sitefinity logo. Now, this probably isn't a tool I'll use often, but it's definitely cool to know there is a tool out there that can help solve the infamous "what font are they using" question when the time comes. Hopefully this will come in handy next time you face a similar dilemma. Stay tuned for more "Radom Online Utilties" over the next few weeks and months. In the mean time, what little ROUs do you find essential (or just plain cool)?