DevTools Ecosystem Summit: Best Practices for Extending the IDE with a Focus on Performance, Part 1

I had the opportunity to present at the DevTools Ecocsystem Summit held in Redmond between October 19 and 23. I had two presentations, the first with the title “Best Practices for Extending the IDE with a Focus on Performance”, and the second held in cooperation with Quan To about VS 2010 extension deployment. After the presentations I decided to blog the presentations in a transcript-like way including demos with source code and screenshots.

This post is the first part of my “Performance Focus” presentation.

Good Afternoon! It is great to be here at the DevTools Ecosystem Summit! Welcome to this session, just right after the lunch. I hope you’ve drunk enough coffee… I’m Istvan Novak, a C# MVP and a VSX Insider from Hungary.

I’ve spent a few years with deep diving into VSPackage development, and I would not say it is very easy, mainly because of the lack of documentation and lack of guidance.

It the title of the session I used the expression „Focus on Performance”. Saying this I understand three things that are my main objectives with this session:

• First, I’d like to tell you a few interesting technologies and techniques to make you a more efficient Visual Studio Extensibility developer.
• Second, I’d like to show you a few tricks that allow your extensions have a great performance and avoid bottleneck issues.
• Third, I want to show you a few great potentials in Visual Studio 2010 that makes developing extensions not a challenge but rather fun.

In this session I will use only a few slides and show you a bunch of demos to let you feel what I really mean when saying technologies, techniques and tricks.

As you know and probably have heard quite often, the VS 2010 UI is based on the WPF technology. While VS 2010 still fully supports Windows Forms UI, I suggest you learning WPF and designing your extensions with WPF in mind.

If you have ever used macros or created VS Add-Ins, it is time to get familiar with the Visual Studio 2010 SDK that provides you two more extensibility options:

• To possess the full power of extensibility, create Visual Studio Packages with the Managed Package Framework. With packages you can create powerful extension for VS just like if those were shipped with the product.
• The Visual Studio SDK also opens you a new way of extending the Visual Studio editor. While in the past doing it was very painful and a hard job, with the new editor extensibility model it becomes fun. During this session, in the other room the VSX 103 session is about creating editor extensions. I suggest you downloading the session video and watching it.

Due to the COM roots of VS creating installation kits and managing deployment had many small annoying details. With VS 2010 VSPackage deployment has been significantly simplified. Visit VSX 102 in the next session slot to pick up more details on this topic.

Well, an important key to become an efficient developer: the ability to avoid the pitfalls our way is often paved with. During the session I will enumerate the most common pitfalls I’ve used to meet and help you avoiding them.

The new .NET Framework 4.0 introduces a new technology called Managed Extensibility Framework. The role of MEF is to help the shift from statically compiled applications into the dynamically composed ones. The full VS 2010 Editor Extensibility model is built on MEF, and you can also leverage on MEF’s great features. If we’ll have enough time at the end of this session I will demo you VSPackage leveraging on MEF.

Those who use the Visual Studio Automation model heavily know how painful it is to using it from C# related to macros or to dynamic languages. C# 4.0 will support extremely useful new language features that ultimately allow using COM object models in C# just like in other scripting or dynamic languages. These include the new dynamic type, optional and named parameters. In this talk I do not dive deeper in to this topics, but I’d encourage you to check what is new is C# 4.0.

If you asked me what I really like in the VS 2010 release I would answer the way how the Visual Studio changes to leverage on more and more managed code. While the majority of VS 2008 user interface is unmanaged, VS 2010 UI is built on the WPF technology which is managed. The new code editor changed its UI to WPF and at the same time also the codebase went to managed code.

The WPF rendering surface is actually a DirectX surface. The performance benefits for complex user interfaces are huge. Large images can be blended and scaled in hardware and the entire scene is double-buffered to allow rich, fluid animations. So these are not HWNDs we’re dealing with – although all WPF applications will have at least one real HWND on the desktop, the contents of that HWND are managed entirely by the WPF compositing and rendering engines.

“Retained mode” is the term used to describe a graphics system where you don’t need to get involved in the painting of your window. Contrast this to HWND-based painting where you have to handle messages such as WM_PAINT and WM_ERASEBACKGND in order to get pixels to light up on the screen. Because each HWND is responsible for painting its own contents, if an application hangs or is slow to respond, this can lead to repaint problems on the desktop – holes in the display. In a retained mode system, such as WPF, you cause the scene to be rendered by adding or updating visual objects in the scene. When the visual object tree changes, then WPF will re-render the window for you.

The kinds of objects in the tree might be simple things such as rectangles or circles. They might be controls such as buttons, checkboxes or toolbars, or they might be advanced visual elements such as a video stream or a 3d model.

Data binding is simply the creation of a reference from one piece of data (a datum) to another. Typically the binding creates a connection between the UI and the application’s business logic. When the source of the binding changes, the target also updates. The “binding” is described using a “binding expression”. A binding expression may be a simple path – for example, “bind the visibility of this button to the value of this boolean property” – or it may describe complex connection between, say the results of a database query and a grid control displaying the results.

Styling allows you to override the default visualization and behavior of any WPF control. Want your buttons to glow and spin when you click them? Styling allows you to specify that behavior once and apply it to all buttons in the visual tree. Templating allows you to specify the visual appearance for all elements in a collection, for example a list box. This is a very powerful mechanism which allows us to apply a visual theme (or a “skin”) across the entire user interface by changing just the root node of our visual tree.

In this demo I am going to show you a simple tool window displaying process information similar to the Task Manager. I have created two separate packages that use perfectly the same logic except the first one is built with Windows Forms UI, the second with WPF. Let’s start them!

The two tool windows look similar; however, the WPF is a bit more sophisticated. When clicking on the column headers we can order the table according to the column clicked, and you also can discover alternating row colorings. Of course, you can do the same effect with Windows Forms by using third-party controls, but the WPF data grid does it for you free out of the box. Try to resize the grid columns both for the top and bottom tool windows. You’ll experience that while the transition in WPF (top) window is smooth, the Windows Forms tool is flickering.

 You see the Binding attribute of the columns that assign appropriate property of processes with the corresponding column. This XAML file declares the visual attributes of the UI, and it is very powerful. Just adding a few XAML lines without any coding we can use the styling and templating of WPF to solve tasks we use to code with Windows Forms. Here I uncomment the code that defines “mouse over” behavior for grid cells:

And also add a new column to the grid:

When running the modified tool window, we can recognize the effect of changes:

There is a new column in the grid, and as I move the mouse over the cells, the cell colors get changed.

What I showed you is just a tiny part of benefits coming from WPF but I hope it was enough to convince you to turn to WPF when developing your extensions.

Part 2>