Jerry Nixon @Work: Windows 8: Making the case for Expression Blend

Jerry Nixon on Windows

Wednesday, July 25, 2012

Windows 8: Making the case for Expression Blend

imageOne of the coolest parts of the XAML designer in Visual Studio 2012 is that it is the same code base as the designer in Expression Blend for XAML. That’s right. Blend’s designer used to be better, but now Visual Studio developers are first class, too.

Visual Studio inherited quite a windfall!

Here’s a comparison of the features between Blend and Visual Studio. It’s pretty clear that at its highest level, Visual Studio got the big end of the stick. That’s really great.

Here’s the source for that chart.

Yeah, but, um…

imageOf course, in Beta, the new XAML designer isn’t perfect. One of the funnier quirks is that the designer says “you can continue working while the designer is loading” except that auto complete, the properties dialog, and some other core features of the editor don’t light up until the designer completely loads.

Why is that funny? Well, it’s like that message that intellisense is still building from meta data – please continue working. How is a crippled, lazy developer like me supposed to continue working without my intellisense crutch and autocomplete. Now, come on! It should read, “you can browse http://bestofyoutube.com” or “go check Facebook” while waiting…

In addition, during beta I have found myself opening Task Manager and hunting for “XDesProc” when something goes wrong. Now that the designer is outside of the Visual Studio process, you can recycle it without having to recycle Visual Studio. That’s a handy tip if you are working with the beta.

Here’s the point

The Visual Studio 2010 XAML designer was pretty nice. But it had limits in functionality and stability that drove me to Blend. As lovely as this Dev 11 update is, I can’t help but be concerned that Visual Studio developers who avoided Blend, have even less reason to try it!

That’s why I wrote this:

Why use Expression Blend?

Before I get started, let me make this extra point – XAML developers can use Expression Blend, but so can HTML5/JavaScript/CSS3 developers. With the new version of Expression Blend (currently shipping with the Visual Studio 2012 beta installer), HTML5/JavaScript/CSS3 developers benefit from a near-parity experience in Blend, with HTML5/CSS3 getting emitted instead of XAML. What a deal.

Here are some top 5 reasons to use Expression Blend.

1. Visual Studio

imageWhat’s this? The first reason to use Blend is Visual Studio? That’s right. Some developers don’t realize that Blend can open and interact with a Visual Studio Solution or Project just like Visual Studio. This lets you move in and out between Visual Studio and Blend seamlessly. Use Visual Studio when you need to code. Use Blend when you need to design. That’s the point.

2. Behaviors

A lot of Blend developers will cry foul here since behaviors are not in the beta. But behaviors are self-contained code snippets that can be used and configured at design-time to implement recurring patterns of functionality (like drag/drop, zoom, and changing visual states). There are many libraries already out there and developers can create custom behaviors when they want.

No, Blend has not abandoned behaviors.

With behaviors, more and more of the UX can be “code-figured” in Blend without dropping to code. There is a benefit here in consistency, reusability, encapsulation, and being able to let non-developers implement more of the applications. Behaviors can be powerful or simple. The reality is, behaviors let Blend simplify a lot of the UX implementation.

3. Binding and Sample Data

Here I go again, talking about features that are not in the beta. To generate sample data you use the Data tab. Behold, that tab is missing in beta. There are other ways to use design time data, but no better way to generate that data (names, phone numbers, emails, photos, and so much!). Blend’s data generation features set it apart from any other tool – and can save developers a lot of time.

No, Blend has not abandoned data generation.

Blend is not like a typical HTML designer – those just render the HTML on that page. Blend understands your whole solution / project. It let’s you spelunk through your project and references to find the right class or template binding. And, it lets you set design-time only properties so you can enjoy sample data for your bindings in the visual designer.

4. Animation Timelines

No tool creates animation timelines as easily or completely as Blend. Period.

imageCreating animations is a powerful capability of XAML and CSS3. But it can be a complex process to script. Creating animation timelines visually not only a more rapid experience, it is also a more visually accurate experience. The fact that theme animations can also be previewed makes Blend an awesome resource for developers and designers working on animations.

5. Sketchflow

If you have not already discovered the storyboard capabilities in Power Point, then you are missing out on a really powerful and valuable design tool. With only Power Point you can create quick, communicative wire frames to get your ideas off the ground.

image

Having said that, Power Point storyboards are just wire frames. They are not mock ups. They are not functional. The real requirements tool for designers is Sketchflow. What’s that you say? Yet again I am talking about something that is not in the beta version of Blend? Be cool people.

No, Blend has not abandoned Sketchflow.

Sketchflow tool is part of Blend and creates simple, functional mock ups that can be passed around the team and to stakeholders for review. It can be notated. It can be animated. It can be integrated into TFS. And, best of all, it secretly creates the XAML under the covers so transition from mocked up ideas (which might involve zero developers) to product (which is what developers make) is a smaller gap.

That’s it?

You know I wanted to include Visual State editing and Path editing. Those two are so powerful they didn’t deserve to be omitted from the list. And the fact that Windows Phone development can leverage Blend, that’s another one that I should have included. But, alas, in a list of 5 – there is only room for 5. And, after all, this is America. Who has time to read 6 whole items in a list?

Conclusion

Many, many developers and designers have come to learn and love Blend as a tool for rapid UX creation and powerful interactivity features. However, many, many, many developers have stuck to Visual Studio and avoided Blend. Yes, Blend has a learning curve. Is it worth it? I think so.

Best of luck!