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!)